English versionEN

Reimagine Frontend in the Serverless Era

Founder, Mentor @Evangelia | ex-Elastic , ex-ETH Zurich , ex-Google (contractor)

This talk explores the architectural implications for frontend development in serverless applications. I’ll examine how the stateless, on-demand nature of serverless backends requires frontend developers to adopt new patterns and strategies. We’ll discuss how architectural decisions around distributed state management, connection handling techniques to mitigate cold starts, designing better loading experiences, implementing robust error boundaries, and adapting authentication logic impact the frontend architecture in serverless environments.

This talk has been presented at React Summit 2025, check out the latest edition of this React Conference.

FAQ

Fioromat Academy is an upskilling academy for frontend engineers, founded by Evangelia, focusing on modern frontend technologies and practices.

Serverless technologies shift more state management to the frontend and database layers. They demand enhanced caching strategies and resilient HTTP call handling, and they change how frontend interacts with backend services through smaller, stateless functions.

No, 'serverless' is misleading. It means the backend is composed of stateless, ephemeral units managed by cloud providers, rather than having no server at all.

Optimistic updates allow the frontend to update the state in the browser before receiving confirmation from the backend, providing instant UI feedback and rolling back if necessary.

In serverless architecture, caching reduces HTTP API calls and mitigates cold start delays. Tools like Tanks.Query and SWR are used to manage cache validation and prevent stale data.

Serverless architecture increases the likelihood of HTTP call failures due to network issues or cold starts, so resilient connection handling and retry strategies are essential to maintain a smooth user experience.

UI components in serverless architecture are smaller and more granular, each interacting with specific serverless functions. This requires granular loading states and error handling for individual components.

Error handling is crucial because serverless architectures experience more frequent and unpredictable errors. Granular error handling at component level ensures failures are isolated and the app remains usable.

Evangelia plans to offer a new course on properly using data structures in frontend development through practical applications.

serverless

Evangelia (Litsa) Mitsopoulou

8 min

17 Jun, 2025

Comments

Video Summary and Transcription

Evangelia, tech founder of Fioromat Academy, discusses the impact of serverless technologies on frontends, emphasizing a shift towards lightweight, stateless backends split into smaller units and the increased importance of API gateways and serverless functions. The discussion also highlights the significance of optimistic state updates, caching strategies to reduce API calls, resilient connection handling with retries for failed HTTP calls, granular error handling at the component level, and custom fallback UI per component. Overall, the Talk emphasizes the evolving frontend architectures and the necessity of adapting to changes in data structures and technologies.

Available in Español: Reimagine Frontend in the Serverless Era

Video transcription and chapters available for users with access.

Available in other languages:

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

You Don’t Know How to SSR

DevOps.js Conf 2024

23 min

You Don’t Know How to SSR

Emanuele Stoppa

Active contributor to the Biome project

The Talk covers the speaker's personal journey into server-side rendering (SSR) and the evolution of web development frameworks. It explores the use of jQuery for animations in SSR, the challenges faced in integrating React with Umbraco, and the creation of a custom SSR framework. The Talk also discusses the benefits of Next.js and the use of serverless artifacts for deployment. Finally, it highlights the features of Astro, including its function per route capability.

next.js serverless astro

AWS Lambda under the hood

Node Congress 2023

22 min

AWS Lambda under the hood

Top Content

Luca Mezzalira

Author of Front-End Reactive Architectures and Building Micro-Frontends

In this Talk, key characteristics of AWS Lambda functions are covered, including service architecture, composition, and optimization of Node.js code. The two operational models of Lambda, asynchronous and synchronous invocation, are explained, highlighting the scalability and availability of the service. The features of Lambda functions, such as retries and event source mapping, are discussed, along with the micro VM lifecycle and the three stages of a Lambda function. Code optimization techniques, including reducing bundle size and using caching options, are explained, and tools like webpack and Lambda Power Tuning are recommended for optimization. Overall, Lambda is a powerful service for handling scalability and traffic spikes while enabling developers to focus on business logic.

aws serverless

Advanced GraphQL Architectures: Serverless Event Sourcing and CQRS

React Summit 2023

28 min

Advanced GraphQL Architectures: Serverless Event Sourcing and CQRS

Watch video: Advanced GraphQL Architectures: Serverless Event Sourcing and CQRS

Slobodan Stojanović

Vacation Tracker

GraphQL is a strongly typed, version-free query language that allows you to ask for specific data and get it in JSON format. It simplifies data retrieval and modification by allowing the server to handle all necessary operations. Serverless architectures, such as AWS Lambda, are scalable, cost-effective, and good for event-driven applications. Event sourcing and CQRS are techniques that ensure consistency and separate reading and writing parts of an application. Building a GraphQL API with commands and queries can be achieved using AWS AppSync and DynamoDB. This approach offers low latency, scalability, and supports multiple languages. Challenges include application complexity, data modeling, and tracing, but starting with simplicity and making something work first can lead to success.

advanced graphql serverless api development

Building Dapps with React

React Advanced 2021

30 min

Building Dapps with React

Nader Dabit

Author, open source developer working in blockchain space with Edge & Node and The Graph Protocol.

The Talk discusses building decentralized applications (DApps) with React and explores the benefits of smart contract technology. It highlights the characteristics and infrastructure of Web 3 applications, including decentralized indexing, off-chain data storage, and decentralized file storage. The Talk also covers identity in Web 3, with a focus on self-sovereign identity and the use of blockchain for identity verification. The process of building a DApp with React and Hard Hat is explained, along with deploying contracts and interacting with them. Overall, the Talk provides insights into the world of DApps and the technologies involved.

