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
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
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
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
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
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
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
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
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
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
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
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
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
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 [email protected] use this! run JS on JavaScript Engine on Wasm Runtime 21
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
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
(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
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
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 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
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
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
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
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
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
(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
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
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
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
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
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
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.”
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."
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
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" 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
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
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
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
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
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
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
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
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
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
(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
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
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
containers or virtual machines Cloud fl are think V8 isolation is the future of serverless https://blog.cloudflare.com/cloud-computing-without-containers/ 76
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
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
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
(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
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
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
kouzoukaikaku
puhitaku
loftkun
usashirou
oracle4engineer
ch1aki
hiropo20
__allllllllez__
tutsunom
anugrahsr
sztm
miekobayashi
marktimemedia
jakevdp
smashingmag
productmarketing
mclloyd
destraynor
lara
brad_frost
kastner
yeseniaperezcruz
trallard
sugarenia
![[email protected]](https://files.speakerdeck.com/presentations/0796efa19816403f9f2df44e133987a5/slide_74.jpg){kind=link}
