Meet Your New BFF: Backend to Frontend without the Duct Tape
Stop duplicating logic between frontend and backend. See how a single entity file can automatically generate a full-stack, type-safe API with validation and authorization.
#1about 4 minutes
The problem of repetitive code in full-stack development
Full-stack development often involves duplicating models, validation, and API logic, which can be streamlined by using a single source of truth.
#2about 5 minutes
Creating a full-stack API from a single entity definition
Use Remult decorators on a shared TypeScript class to automatically generate a full CRUD API with an Express server.
#3about 4 minutes
Connecting Angular to the API for CRUD operations
Use the Remult repository on the frontend to perform type-safe CRUD operations with built-in server-side paging, sorting, and filtering.
#4about 2 minutes
Enabling real-time data synchronization with live queries
Convert a standard data fetch into a real-time subscription by replacing `find` with `liveQuery` to automatically push updates to all connected clients.
#5about 2 minutes
Refactoring live queries with RxJS and the async pipe
Simplify component logic by converting the live query into an RxJS observable and using Angular's async pipe to manage subscriptions automatically.
#6about 2 minutes
Implementing write-once validation for frontend and backend
Define validation logic directly on the entity to enforce rules consistently on the client-side for immediate feedback and the server-side for security.
#7about 3 minutes
Optimizing operations with backend methods
Move inefficient client-side loops into a dedicated backend method to reduce network requests and execute business logic securely on the server.
#8about 1 minute
Switching from a JSON file to a Postgres database
Transition from the default JSON file storage to a production-ready Postgres database by simply configuring a data provider and connection string.
#9about 3 minutes
Securing the API with authentication and authorization
Secure API endpoints by adding rules like `allowAuthenticated` and role-based permissions directly to the entity definition.
#10about 2 minutes
Dynamically showing or hiding UI based on user permissions
Use the entity's metadata on the frontend to conditionally render UI elements, ensuring users only see actions they are permitted to perform.
#11about 5 minutes
Preparing and deploying the application to Railway
Configure the application for a production environment using environment variables and deploy it as a single server to a cloud provider like Railway.
#12about 3 minutes
Generating OpenAPI and GraphQL APIs from entities
Automatically generate both an OpenAPI (Swagger) specification and a GraphQL API from the existing Remult entities with minimal configuration.
#13about 16 minutes
Answering questions on Remult's capabilities and use cases
The speaker addresses audience questions about production readiness, scaling, framework compatibility, and best practices for reducing boilerplate code.
Related jobs
Jobs that call for the skills explored in this talk.
Matching moments
03:19 MIN
Identifying boilerplate and repetition in full-stack development
Build and Deploy a Fullstack App with Open Source Tooling
03:58 MIN
Demonstrating a multi-version and multi-framework app
Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios
03:01 MIN
The architectural challenges of traditional Node.js backends
Nest.js - TypeScript in the backend can also be clean
07:08 MIN
Answering questions on advanced Angular topics
Angular Features You Should be Using
01:43 MIN
Exploring Remult's compatibility with other frameworks
Build and Deploy a Fullstack App with Open Source Tooling
10:23 MIN
Reframing common complaints about JavaScript development
How to Stop Choosing JavaScript Frameworks and Start Living
What’s the Difference Between Frontend and Backend Development?“To frontend or backend — that is the question.”Are you torn between pursuing a career in frontend or backend development? It’s a common dilemma that many aspiring software engineers face, and the decision can feel overwhelming.First off, it’s import...
Chris Heilmann
WeAreDevelopers LIVE days are changing - get ready to take partStarting with this week's Web Dev Day edition of WeAreDevelopers LIVE Days, we changed the the way we run these online conferences. The main differences are:Shorter talks (half an hour tops)More interaction in Q&AA tips and tricks "Did you know" sect...
Chris Heilmann
All the videos of Halfstack London 2024!Last month was Halfstack London, a conference about the web, JavaScript and half a dozen other things. We were there to deliver a talk, but also to record all the sessions and we're happy to share them with you. It took a bit as we had to wait for th...