WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2025 • Aug 20, 2025 • Session details

Lessons learned from building a thriving Vue.js SaaS application

Abdelrahman Awad

How do you handle volatile state management and weeks-long user sessions in a massive Vue.js app? Uncover the architectural decisions that power a thriving SaaS messaging platform.

Pause
Mute Enter Fullscreen
#1 about 2 min

Introduction to the speaker and frontend projects

An introduction to the open-source libraries and professional background that shaped these real-world Vue implementations.

#2 about 2 min

Overview of the target real-time application

A breakdown of the application architecture, including its real-time messaging inbox and dynamic drag-and-drop bot builder.

#3 about 2 min

Choosing Vue and GraphQL for strong typings

How deploying Vue and GraphQL simplifies developer onboarding while enforcing strict end-to-end type safety between the client and server.

#4 about 4 min

Monorepo boundaries and flat code component structures

How strictly isolated deployment targets and flat, un-nested component directories remove organizational friction and enable rapid refactoring.

#5 about 2 min

Managing component duplication within massive frontend codebases

Strategies for avoiding duplicate logical clusters by aggressively decoupling ubiquitous system elements and domain-specific user interfaces into isolated libraries.

#6 about 4 min

Structuring and importing predictable, side-effect free composables

Specific rules for organizing Vue logic elements with explicit barrel files and safe function definitions that preserve predictable compiler tree shaking.

#7 about 2 min

Building reusable robust UI-agnostic data fetching composables

Architecting component functions that seamlessly encapsulate API queries, resilient GraphQL subscriptions, and local offline mappings without assuming structural DOM context.

#8 about 5 min

Evaluating state management mutability and dependency injections

An analysis illustrating explicit state ownership properties alongside the implicit developer experience and structural pitfalls inherent in the provide-inject API.

#9 about 3 min

Avoiding state duplication leveraging logical self-inject patterns

Preventing unnecessary network calls by incorporating logical singleton checks bounding explicit variable self-injections while monitoring unintended lifecycle listener traps.

#10 about 2 min

Replacing broad sockets with local-first storage mechanisms

A transitional development roadmap detailing local-first data store architectures and limiting brittle WebSocket dependencies via standard network polling.

#11 about 3 min

Prioritizing cumulative layout shifts and painting measurements

Why focusing on explicit Cumulative Layout Shift and strictly tracking Interaction to Next Paint realistically represent holistic user experience health inside single-page applications.

#12 about 4 min

Mitigating persistent asset version skew over lengthy sessions

Maintaining extreme application uptimes securely logging artifact hashes and distributing granular server-side compatibility headers instructing remote clients to refresh cleanly.

Matching moments

5:08 min

Overcoming challenges of scaling legacy monolithic frontend applications

Josh Goldberg · World Congress 2021

1:31 min

Introduction to the GraphQL, Apollo, and Next.js stack

Josh Goldberg · JS Congress

1:31 min

Recapping frontend scaling patterns and distributed UI techniques

Josh Goldberg · World Congress 2021

4:31 min

Optimizing system scalability and real-time push capabilities

David Leitner · World Congress 2022

10:09 min

Transitioning from graphic design to large scale frontend architecture

Erasmo Hernandez Erasmo Hernandez · World Congress 2026 Europe

2:11 min

Scaling development teams with micro frontend architecture

Florian Rappl · World Congress 2022

More from World Congress 2025

GenAI Security: Navigating the Unseen Iceberg thumbnail
24:33
11 months ago

GenAI Security: Navigating the Unseen Iceberg

Maish Saidel-Keesing

Behind the Code: How Women Are Powering the Future of AI thumbnail
30:28
about 1 year ago

Behind the Code: How Women Are Powering the Future of AI

Alexandra Wudel, Laura Moritz, Madalina Florean

The AI Hype Filter: What’s Real, What’s Investable, What’s Noise? thumbnail
28:12
about 1 year ago

The AI Hype Filter: What’s Real, What’s Investable, What’s Noise?

Justus Lumpe, Konstantin Vinogradov, Nils Eiteneyer, Stephan Wirris

AI in Leadership: How Technology is Reshaping Executive Roles thumbnail
28:19
about 1 year ago

AI in Leadership: How Technology is Reshaping Executive Roles

Bernd Datler, Jasmin Kaiser, Jeff Hausmann, Sonja Alvarez

The AI-Ready Stack: Rethinking the Engineering Org of the Future thumbnail
28:09
about 1 year ago

The AI-Ready Stack: Rethinking the Engineering Org of the Future

Alex Laubscher, Jan Oberhauser, Keno Dreßel, Mirko Novakovic

AI Sovereignty: What Does It Take? thumbnail
29:13
about 1 year ago

AI Sovereignty: What Does It Take?

Boris Hecker, Clemens Wasner, Robin Hermann, Sonja Alvarez

Related videos

petite-vue - Progressively enhancing every application? thumbnail
44:40
LIVE • over 3 years ago

petite-vue - Progressively enhancing every application?

Alexander Lichter

Common Mistakes in Vue.js and How to Avoid Them thumbnail
28:36
World Congress 2024 • about 2 years ago

Common Mistakes in Vue.js and How to Avoid Them

danielkellyio

WeAreDevelopers LIVE - Whats Nuxt and Next for app development, 20 years AJAX and more thumbnail
1:03:53
LIVE • over 1 year ago

WeAreDevelopers LIVE - Whats Nuxt and Next for app development, 20 years AJAX and more

Chris Heilmann, Daniel Cranney, Alexander Lichter

Build and Deploy a Fullstack App with Open Source Tooling thumbnail
25:53
World Congress 2023 • almost 3 years ago

Build and Deploy a Fullstack App with Open Source Tooling

Noam Honig

Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned thumbnail
28:13
World Congress 2022 • over 4 years ago

Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned

Nathalia Rus

Microfrontends: Lessons Learned from Growing a Design System and Shared Libraries Across 20+ teams thumbnail
31:55
World Congress 2026 Europe • 3 months ago

Microfrontends: Lessons Learned from Growing a Design System and Shared Libraries Across 20+ teams

Erasmo Hernandez

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.