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 · World Congress 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 · World Congress 2025

5:59 min

Integrating web components across popular javascript frameworks

Rowdy Rabouw Rowdy Rabouw · World Congress 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 Chris Heilmann +2 · LIVE

More from WeAreDevelopers LIVE

WeAreDevelopers LIVE - Read more, Prompt Less thumbnail
1:01:30
4 days ago

WeAreDevelopers LIVE - Read more, Prompt Less

Chris Heilmann, Daniel Cranney, Luise Freese

WeAreDevelopers LIVE - Tech Education in Two Languages thumbnail
1:00:18
11 days ago

WeAreDevelopers LIVE - Tech Education in Two Languages

Daniel Cranney, Roxy Rodriguez-Becker

WeAreDevelopers LIVE - Playing in Production thumbnail
1:06:40
17 days ago

WeAreDevelopers LIVE - Playing in Production

Andrew MacLean, Daniel Cranney, Christian Heilmann

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
about 1 month ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
about 1 month ago

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along

Chris Heilmann, Daniel Cranney, Krzysztof Cieślak

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak thumbnail
4:23
about 1 month ago

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

Designing for Every Direction: Logical CSS for Global, Adaptive, and Effortlessly Reversible UIs

  • Vidhya Krishnamoorthy

    Morgan Stanley

    VP, Software Engineering Manager

Open session

React Under Fire: Rendering Performance for Streaming Agent UIs

  • Abhirupa Mitra

    Slack

    Senior Member of Technical Staff

Open session

From Profiler to Production: Measuring What Actually Matters in React & React Native

  • Andrei Tazetdinov

    Dynatrace

    React Native Developer

Open session

Build a Zero-Cost AI Agent in Your Browser

  • Aishwarya Mathuria

    Adobe

    Computer Scientist

  • Nishant Thakur

    Adobe

    Senior Computer Scientist

Open session

How We Cut Our API's p99 Latency from Minutes to Under a Second

  • Deepak Agrawal

    Atlassian

    Principal Software Engineer

Open session

Beyond File Dumps: Context Engineering for Coding Agents

  • Animesh Dutta

    Arm

    Senior Software Engineer

Related videos

The Lean Web thumbnail
46:46
JS Congress • almost 5 years ago

The Lean Web

Chris Ferdinandi

Lessons learned from building a thriving Vue.js SaaS application thumbnail
30:02
World Congress 2025 • about 1 year ago

Lessons learned from building a thriving Vue.js SaaS application

Abdelrahman Awad

Nuxt.js - Just Vue 3 and a bit of magic? thumbnail
26:32
World Congress 2023 • almost 3 years ago

Nuxt.js - Just Vue 3 and a bit of magic?

Alexander Lichter

Building a framework-independent component library thumbnail
19:46
World Congress 2025 • about 1 year ago

Building a framework-independent component library

Tobias Scholz

Modern Web Development with Nuxt3 thumbnail
41:43
JS Congress • almost 5 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

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.