SVELTE

AND THE GREAT SPACE ELEVATOR

SHAWN @SWYX WANG

Co-organizer, Svelte Society

MAGNOLIAJS CONF 2020

HOW DO WE GET INTO

SPACE?

MISSION

PART I

SATURN V 1967 - 1973

🛢️5,040,000lbs

🛢️1,093,900lbs

🛢️271,000lbs

🧳90,000lbs

💸$1 billion �($190m in 1970)

SPACE SHUTTLE 1981 - 2011

💸$1.6 billion

Moon

384,400km

​

Low Earth Orbit

2,000km

​

REDUCED AMBITION

SATURN V

384,400km�🧳 90,000 lbs

💸 1b 🛢️6.4m lbs

​

​

​

SPACE SHUTTLE

2,000km�🧳 240,000 lbs�💸 1.6b 🛢️4.2m lbs

​

FALCON HEAVY 2018

💸$90 million

TYRANNY OF THE ROCKET EQUATION

🛢️Fuel ⬇️

ΔV - change�in velocity ⬆️

🧳Payload ⬆️

TYRANNY OF THE ROCKET EQUATION

+

+

+

+...

TYRANNY OF THE ROCKET EQUATION

Delta-V�(the good stuff)

Mass Ratio�(initial mass �/ final mass )

Exhaust �Velocity

TSIOLKOVSKY ROCKET EQUATION

PROS & CONS

Pros

Of Rockets

Cons

Of Rockets

​

• 💰
• 🛢️
• Not Scalable
• They go Boom 💥

• They’re Real
• They go Boom 💥

HOW DO WE MAKE

THE WEB?

MISSION

PART II

THE WEB WASN’T DESIGNED FOR THIS

THE WEB WASN’T DESIGNED FOR THIS

REAL WORLD PERFORMANCE BUDGETS

https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/

STATE OF THE WEB

JS FRAMEWORKS - HELLO WORLD

Framework P

Framework Q

Framework R

Framework V

Framework S

Framework T

Framework U

JS FRAMEWORKS - REAL WORLD

A

Avg

Framework

Footprint

100-200kb

It’s Not Just

JS WEIGHT

BOILERPLATE OVERHEAD

Framework S

Framework R

Framework P

DECISION FATIGUE

• STATIC/SERVER SIDE RENDERING
• A11Y LINTING
• CLIENT SIDE ROUTING
• HEAD MANAGEMENT
• FORM MANAGEMENT
• STATE MANAGEMENT
• DATA FETCHING & CACHING
• ANIMATIONS
• TRANSITIONS
• STYLING
• MOCKING & TESTING

(and Maintenance)

WEB APPS ~2005-2015

🛢️JQuery

🛢️JQuery UI

🛢️JQuery Plugins

Your Code

WEB APPS ~2015-2020

Your Code

🛢️React DOM

🛢️Redux

🛢️React Router

TYRANNY OF RUNTIME FRAMEWORKS

🛢️JS ⬇️

Your Code ⬇️

Features ⬆️

A WAY

OUT

MISSION

PART III

WHAT IF WE LAID DOWN A ROPE

IT’S NOT JUST TOURISM

ROCKETS

ELEVATOR

💸

UPFRONT�INVESTMENT

PER TRIP

💸

💸

💸

💸

💸

💸

💸

💸

💸

PROBLEM 1: SPACE DEBRIS

PROBLEM 2: TETHER MATERIAL

MVP? LUNAR ELEVATOR

COMPILERS�AS THE FUTURE

MISSION

PART IV

“My current “investment thesis” is that what we call web frameworks are transforming from runtime libraries into optimizing compilers.��When it comes to eking performance out of hand-authored JavaScript and accompanying runtime libraries, we’ve reached the point of diminishing returns.”

• Vue 3 Tree Shakeable APIs
• Ember Glimmer
• React Selective Hydration? Gatsby/Next.js?
• Angular Ivy
• Svelte

“COMPILER” FRAMEWORKS

ANGULAR IVY

WRITE LESS CODE

PERSONAL ANECDATA

(not real benchmarks)

NO VIRTUAL DOM

​

​

SEE FOR YOURSELF

svelte.dev/repl

https://github.com/sveltejs/svelte/blob/master/src/runtime/internal/dom.ts

TRULY REACTIVE

BATTERIES INCLUDED… ONLY IF YOU NEED IT

🤮

😍

AND MORE...

• GREAT DOCS!
• SIMPLE INTERNALS!
• NO BAGGAGE!
• FRIENDLY COMMUNITY!
• ALIGNED WITH THE ES MODULES FUTURE!

LIGHTER TOOLING

​

​

SVELVET DEMO

https://github.com/jakedeichert/svelvet/

Framework

Libraries

More Libraries

🧳Your App

🧳Your App

Compiler with Batteries Included

RUNTIME

FRAMEWORKS

COMPILER�FRAMEWORKS

🧑🏽‍💻 🧑🏿‍💻 👩‍💻 👩🏻‍💻

CORE TEAM

PER APP

🧑‍💻🧑🏻‍💻🧑🏼‍💻🧑🏽‍💻 🧑🏾‍💻🧑🏿‍💻👩‍💻👩🏻‍💻👩🏼‍💻👩🏽‍💻👩🏾‍💻👩🏿‍💻

🧑🏾‍💻 🧑🏿‍💻 👩‍💻 👩🏻‍💻 👩🏼‍💻 👩🏽‍💻 👩🏾‍💻 👩🏿‍💻 🧑🏻‍💻

👩🏽‍💻🧑🏻‍💻

👩🏽‍💻🧑🏻‍💻

👩🏽‍💻🧑🏻‍💻

👩🏽‍💻🧑🏻‍💻

GET INVOLVED

​

30 Mins Tutorial: svelte.dev/tutorial

Discord Community: svelte.dev/chat�Talk: svelte.dev/blog/svelte-3-rethinking-reactivity

Svelte Society Day - Apr 26: sveltesociety.dev

​

Questions?

swyx.io/speaking