Abdelrahman Awad
Lessons learned from building a thriving Vue.js SaaS application
#1about 3 minutes
Building a complex Vue.js SaaS application at scale
An overview of the Rasayel application, a feature-rich platform built for WhatsApp business communication by a small engineering team.
#2about 2 minutes
Why Vue.js and GraphQL were chosen for scalability
The decision to use Vue.js for its easy onboarding and GraphQL for end-to-end type safety was crucial for shipping features quickly.
#3about 5 minutes
Organizing a large codebase with a monorepo and flat components
A monorepo with isolated deployment targets and a flat component structure simplifies refactoring but can lead to component duplication at scale.
#4about 4 minutes
Using composables and barrel files to manage logic
Logic is isolated in Vue composables and organized with barrel files, which must avoid side effects to ensure proper tree shaking.
#5about 2 minutes
Building UI-agnostic composables for data management
Composables are designed to handle data fetching, transformations, and real-time updates without any knowledge of the UI rendering them.
#6about 8 minutes
Navigating state management patterns and their trade-offs
An analysis of different state management approaches, from simple refs to provide/inject, highlights challenges with ownership and developer experience.
#7about 3 minutes
Focusing on the right metrics for SPA performance
For a complex single-page application, focusing on Cumulative Layout Shift (CLS) and Interaction to Next Paint (INP) provides more value than raw Lighthouse scores.
#8about 2 minutes
Solving asset version skew in long-lived user sessions
To prevent 404 errors for users who keep the app open for days, asset files are versioned with consistent Git commit hashes.
#9about 1 minute
Managing API version skew between frontend and backend
By sending the frontend's version hash in API headers, the application can detect breaking changes and prompt users to reload.
Related jobs
Jobs that call for the skills explored in this talk.
Featured Partners
Related Videos
40:24Snappy UI needs no Single-Page Application
Clemens Helm
44:40petite-vue - Progressively enhancing every application?
Alexander Lichter
59:03Multiple Ships to the Island - Micro Frontends & Island Architectures
Florian Rappl
28:05Independently together: how micro-applications improve developer experience + app performance
Bilal Cinarli
28:36Common Mistakes in Vue.js and How to Avoid Them
Daniel Kelly
28:13Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned
Nathalia Rus
45:31How to Build Truly Production-ready Apps - Modern JS-based SaaS Stack for Indie Devs and Small Teams
Dávid Lévai
26:32Nuxt.js - Just Vue 3 and a bit of magic?
Alexander Lichter
From learning to earning
Jobs that call for the skills explored in this talk.
Full Stack Developer - VUE.JS
Exceltic
Municipality of Valladolid, Spain
Intermediate
CSS
GIT
HTML
Bash
Python
+6