react blockchain serverless web3

Serverless for Frontends

DevOps.js Conf 2022

8 min

Serverless for Frontends

Premium

Florian Rappl

Solution Architect @ smapiot

Welcome to my session on Serverless for Front-ends. Serverless functions eliminate the need for a runtime and handle orchestration for you. Microfrontends require a runtime and orchestration, but side-less UIs provide a runtime-free solution. In the demo, a new team adds functionality to an application and publishes it easily. Building and deploying applications is quick and easy with micro apps and PowerCLI, offering true loose coupling and instant availability without a runtime.

devops frontend serverless

Serverless in Production, Lessons from the Trenches

Node Congress 2022

34 min

Serverless in Production, Lessons from the Trenches

Yan Cui

AWS Serverless Hero

This Talk provides valuable insights for those considering serverless in 2022, with a focus on troubleshooting and observability using Lumigo. It emphasizes the use of multiple AWS accounts and Org Formation for better control and scalability. Security considerations include securely loading secrets at runtime and implementing zero-trust networking. Optimizing Lambda performance is discussed, along with updates on serverless frameworks and the role of Terraform. The Talk also compares Honeycomb and Lumigo for observability in serverless applications.

node.js cloud serverless

Workshops on related topic

AI on Demand: Serverless AI

DevOps.js Conf 2024

163 min

AI on Demand: Serverless AI

Top Content

Featured WorkshopFree

Nathan Disidore

In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.

serverless architecture artificial intelligence

Building Serverless Applications on AWS with TypeScript

Node Congress 2021

245 min

Building Serverless Applications on AWS with TypeScript

Workshop

Slobodan Stojanović

This workshop teaches you the basics of serverless application development with TypeScript. We'll start with a simple Lambda function, set up the project and the infrastructure-as-a-code (AWS CDK), and learn how to organize, test, and debug a more complex serverless application.
Table of contents: - How to set up a serverless project with TypeScript and CDK - How to write a testable Lambda function with hexagonal architecture - How to connect a function to a DynamoDB table - How to create a serverless API - How to debug and test a serverless function - How to organize and grow a serverless application

Materials referred to in the workshop:
https://excalidraw.com/#room=57b84e0df9bdb7ea5675,HYgVepLIpfxrK4EQNclQ9w
DynamoDB blog Alex DeBrie: https://www.dynamodbguide.com/
Excellent book for the DynamoDB: https://www.dynamodbbook.com/
https://slobodan.me/workshops/nodecongress/prerequisites.html

typescript node.js aws serverless

Serverless for React Developers

React Summit 2022

107 min

Serverless for React Developers

Workshop

Tejas Kumar

Intro to serverlessPrior Art: Docker, Containers, and KubernetesActivity: Build a Dockerized application and deploy it to a cloud providerAnalysis: What is good/bad about this approach?Why Serverless is Needed/BetterActivity: Build the same application with serverlessAnalysis: What is good/bad about this approach?

web development serverless beginner friendly

Building a GraphQL-native serverless backend with Fauna

GraphQL Galaxy 2021

143 min

Building a GraphQL-native serverless backend with Fauna

Workshop

2 authors

Welcome to Fauna! This workshop helps GraphQL developers build performant applications with Fauna that scale to any size userbase. You start with the basics, using only the GraphQL playground in the Fauna dashboard, then build a complete full-stack application with Next.js, adding functionality as you go along.

In the first section, Getting started with Fauna, you learn how Fauna automatically creates queries, mutations, and other resources based on your GraphQL schema. You learn how to accomplish common tasks with GraphQL, how to use the Fauna Query Language (FQL) to perform more advanced tasks.

In the second section, Building with Fauna, you learn how Fauna automatically creates queries, mutations, and other resources based on your GraphQL schema. You learn how to accomplish common tasks with GraphQL, how to use the Fauna Query Language (FQL) to perform more advanced tasks.

database graphql serverless backend

Scaling Databases For Global Serverless Applications

Node Congress 2022

83 min

Scaling Databases For Global Serverless Applications

Workshop

Ben Hagan

This workshop discusses the challenges Enterprises are facing when scaling the data tier to support multi-region deployments and serverless environments. Serverless edge functions and lightweight container orchestration enables applications and business logic to be easily deployed globally, often leaving the database as the latency and scaling bottleneck.
Join us to understand how PolyScale.ai solves these scaling challenges intelligently caching database data at the edge, without sacrificing transactionality or consistency. Get hands on with PolyScale for implementation, query observability and global latency testing with edge functions.
Table of contents- Introduction to PolyScale.ai- Enterprise Data Gravity- Why data scaling is hard- Options for Scaling the data tier- Database Observability- Cache Management AI- Hands on with PolyScale.ai

node.js observability serverless enterprise

Live e2e test debugging for a distributed serverless application

TestJS Summit 2021

146 min

Live e2e test debugging for a distributed serverless application

Workshop

2 authors

In this workshop, we will be building a testing environment for a pre-built application, then we will write and automate end-to-end tests for our serverless application. And in the final step, we will demonstrate how easy it is to understand the root cause of an erroneous test using distributed testing and how to debug it in our CI/CD pipeline with Thundra Foresight.

Table of contents:
- How to set up and test your cloud infrastructure
- How to write and automate end-to-end tests for your serverless workloads
- How to debug, trace, and troubleshot test failures with Thundra Foresight in your CI/CD pipelines

testing e2e testing serverless debug