Confidential

I am Manu

Framework Engineer at Builder.io

OSS Team

About me

• Building SDKs and API for the last 12 years
• Creator of Stencil (Apple Music, Amazon…)
• Core team at Ionic Framework
• Creator of Gin Web Framework (most popular web framework for Go)
• Cocos2D (first game engine for iOS)

​

Confidential

Big O() notation

Confidential

Big O() notation for frameworks

Confidential

Sites require

more and more Javascript

Confidential

https://www.builder.io/c/performance-insights

Confidential

The bottleneck is JS

Confidential

There are two types of companies

​

Those that prioritize performance at all cost and

​

those with bad performance

​

​

​

Confidential

But… is this really a problem?

Confidential

Existing correlation between:

​

• Sites becoming more interactive
• Amount of JS

Confidential

Don’t blame developers

for what frameworks do

Confidential

Current trend is linear because

current frameworks are O(n)

​

Amount of JS growing as sites require more functionality

Confidential

Qwik enables O(1) apps

​

Correlation broken between functionality and amount of JS is broken

Confidential

Confidential

Hydration = replay app

Rendering runs twice. All logic needs to be downloaded.

Confidential

Resumability = resume app

Leverage what already ran in the server.

​

No initialization code, rendering, diffing, setting up listeners needs to run in the client.

Server serializes app state then it resumes.

Confidential

React

Qwik

Confidential

Server-side

cake baking

analogy

​

“baking a cake in a datacenter”

1. Server bakes a cake
2. Server sends a picture of the cake + cooking instructions
3. Client gets the picture + instructions
4. Client goes buy all ingredients
5. Client bakes the cake again
6. User eats the cake

Confidential

Past

Current

Future

Rendering and interactivity separated

Render and interactivity united into a single framework.

Rendering done at the server by:

Interactivity:

Very performant

Slow development, error prone, duplicated logic…

Unified model, fast development, scales in complexity

Uses hydration, to enable interactivity. App runs twice.

Unified model, fast development, scales in complexity

Uses resumability, performance scales well. O(1)

App runs twice in server and client using the same tech:

App runs once, client only executes minimal bites of interactivity.

Render and interactivity united into a single framework.

DX ⬆️⬆️

PERF ⬆️⬆️

Confidential

O(1) frameworks are not new! but…

​

Wiz is an internal framework at Google:

​

• Powers Google Search, Gmail, Google Photos…
• Around for 8 years!
• Deeply coupled with a backend in Java, business logic needs to be implemented twice, JS and Java
• Lots of manual dom modifications
• Slow development

​

Amazon can not use existing frameworks for its main site

​

• Too slow, does not scale well
• Lots of custom code, allows them to deliver fast website that scale in functionality
• Lots of manual dom modifications
• Slow development

​

Confidential

Superpower #1

​

No JS by default

​

TT

Superpower #2

​

Bundling is decoupled from code

​

​

TT

Superpower #3

​

Zero-cost microfrontends

​

​

​

TT

Superpower #4

​

Use other frameworks

(without JS)

​

​

​

TT

Superpower #5

​

Ship fast, fast websites

​

​

​

Why are we building Qwik?

CAP theorem

​

frontend

​

Capabilities

API

f

• 100/100 lighthouse
• Instant time to interactive
• Fast in slow devices
• Fast in slow networks
• SEO

• Functionality
• Tons of interactivity
• User customizations
• A/B testing
• Metrics
• Animations

​

Performance

• DX
• Easy to build
• Microfrontends
• Low time to to market
• Low lock-in
• Leverage team expertise
• Fast iteration
• All-hands: Marketing / designers

Frontend new paradigm

Capabilities

API

f

• 100/100 lighthouse
• Instant time to interactive
• Fast in slow devices
• Fast in slow networks
• SEO

• Functionality
• Tons of interactivity
• User customizations
• A/B testing
• Metrics
• Animations

​

• DX
• Easy to build
• Microfrontends
• Low time to to market
• Low lock-in
• Leverage team expertise
• Fast iteration
• All-hands: Marketing / designers

Performance

• Drag and drop development
• A/B testing
• User personalization
• Using your stack (React / Vue…)
• Edge optimized

• First-party code
• Constant scalability
• HTML-first, zero JS
• Highly interactive
• MPA & SPA

• Third-party code
• Analytics and third party code
• Execute in web worker

Thank you

Follow me

@manucorporat

https://qwik.builder.io

npm init qwik@latest