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 · WWC 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 · WWC 2021

4:31 min

Optimizing system scalability and real-time push capabilities

David Leitner · WWC 2022

10:09 min

Transitioning from graphic design to large scale frontend architecture

Erasmo Hernandez Erasmo Hernandez · WWC Europe 2026

2:11 min

Scaling development teams with micro frontend architecture

Florian Rappl · WWC 2022

More from World Congress 2025

GenAI Security: Navigating the Unseen Iceberg thumbnail
24:33
10 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
12 months 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
12 months 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
12 months 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
12 months 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
12 months ago

AI Sovereignty: What Does It Take?

Boris Hecker, Clemens Wasner, Robin Hermann, Sonja Alvarez

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

Full Stack with Flutter - are we there yet?

Nemanja Stošić

Senior Flutter Developer

Nemanja Stošić
Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

One Repo, One Strategy: Scalable Full-Stack Testing in a Monorepo World

Bartosz Leczycki, Paweł Matynia

Bartosz Leczycki
Paweł Matynia
Open session

World Congress 2026 North America

Offloading IoT State: Solving the Memory Crisis on Legacy Hardware

Pravin Nagare

Senior Software Engineer, Roku

Pravin Nagare

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
WWC 2024 • almost 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
WWC 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
WWC 2022 • about 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
WWC Europe 2026 • about 1 month 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.