Slide 1
Slide 1 text
Web Runtime
Final Lightning Talk Closing Keynote @ JSConf.JP 2022
dynamis (ASAI Tomoya)
Slide 2
Slide 2 text
about:me
dynamis (personal, as community)
Twitter: @dynamitter
facebook.com/dynamis
speakerdeck.com/dynamis
ASAI Tomoya (o
ff
i
cial, at work)
WebDINO Japan (ex-Mozilla Japan) CTO
Lecturer at Keio/Chuo University (10+ years)
note: my avatar image is a plushie of petit panda (= lesser panda = firefox)
2
Slide 3
Slide 3 text
Past Work
OSS contributor (2000~), L10n Center Manager (2005~)
Translate MDN documents and localize JS Debugger etc.
Host forums for translation project & user support community
Locale owner of Japanese Firefox/Thunderbird 1.0~
Evangelist (2008~)
in charge of tech press releases of Mozilla Japan
200+ (300+?) Presentation as Mozilla evangelist
15+ years University student education
Mobile & Ecosystem, Tech Strategy Management (2014~)
release Firefox OS smartphone "Fx0" with KDDI
tech support for Firefox OS 4K start TV, STB with Panasonic
3
Slide 4
Slide 4 text
Current Work
Building the foundation for the next Web
Prototyping Web tech Spec to make web contents trustworthy
(transparent and veri
fi
able)
Discussing the next Web architecture called "Trusted Web" with CAS
QoE research of network in real OTT video services with browser
extension
Porting Gecko to Renesas RZ/G2 MPU for embedding systems with
enhanced HMI
Training and Education toward the next Web
Employee training for Web/JAMStack Engineers (Solution Developers)
Web+IoT education for young people with MIC or in Universities
Developing Open Digital Education Platform with Digital Badges
and Micro Contents
personally support W3C WoT-JP CG, svelte.jp etc
4
Slide 5
Slide 5 text
about: WebDINO Japan
Mission: Break the border of the Web
Non pro
fi
t org for Web, Browser, Openness
Research & Consulting
Research using Browsers (network, user behavior ...)
Building custom Browsers (Chromium, Firefox)
Porting Browsers (for Embedded Devices etc)
Human resource development & Event produce
Web & Open education for students and youth
Educating Engineers of Web, IoT and relating techs
"Mozilla Japan" has been changed to "WebDINO Japan" in 2017 https://www.webdino.org/
5
Slide 6
Slide 6 text
Today's topic: Web Runtime
What is the Web?
What is the Web Technology?
What is the Web Runtime?
Where Web Runtime is going?
Let's look back at the history and discuss
about future of the Web.
6
Slide 7
Slide 7 text
Web Runtimes
Slide 8
Slide 8 text
How many Web Runtimes
do you know?
Slide 9
Slide 9 text
How many (still alive) Web Runtimes do you know?
3 runtimes ? (browser+js engine)
Chromium/V8, WebKit/JSC, Gecko/SpiderMonkey
6 runtimes ? (+ js/ts engines)
Node, Deno, Bun
11 runtimes ? (+ wasm/wasi)
Wasmtime, Wasmer, WasmEdge, WAMR, Wasmi
note: Lucet by Fastly (announced in 2019) EOLed in 2020
more runtimes... ? (+ for Embedding or Cloud)
Rhino, Cobalt, v4, SpiderMonkey.wasm and more...
9
Slide 10
Slide 10 text
How many Web Runtime do you know?
10
Slide 11
Slide 11 text
Decreasing Web Browser Engine
Only 3 independent browser engines left
1. Chromium for Chrome and many others such
as Arc, Brave, Edge, Opera
2. WebKit for Safari
3. Gecko for Firefox
All other browser engines stopped dev
Presto (2013) & EdgeHTML (2020) engine has gone
Servo transferred to Linux Foundation (2020)
11
Slide 12
Slide 12 text
Browser Competition moved to UI/Features
Brave by Brendan Eich
Block or Replace Ads, Protect Privacy...
Arc Internet by The Browser Company
better way to use the internet in 2022
Darin Fisher joined last month (2022/10)
DuckDuckGo, Neeva etc
Search Engine providers create browsers
most of them focus on privacy or ad-free
12
Slide 13
Slide 13 text
Web based OS for hundreds millions of people
KaiOS ( OS) for smart feature phone
successor (great-grandchild?) of Firefox OS
focused on smart feature phone priced ~$20
165M KaiOS devices sold globally (as of 2022/3)
1.5 billion of people use $8-30 phone
3.7 billion of people are not connected yet
webOS used for TVs by LG and partners
120M devices across 150 nations (as of 2022/10)
Tizen by Samsung (still alive for TVs) often compared with webOS but it's not web-based platform.
13
Slide 14
Slide 14 text
KaiOS 3.0 supports PWA with Gecko 84
Support PWA along with Signed app
Firefox OS didn't support PWA install with App Manifest
KaiOS 3.0 extend App Manifest Spec and support PWA
Only Signed (pacakged) app use KaiOS APIs
partnership with Mozilla to upgrade Gecko engine
Google have fund KaiOS from 2018 but they've rejected
to transfer from Gecko to Chromium and announced
partnership with Mozilla in 2020, then they've released
KaiOS 3.0 with Gecko 84 in 2021 and new SoCs support
Firefox OS 1.0~2.x and KaiOS 1.0~2.x use Gecko 48
14
Slide 15
Slide 15 text
Major JS/TS Runtime
SpiderMonkey, JavaScriptCore, V8
As you know!
Node.js
As you know!
Deno, Bun
As you know!
https://hashrock.hatenablog.com/entry/2019/02/04/040505
15
Slide 16
Slide 16 text
Node.js (as you know!)
Ryan Dahl implement with V8 in 2009
Event loop and (forced) non-blocking I/O
Solved Apache's C10K problem (perf limit
caused by N request=N process implementation)
Some modules can be shared with Browsers
(Unfortunately some are not)
Can use multi-threading/processing easily.
Note for later
single server can support 10K+ client
https://docs.microsoft.com/ja-jp/learn/modules/intro-to-nodejs/3-how-works
16
Slide 17
Slide 17 text
Minor JS/TS Runtime
Rhino
Java implementation of JS/ECMAScript
Google Apps Script use Rhino until 2020 (now v8)
still active (partial support for ES6, 2016+)
Nashorn by Oracle also written in Java
QuickJS
small (210KiB) embeddable JS engine with C
Runtime can instantiated in less than 300μs
there are many other (imcomplete/minor) ES/JS runtimes in the wild
17
Slide 18
Slide 18 text
Web Runtimes for Embedding (speci
fi
c use-case)
Cobalt
runtime for YouTube TV on embedded devices
original renderer supporting subset of HTML,CSS
forked from H5VCC, port of Chromium
Qt QML and Qt WebEngine
Qt 4 use JSC, Qt5 use V8, Qt 5.2 use v4, fork of v8
for HTML-like declarative UI language "QML"
WebEngine is Chromium fork, Qt ver. of WebView
18
Slide 19
Slide 19 text
Web Runtime for Wasm/WASI (generic)
Wasmer (v0.1 in 2018.11, v1.0 in 2021.01)
Wasm runtime written in Rust
started as fastest wasm runtime for Go
Lucet by Fastly (2019.03~)
AOT compile with Mozilla Cranelift code generator
manage AOTed native code and resources
instantiate WebAssembly module under 50μs
EOLed (transit to wasmtime)
Wasmtime (v0.3 in 2019.08, v1.0.0 in 2022.09!)
O
ffi
cial reference implementation by ByteCode Alliance (2019.11)
used more than 16 months in production (as of 1.0 release)
19
Slide 20
Slide 20 text
Web Runtime for Wasm/WASI (embedding)
WAMR (WebAssembly Micro Runtime)
runtime for IoT, edge, TEE (Trusted Exec Env)
Bytecode Alliance project
small binary (~85K for interpreter, ~50K for AOT)
Wasmi
Wasm Interpreter for embedded environment
used for Web3 (OpenEthereum, Polkadot...)
20
Slide 21
Slide 21 text
Web Runtime for Cloud Edge
WasmEdge by Second State
cloud native wasm runtime, which can be used as
Docker container with Open Container Interface
JS runtime of WasmEdge use QuikJS
SpiderMonkey.wasm on Wasmtime
JS runtime of Fastly Compute@Edge use this!
run JS on JavaScript Engine on Wasm Runtime
21
Slide 22
Slide 22 text
App framework with Web Engines
XUL Runner (2006.02~ EOLed in 2015.10)
packaged version of Mozilla platform
Firefox etc ran on XULRunner
Chromium Embedded Framework (CEF)
Framework for embedding Chromium-based browsers in
other application
Electron = CEF + Node.js
2014:05 Github release Atom, Atom Shell as OSS
2015.04 Atom Shell renamed to Electron
2016.06 Electron 1.0 released
22
Slide 23
Slide 23 text
"Web"
Slide 24
Slide 24 text
Quiz Time by "Foxkeh"
What was the name of the 1st browser?
The name of the 1st Mac browser?
What are Viola and Cello?
What's the relationship between
IE (Edge) and Firefox?
"Foxkeh" is a supporting character for Firefox https://foxkeh.jp/
24
Slide 25
Slide 25 text
https://www.mozilla.jp/blog/entry/10552/
Slide 26
Slide 26 text
Birth of World Wide Web
1989: Birth of the Web (on 3/12)
Tim Berners Lee's
fi
rst proposal of the Web
World Wide Web (originally called as "mesh")
= globally distributed hypertext with linked
information system and generic hypertext browser
basic concept of HTML, HTTP and URL
"web" of notes with "live links" is better than a
fi
xed
hierarchical (tree) system or keywords
"universal link" for reference with standard format
https://webfoundation.org/about/vision/history-of-the-web/
26
Slide 27
Slide 27 text
3 key concepts of World Wide Web
Server and Browser software to implement these:
URL: Universal Resource Locator
An ID uniquely identi
fi
es a resource in the world
HTML: Hyper-Text Mark-up Language
text language which can describe relation of resources
using tags so that URLs can link between resources
HTTP: Hyper-Text Transport Protocol
protocol for transferring HTML from a speci
fi
ed URL
27
Slide 28
Slide 28 text
1st World Wide Web browser/editor/server
1990:
fi
rst implementation of the Web
fi
rst browser named "WorldWideWeb"
WWW without spaces is the name of 1st browser
WorldWideWeb include HTML editor
(following NetScape/Mozilla Suite also have editor)
1993: NCSA Mosaic
support embedded Images, support various OSs
1st browser to make the Web widely used
WorldWideWebsimulator!https://worldwideweb.cern.ch/browser/https://worldwideweb.cern.ch/
28
Slide 29
Slide 29 text
movie of the usage of world 1st browser "WorldWideWeb"
Slide 30
Slide 30 text
movie of using editing feature of HTML with "WorldWideWeb"
Slide 31
Slide 31 text
Web ^2.0
Slide 32
Slide 32 text
New concept: Web as an Application/Service Platform
Netscape introduced 2 new concepts
JavaScript enable dynamic applications
birth of DynamicHTML
Ajax = DHTML + XHR (introduced by MS IE)
HTTPS enable commercial use
Netscape chose EC as their business model
Selling HTTPS servers with encryption for EC
32
Slide 33
Slide 33 text
From JavaScript to Ajax
1995: Java, JavaScript are introduced
Java Applet turned the Web/Browser into OS-independent
application platform
JavaScript included in Netscape Navigator 2.0
1996: FutureSplash Player (Flash)
Macromedia acquires FutureWare Software and rename it
Flash (later acquired by Adobe and renamed Adobe Flash)
2004: Ajax and Web 2.0 era
Gmail (2004), Google Maps (2005) released, bringing Ajax into
the spotlight (beginning of the era of practical Web apps)
note: "JavaScript" is registered Trademark of Oracle Corporation
33
Slide 34
Slide 34 text
The eve of JavaScript
Brendan Eich join Netscape (1995.04)
He took the bait of "Scheme in the Browser"
He've made new programing language...
Brendan Eich = Father of JavaScript
SpiderMonkey (JS) Module Owner until 2011
later Mozilla CTO, now CEO (founder) of Brave
https://brendaneich.com/2008/04/popularity/
34
This is not a photo of those days
Slide 35
Slide 35 text
Birth of JavaScript
Brendan Eich implements Mocha (1995.05)
quick implementation in about 10 days!
re-implemented in the fall of 1996 (SpiderMonkey)
Renamed as JavaScript (1995.12)
by joint announcement by Netscape and Sun
called LiveScript as of Netscape Navigator 2.0 beta
for marketing reasons (to ride the wave of Java,
which was taking the world by storm at the time)
JavaScript TM owned by Sun (now Oracle), Netscape (now Mozilla) uses it under contract with Sun
35
from Brendan's Web World
Slide 36
Slide 36 text
Birth of JavaScript, ECMAScript
36
Java Scheme Self
JavaScript
Syntax
Y2K bug
primitive/object
1st class functions Prototype
ECMAScript
Standardize core
language features
JScript
Copy
(with some imcompatibility)
Slide 37
Slide 37 text
toward ECMAScript 201x
Template Literals introduced from Python and other languages
37
ECMAScript
ECMA 2016
Async Function
Generator
Perl
ECMA 5th
ECMA 2015
Extend (AltJS)
Co
ff
eeScript
Allow Functions, Class
ECMA 201x
String.match,replace,split,substr
Array.join,reverse,sort,push,...
Array.concat,slice
String.concat,slice,match
Python
Haskell
Ruby
C#
Template Literals
Slide 38
Slide 38 text
Birth of HTTPS (from SSL to TLS)
1995.03 Netscape 1.1 introduce SSL 2.0
SSL 1.0 not implemented (security bug found)
Netscape introduced SSL to make trustworthy communication (not just
encryption) over the Web
1995.10 MS released PCT v1.0 (compatible with SSL2)
fi
xed security issue of SSL2 but never gained traction outside MS
1995.11 Netscape 2.0 with SSL 3.0
then start standardization under IETF WG
1996 IETF WG formed to standardize SSL
1999.01 TLS 1.0 as RTC 2246
1st RFC version of HTTPS speci
fi
cation
38
Slide 39
Slide 39 text
HTTPS start with Credibility or "Trust"
HTTPS start with strict OV (organization veri
fi
cation)
CA verify organization with Government DB
VeriSign CSP, Class1,2,3,4 was de facto standard
1990s - CA and Browsers start SSL/TLS
CA service started by VeriSign (1995), CyberTrust etc.
Browsers just accept root certs when requested
2000 WebTrust program for CA started by
2004 IE removed all non-WebTrust CAs
39
Slide 40
Slide 40 text
DV certs break Credibility of HTTPS
2002 GeoTrust start DV (domain veri
fi
cation)
DV certs don't verify existence of the organization
certs don't include information of organization
This break the "Trust" provided by SSL/TSL
2005 CA/Browser Forum started
start discussion for EV to restore the credibility balance
2007.06 start EV (Extended Veri
fi
cation)
IE7 on Vista (update) and Firefox 3 (2008.06) support EV SSL
but many incidents continue with CA/certs ...
2019 no more EV certs indicators
Chrome/Firefox no longer prominently indicate for EV
40
Slide 41
Slide 41 text
We need re-introduce the "Trust" for the Web
Signed HTTP Exchanges
SXG decouple the origin and distributor but it's
veri
fi
cation is domain based, not org based
JSON Web Token (JWT, RFC 7519)
JWT is URL-safe means of representing claims to be
transferred between two parties
sign (JWS) and encrypt (JWE) JSON
not for general web content with origin org info
No spec exists for "Trust" of web contents/org?
41
Slide 42
Slide 42 text
FYI: recent works to re-
introduce "Trust"
Slide 43
Slide 43 text
Originator Pro
fi
le (Temporary name, Coming Proposal from us)
How to make Contents Trustworthy?
OGP, JSON-LD add meta data of contents but
their credibility cannot veri
fi
able
"Trust" depends on veri
fi
ability like Veri
fi
able
Credentials. We are designing and prototyping
proposal as browser extension with similar
format as VC (data model is di
ff
erent of course)
note: this is still under discussion so far
hopefully we'll announce within this year...
https://originator-profile.pages.dev/en-US/structure/
43
Slide 44
Slide 44 text
Trusted Web(proposed by Trusted Web Promotion Council, CAS)
New Architecture to solve these pain points
Data can be trusted?
Party can be trusted?
Handling of the data can be trusted?
Expand Veri
fi
able area
Upgrade the web with more veri
fi
able area
Don't trust to much without checking facts
https://www.kantei.go.jp/jp/singi/digitalmarket/index_e.html
44
Slide 45
Slide 45 text
Web 2.0 - The Web as Platform
2001 Concept began by Tim O'Reilly
after the bursting of the dot-com bubble
You control your own data
Services, not packaged software with scalability
Harnessing Collective Intelligence
Data is the Next Intel Inside
End of the Software Release Cycle
Lightweight Programming Models
Software Above the Level of a Single Device
Rich User Experience
https://www.oreilly.com/pub/a/web2/archive/what-is-web-20.html
45
Slide 46
Slide 46 text
HTML5
2004 WHATWG
Mozilla & Opera proposed backward-compatible HTML
extension, but rejected on W3C
They established another organization for HTML.next
HTML5 gradually became a buzzword
2006.10 Tim wrote "Reinventing HTML"
2007 W3C start new HTML WG
2014 W3C HTML5 Recommendation
releases HTTP/2, ES2015 at the same timeframe
46
Slide 47
Slide 47 text
Web Apps on 1st iPhone
Steve Jobs Keynote MacWorld 2007 SF https://www.youtube.com/watch?v=P-a_R6ewrmM
47
“The full Safari engine is inside of
iPhone. And so, you can write
amazing Web 2.0 and Ajax apps
that look exactly and behave
exactly like apps on the iPhone.”
Slide 48
Slide 48 text
WHATWG HTML - Introduction
https://html.spec.whatwg.org/multipage/introduction.html#is-this-html5?
48
“the term "HTML5" is widely used
as a buzzword to refer to modern
Web technologies”
Slide 49
Slide 49 text
"Reinventing HTML" by Tim Berners-Lee
2006.10 "Reinventing HTML" by Tim Berners-Lee http://dig.csail.mit.edu/breadcrumbs/node/166
49
"It is necessary to evolve HTML
incrementally. The attempt to
get the world to switch to XML,
... all at once didn't work."
Slide 50
Slide 50 text
Extensible Web Manifest (2013.06)
Collaborate with Web developers to create
next generation APIs and platform.
Browser venders focus on low-level capabilities
High-level APIs start with JS implementations
Browser + Framework = Web Platform
Famous framework will e
ff
ect the Spec & Runtime
Framework may be considered part of the Web
Platform, Speci
fi
cation or Runtime
https://extensiblewebmanifesto.org/
50
Slide 51
Slide 51 text
End of HTML5 (as buzzword) and PWA
2015.01 Chrome support Service Worker
2015.06 Alex Russell proposed "PWA"
PWA: Progressive Web Apps became next buzz
2016.11 W3C HTML5.1 Recommendation
2018.03 W3C HTML5 deprecated
There is no successor term to HTML5
51
Slide 52
Slide 52 text
NEWT: New Exciting Web Technologies
Bruce Lawson suggest new word "Newt"
must be inspired by "Gecko"
let's stop using HTML as buzzword!
but it was not widely used
No successor term to HTML5
SPA, PWA, JAMStack etc will be famous but they
mean application architecture or speci
fi
c subset
of technology, not whole new technologies
https://brucelawson.co.uk/2010/meet-newt-new-exciting-web-technologies/
52
Slide 53
Slide 53 text
Evolutions of Web App and Architecture
53
1990 2000 2004 2007 2010 2012 2015 2020
2018
JS, XHR make Web dynamic
DynamicHTML, Web2.0
Faster JS with JIT
Much more APIs
Rich Application
can be created on
Browser Runtime
JS Frameworks lead the
evolution of the Web
Use same framework on
both Server/Browser to
faster startup/rendering
Slide 54
Slide 54 text
Web3 ... Ignore it!
Tim doesn't view blockchain as a viable solution for building the next iteration of the
internet. ... They're too slow too expensive and too public. Personal data stores have to be
fast, cheap and private.
note: he is now focusing his own proposal "Solid" to solve this problem
https://www.cnbc.com/2022/11/04/web-inventor-tim-berners-lee-wants-us-to-ignore-web3.html
54
Slide 55
Slide 55 text
Framework and App
Architecture Evolution
Slide 56
Slide 56 text
Ajax and jQuery to Single Page Applications (SPA)
Client side Apps to avoid page transition
Page transition require network (cannot be faster than
light speed!), re-render whole pages
For better UX, need to avoid page transition
Di
ffi
cult to achieve this using jQuery, Ajax etc only
AngularJS (2009), React (2013) and others...
Provide full set of framework to make SPA
fewer DOM update/re
fl
ow with Virtual/Incremental DOM
Easy to use GPU-Accelerated Animations...
56
Slide 57
Slide 57 text
PRPL Pattern (Google I/O 2016)
Design to improve startup performance
Preload (Push): preload key
fi
les
Render: server side render of initial page state
Pre-cache: pre-cache for the rest of the
fi
les
Lazy-load: load
fi
les later as far as possible
minimize
fi
le loading and JS processing on
startup, and make faster to page/state transitions
by preloading
foolhardy to create this mechanism by yourself
note: originally 1st P = HTTP/2 Server Push but it's deprecated and replaced with Preload
57
Slide 58
Slide 58 text
SPA evolution and variations (as of 2019)
https://developers.google.com/web/updates/2019/02/rendering-on-the-web
58
Slide 59
Slide 59 text
SPA getting bigger and bigger and bloated
Reduce JS Bundle size for faster initial load
Transfer, Parse, Exec toooo large JS is Slow
for mobile, js should be less than few MB
Introduce many tools and techniques...
Minimize, Code Splitting, Lazy Load ...
Render on Server Side to minimize JS on Client
(Re)Hydration to get the bene
fi
ts of both CRS/SSR
The magical disappearing UI framework
No more Virtual DOM, min overhead and framework
59
Slide 60
Slide 60 text
(Re)Hydration (devide rendering workload)
Restore state with SSR+CSR
Not rendering all on the server nor
rendering all on the client, but
rendering HTML on the server and
pass the DOM + app state DATA to the
browser. Browser will restore same
state from the DATA.
Accomplish Fast FCP +
fl
exible UI
Server-side JS runtime required!
This architecture is possible only
when server/client use same
framework.
https://developers.google.com/web/updates/2019/02/rendering-on-the-web
60
Slide 61
Slide 61 text
Server-Side JS required
to achieve better UX!
Slide 62
Slide 62 text
Evolution of JS Runtime
= Evolution of the Web
Slide 63
Slide 63 text
Evolution Drivers
Slide 64
Slide 64 text
Where Web Technology
and Runtime is going?
Slide 65
Slide 65 text
Web evolution directed by Google Search
2011.02 Panda Update
Start series of large updates...
2015.04 Mobile Friendly Update
let's support Responsive Web Design
2016.02 o
ff
i
cial support for AMP
Page must be shown within 3s even on Mobile network/device
2018.07 Speed Update
mobile pages should be fast
Lighthouse score etc became important
2020.05 Core Web Vitals
Loading, Interactivity, Visual Stability are the new Indicators
65
Slide 66
Slide 66 text
Accelerated Mobile Pages
Collection of tips and rules to make fast page!
Asynchronous JS only, Size all resource statically,
All CSS must be inline, min style recalculations, only GPU-
accelerated animations, ...
But it introduce too many limitations... :-(
Must be hosted by Google!!! (eval?, resolved...)
Non AMP, non Google hosted site sometimes faster
Need to maintain Google search exclusive contents
Restricted Design and UX
Really appropriate direction to make mobile fast???
66
Slide 67
Slide 67 text
Core Web Vitals and Lighthouse,
Lighthouse integrated into Chrome 60
Announced on Google I/O (2017.05)
3 critical metrics to web experience
LCP: Loading Experience
FID: Interactivity
CLS: Visual Stability
CWV is generic metrics! (not like AMP)
67
Slide 68
Slide 68 text
Google Always say
Faster! Faster! Faster!
Slide 69
Slide 69 text
Web evolution directed by Ryan Dahl ;)
Original Node.js presentation (2009)
then created Node
10 Things I Regret About Node.js (2018)
then created Deno
Big Changes Ahead for Deno (2022)
Change of policy!
node modules is heaviest objects!
https://deno.land/artwork
69
Slide 70
Slide 70 text
Ryan Dahl is the most heaviest
individual in Web Platform &
Runtime Universe!?
individual
Slide 71
Slide 71 text
Web evolution directed by CDNs
"Lighter" JS runtime needed on Cloud
Node.js can handle 10K+ clients with single process
but cloud Functions/Workers need to be isolated/
sandboxed for each users/exec.
Running in separate process with Node is too heavy.
"Faster" JS runtime needed on Server side
To solve SPA's issues, SSR, Hydration etc needed.
Even lighter framework like svelte also use SSR
Only with SSG case, we just need static
fi
le hosting
71
Slide 72
Slide 72 text
Bun by Oven for Edge
Jarred Sumner show bench (2021.05)
Announcement of Bun (2022.08)
incredibly (?) fast serverless hosting & CI for
backend & frontend JS apps
JS/TS runtime perf race is heating up
"Deno's HTTP server is getting overhauled and
we're happy to report that it is the fastest
JavaScript web server ever built." by Ryan...
72
Slide 73
Slide 73 text
Increased Runtime competition
must make us happy!
Slide 74
Slide 74 text
WinterCG: for better Compatibility / baseline
Web interoperable Runtime CG (2022.05)
Common minimum API
Web Crypto Streams
Performance
Not Competition like 1990' browser war...
74
Slide 75
Slide 75 text
Web@edge
Slide 76
Slide 76 text
Cloud
fl
are Workers use V8:Isolate (2018)
Workers doesn't use containers or virtual machines
Cloud
fl
are think V8 isolation is the future of serverless
https://blog.cloudflare.com/cloud-computing-without-containers/
76
Slide 77
Slide 77 text
Cloud
fl
are Workers is faster than Lambda
Faster Response time
2-3 times faster than traditional
workers
AWS, GCP, Azure cold start
AWS - under 1 second
GCP - 0.5~2 second
Azure - up to 5 second :-(
Deno also use V8 isolation
this choice is most common
architecture recently
77
Slide 78
Slide 78 text
microservices to nanoservices
Workerd is a nanoservice Runtime (2022.09)
much lighter-weight than typical containers!
Each Worker run use v8 isolation for security but
when one worker send request to another, both
worker run in the same thread with zero latency.
You can break code into many pieces without
worrying about the overhead.
All the APIs are implemented in native code and
shared with Worker instances. (many runtimes
implements signi
fi
cant portion of built-in APIs in JS
and cannot be shared)
naming "functions" is not recommended since it emphasis on syntax rather than logical functionality
https://blog.cloudflare.com/workerd-open-source-workers-runtime/
78
Slide 79
Slide 79 text
FYI: Security of V8 isolation
this article explain security
consideration about workers
with V8 isolations.
limitations: V8 itself cannot
defend against Spectre but
mitigating it...
many other security features
introduced to keep security
and to make lighter instance
79
Slide 80
Slide 80 text
JS Runtime is lighter-weight
Containers.next!?
Slide 81
Slide 81 text
microprocess to nanoprocess by Fastly
"nanoprocess isolation" proposal
Tyler McMullen (CTO) talked about it in 2018
2019.03 Lucet
WebAssembly Compiler and Runtime
2019.11 Bytecode Alliance / talk bay Tyler
Fastly, Mozilla, Intel, Red Hat
nanoprocess can handle 10K+ program within a
single process! (compared to hundreds programs
with V8 isolation, 1K+ by Cloud
fl
are's optimization)
81
Slide 82
Slide 82 text
JavaScript run (startup) fast on WebAssembly
SpiderMonkey.wasm
Compile SpiderMonkey (or QuickJS) to Wasm
Load JS program on wasm version of JS engine
Take whole snapshot of JS engine and initialized (parse,
prepare global var table etc) JS program
AOT JS code, instead of JIT to avoid overhead on runtime.
Order of magnitude faster startup
1st result: startup latency ~2ms is 13x faster than isolation
recent result: 400x faster startup = 5μs!
AWS Lambda: ~250ms is 50,000x slower...
https://bytecodealliance.org/articles/making-javascript-run-fast-on-webassembly
82
Slide 83
Slide 83 text
New architecture of Web
Runtime can change the world!
Slide 84
Slide 84 text
Web Runtime
Slide 85
Slide 85 text
Evolution of the Web
stagnating?
Slide 86
Slide 86 text
Evolution of the Web stagnating?
Web, Web Tech, Web Runtime is developed
by Browser Vendors
by CDN, Hosting or OTT Service Providers
by Framework developers
The competitive landscape is changing
new proprietary features support in 199x
browser speed and standard compliance in 200x
app framework/architecture and CDNs in 201x
runtime speed, e
ff
i
ciency, use-cases in 202x
86
Slide 87
Slide 87 text
Web Runtimes
change the World!