> Markdown version of [/videos/682-meet-your-new-bff-backend-to-frontend-without-the-duct-tape?t=282](https://www.wearedevelopers.com/videos/682-meet-your-new-bff-backend-to-frontend-without-the-duct-tape?t=282). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Meet Your New BFF: Backend to Frontend without the Duct Tape

Stop wasting hours writing fragile API glue code. Learn how a single shared TypeScript entity instantly generates full CRUD endpoints, real-time sync, and unified validation.

- **Speakers:** Noam Honig
- **Event:** WeAreDevelopers LIVE
- **Published:** September 21, 2023
- **Duration:** 51:04
- **URL:** https://www.wearedevelopers.com/videos/682-meet-your-new-bff-backend-to-frontend-without-the-duct-tape

## Summary

Full-stack development usually requires fragile duct tape to connect frontend UI with backend APIs and databases. Developers waste hours duplicating models, defining API routes, managing validation logic, and writing repetitive boilerplate. By making a shared TypeScript entity the single source of truth, teams can unify their stack, eliminating context switching and drastically reducing error-prone code. Using the open-source library Remult alongside Angular and Express, developers can add simple decorators to a shared model to instantly generate full CRUD APIs, server-side pagination, filtering, and role-based access control. With just a few lines of code, standard remote queries can be upgraded to real-time sync using server-sent events and RxJS. Moving complex batch operations from the frontend to backend controllers takes minimal effort, and adapting to a PostgreSQL database requires just a basic configuration change. Embracing lazy development allows engineers to focus on business value rather than architectural configuration. A unified entity definition ensures that validation and authorization rules run consistently on both the client and the server, preventing unnecessary network requests and securing the database boundary. This methodology incrementally adapts into existing environments, enabling rapid generation of OpenAPI documentation and GraphQL endpoints without rebuilding the entire technology stack.

**Keywords:** full-stack typescript development, reducing backend boilerplate, single source of truth architecture, remult open-source library, angular frontend framework, node express backend, automated crud api generation, real-time database synchronization, centralized data validation rules, role-based access control implementation, real-time server-sent events, postgresql database adapters, openapi swagger documentation, graphql endpoint generation, shared typescript entity models

## Chapters

1. **Characteristics of a data intensive application developer** (00:03) — Prioritizing fast iterative deployments with TypeScript over boilerplate provides essential guardrails for robust enterprise data applications.
1. **Identifying repetitive boilerplate code in basic CRUD applications** (01:39) — Creating separate front-end API connections and back-end models necessitates repetitive synchronization during application scaling.
1. **Turning a frontend application into a full stack application** (03:39) — Converting an isolated single-page application into an integrated environment starts with managing front-end component state efficiently.
1. **Establishing a basic Node Express server with TypeScript** (04:42) — Spinning up an initial Node backend utilizing TypeScript guarantees type-safe routing out of the box.
1. **Configuring shared entities to unify frontend and backend logic** (06:12) — Utilizing standard decorator classes aligns server-side databases with API boundaries from one single unified model.
1. **Consuming backend endpoints using frontend repository query abstractions** (09:07) — Calling repository models automatically handles request formatting to cleanly query database pages within the UI framework.
1. **Transitioning static data fetching to real-time live queries** (12:59) — Migrating standard static fetches to continuous live queries orchestrates real-time event broadcasting to multiple client windows.
1. **Enforcing consistent data validation across the entire stack** (16:24) — Attaching property validation logic inside a unified entity immediately safeguards endpoints against improper network payloads while warning interface users.
1. **Refactoring bulk frontend operations into scalable backend methods** (18:40) — Exposing complex processing loops directly as backend methods reduces infinite client request cascades into a single transaction call.
1. **Replacing local json storage with a postgresql database connection** (21:12) — Swapping local development JSON mock files over to PostgreSQL adapters grounds future development within robust relational schema setups.
1. **Securing entities with declarative authentication and authorization rules** (22:27) — Integrating standard cookie session tokens restricts endpoint visibility natively and simplifies interface security states seamlessly.
1. **Preparing and deploying the full stack application via Railway** (27:36) — Packaging compiled static interfaces directly through hosted application nodes handles domain configurations easily.
1. **Integrating standard openapi documentation and graphql schema capabilities** (33:23) — Injecting standardized GraphQL tools and interactive Swagger docs opens raw operational models instantly for external clients.
1. **Scaling considerations and general framework production readiness implications** (35:27) — Deploying lean application server containers dramatically lowers operating overhead while satisfying immediate architectural pivots across rapid scaling demands.

## Related Moments

- [Choosing TypeScript for complex backend applications](https://www.wearedevelopers.com/videos/1033-nest-js-typescript-in-the-backend-can-also-be-clean) (from "Nest.js - TypeScript in the backend can also be clean")
- [Developing robust backend applications with the Nest framework](https://www.wearedevelopers.com/videos/421-next-nest-nuxt-nust) (from "Next, Nest, Nuxt… Nust?")
- [Accelerating development timelines using strictly typed REST APIs](https://www.wearedevelopers.com/videos/1195-the-great-api-debate-rest-graphql-or-grpc) (from "The Great API Debate: REST, GraphQL, or gRPC?")
- [Utilizing a backend for frontend architecture for data apps](https://www.wearedevelopers.com/videos/780-car-s-are-technology-on-wheels-impact-of-software-and-it-competence-in-automotive) (from "Car's are Technology on Wheels - Impact of Software and IT Competence in Automotive")
- [Accelerating frontend development with code templates](https://www.wearedevelopers.com/videos/621-navigating-the-corporate-jungle-life-as-a-developer-in-a-large-company) (from "Navigating the Corporate Jungle: Life as a Developer in a large Company")
- [Addressing backend architectures and code repository structures](https://www.wearedevelopers.com/videos/400-generate-customer-journeys-from-reusable-building-blocks) (from "Generate Customer Journeys from reusable Building Blocks")

## Related Articles

- [Dev Digest 120 - Apple and peers](https://www.wearedevelopers.com/magazine/455-dev-digest-120-apple-and-peers)
- [Dev Digest 132 - Binging WADFlix?](https://www.wearedevelopers.com/magazine/473-dev-digest-132-binging-wadflix)
- [Dev Digest 139 - Soft and hard queries](https://www.wearedevelopers.com/magazine/487-dev-digest-139-soft-and-hard-queries)
- [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us)

## Related Jobs

- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Senior Full Stack Engineer](https://www.wearedevelopers.com/jobs/48289-senior-full-stack-engineer) at **Sensory-Minds GmbH**
- [Mid/Senior Full-Stack Engineer (Web-first)](https://www.wearedevelopers.com/jobs/ext/1210833-mid-senior-full-stack-engineer-web-first) at **SMG Swiss Marketplace Group**
- [Senior Fullstack Engineer, Angular & Nestjs (Defi Wallet)](https://www.wearedevelopers.com/jobs/ext/1983681-senior-fullstack-engineer-angular-nestjs-defi-wallet) at **Bitpanda**