WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
WeAreDevelopers LIVE • Apr 18, 2023

petite-vue - Progressively enhancing every application?

Alexander Lichter

Need modern interactivity in a legacy monolith but can't justify an expensive SPA rewrite? Learn how to sprinkle 6kb reactive islands into server-rendered HTML using petite-vue.

Pause
Mute Enter Fullscreen
#1 about 4 min

The reality of single-page applications versus legacy monoliths

Constraints like budget and lost domain knowledge challenge the migration of legacy server-rendered applications to modern frontends.

#2 about 6 min

Implementing progressive enhancement on existing backends

Examining lightweight alternatives allows developers to add interactivity to server-rendered markup without entirely replacing the existing infrastructure.

#3 about 2 min

Defining petite-vue and its architectural differences

The creation of an ultra-lightweight frontend layer relies on walking the existing DOM instead of employing a heavy virtual tree.

#4 about 3 min

Migrating components using the v-scope state directive

Declaring component state directly within HTML attributes allows rapid logic initialization without imposing complex external build steps.

#5 about 4 min

Manual logic initialization and managing global root scopes

Selectively mounting isolated capabilities to specific element identifiers keeps the vast majority of previously generated backend content untouched.

#6 about 2 min

Replicating computed properties via standard getter functions

Calculating dynamic derived data is achieved naturally within the reactivity system by invoking standard javascript getter methods.

#7 about 2 min

Hooking into element lifecycles without virtual DOM events

Developers can execute custom actions by listening for mounting and unmounting events directly on standardized markup elements.

#8 about 3 min

Triggering asynchronous side effects with the v-effect directive

Wrapping data fetching routines inside reactive boundaries forces the interface to automatically re-evaluate behavior whenever internal variable dependencies shift.

#9 about 4 min

Constructing reusable logic blocks and native HTML templates

Leveraging standalone factory functions alongside browser-native wrapper tags removes markup duplication across repetitive structural interface instances.

#10 about 5 min

Evaluating framework limitations and competing lightweight alternatives

Understanding architectural boundaries and assessing direct competitors clarifies when localized frameworks outperform monolithic single-page toolchains.

#11 about 6 min

Live coding a tiny interactive component inside HTML

Structuring an explicit toggle state overlay sequentially within markup establishes the precise interaction flow between rendering and user input.

#12 about 9 min

Question and answer session on syntax and compatibility

Exploring specific syntax compatibility and older browser limitations guarantees long-term stability when attempting deployments targeting legacy environments.

Matching moments

1:28 min

Introduction to the speaker and frontend projects

Abdelrahman Awad Abdelrahman Awad · WWC 2025

2:59 min

Comparing Vue to React and Angular

Rob Richardson · LIVE

2:51 min

Democratizing cross-platform development with alternative JavaScript frameworks

Xuan Huang Xuan Huang · WWC 2025

5:59 min

Integrating web components across popular javascript frameworks

Rowdy Rabouw Rowdy Rabouw · WWC 2022

3:27 min

Transitioning progressive framework features to the newer version

Daniel Roe · JS Congress

3:48 min

Adopting progressive enhancement workflows to prevent frontend bloat

Chris Heilmann +2 · LIVE

More from WeAreDevelopers LIVE

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz thumbnail
5:43
5 days ago

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Node and Package Security thumbnail
1:08:30
5 days ago

WeAreDevelopers LIVE - Node and Package Security

Chris Heilmann, Daniel Cranney, Zbyszek Tenerowicz

WeAreDevelopers LIVE - Streaming HTML thumbnail
1:10:26
12 days ago

WeAreDevelopers LIVE - Streaming HTML

Chris Heilmann, Daniel Cranney, Jad Joubran

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe thumbnail
1:02:34
19 days ago

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe

Chris Heilmann, Daniel Cranney, Justin Halsall, Werner Jeschko, Nicole Jeschko, Mirco Tomić

WeAreDevelopers LIVE - Web Performance in an AI World thumbnail
1:07:59
26 days ago

WeAreDevelopers LIVE - Web Performance in an AI World

Chris Heilmann, Daniel Cranney

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko thumbnail
5:55
about 2 months ago

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

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

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

When Humans Stop Writing Code: Rethinking Languages, Compilers, and Responsibility

Simon Auer

Organizer of flutter vienna meetup and CEO of marqably

Simon Auer
Open session

World Congress 2026 North America

Small LLM in your Browser: Huge Opportunities for Web Applications

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky
Open session

World Congress 2026 North America

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo

Related videos

The Lean Web thumbnail
46:46
JS Congress • over 4 years ago

The Lean Web

Chris Ferdinandi

Lessons learned from building a thriving Vue.js SaaS application thumbnail
30:02
WWC 2025 • 12 months ago

Lessons learned from building a thriving Vue.js SaaS application

Abdelrahman Awad

Building a framework-independent component library thumbnail
19:46
WWC 2025 • 12 months ago

Building a framework-independent component library

Tobias Scholz

Modern Web Development with Nuxt3 thumbnail
41:43
JS Congress • over 4 years ago

Modern Web Development with Nuxt3

Alexander Lichter

On tour with heroes == Moving from Angular to WebComponents thumbnail
43:08
LIVE • almost 6 years ago

On tour with heroes == Moving from Angular to WebComponents

Benjamin Glusa

Why I Recommend Svelte to Every New Web Developer thumbnail
31:21
LIVE • over 5 years ago

Why I Recommend Svelte to Every New Web Developer

Markus Hatvan

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.