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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.”
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”
"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
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
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
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
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
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
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
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
(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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
dynamis
nktamago
shotatsuge
matsuihidetoshi
yellowshippo
.png){kind=icon}
3playmarketing
saboyutaka
picardparis
opeonikute
soracom
yokawasa
adavis
koudaiii
eileencodes
kneath
rmw
michaelherold
chriscoyier
shpigford
matthewcrist
akmur
dougneiner
afnizarnur
paulrobertlloyd