unbundling the future web runtime
TRANSCRIPT
![Page 1: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/1.jpg)
The native integration of ES modules into the web
JavaScript build tooling
![Page 2: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/2.jpg)
SystemJS
![Page 3: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/3.jpg)
![Page 4: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/4.jpg)
![Page 5: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/5.jpg)
![Page 6: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/6.jpg)
![Page 7: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/7.jpg)
Web Assembly
![Page 8: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/8.jpg)
![Page 9: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/9.jpg)
/page1.html /page2.html
ESM
Static import Dynamic import
ESM WASM
ESM ESMESM ESM
ESM
ESM
ESM
![Page 10: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/10.jpg)
Build tools don’t have to be taken by surprise
We can already investigate this future
![Page 11: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/11.jpg)
SystemJS Built on top of es-module-loader
![Page 12: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/12.jpg)
![Page 13: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/13.jpg)
![Page 14: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/14.jpg)
![Page 15: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/15.jpg)
Static import Dynamic import
ESM WASM
ESM ESMESM
ESM
ESM
/page1.html /page2.html
ESM
ESM ESM
![Page 16: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/16.jpg)
Static import Dynamic import
System.register WASM
System.register
System.register
System.register
System.register
System.register
/page1.html /page2.html
System.register
System.register
System.register
![Page 17: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/17.jpg)
IsomorphicModular Runtime
![Page 18: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/18.jpg)
How is the native module loader useful?
![Page 19: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/19.jpg)
The native module loader enables codesharing across pages and lazy loaded code
![Page 20: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/20.jpg)
Optimization
![Page 21: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/21.jpg)
/page1.html /page2.html
Static import Dynamic import
ESM WASM
ESM ESMESM
ESM
ESMESM
ESM ESM
![Page 22: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/22.jpg)
x.js
y.js
![Page 23: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/23.jpg)
x.js
![Page 24: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/24.jpg)
/page1.html /page2.html
Static import Dynamic import
ESM WASM
ESM ESMESM
ESM
ESMESM
ESM ESM
![Page 25: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/25.jpg)
Static import Dynamic import
ESM WASM
ESM ESMESM
ESM
ESM
/page1.html /page2.html
ESM
ESM ESM
![Page 26: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/26.jpg)
Static import Dynamic import
WASM
ESM ESMESM
/page1.html /page2.html
ESM
ESM ESM
![Page 27: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/27.jpg)
Static import Dynamic import
WASM
ESM ESMESM
/page1.html /page2.html
ESM
ESM ESM
![Page 28: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/28.jpg)
x.js
y.js
z.js
![Page 29: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/29.jpg)
xy.js z.js
![Page 30: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/30.jpg)
Static import Dynamic import
WASM
ESM ESMESM
/page1.html /page2.html
ESM
ESM ESM
![Page 31: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/31.jpg)
Static import Dynamic import
WASM
ESMESM
/page1.html /page2.html
ESM
ESM ESM
![Page 32: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/32.jpg)
Output Generation
![Page 33: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/33.jpg)
Static import Dynamic import
WASM
ESM ESMESM
/page1.html /page2.html
ESM
ESM ESM
![Page 34: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/34.jpg)
ESM ESM
Static import Dynamic import
WASM
ESM
/page1.html /page2.html
ESM
![Page 35: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/35.jpg)
Express optimization strategies
Visual tools for optimization management
![Page 36: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/36.jpg)
Tree shaking Web Assembly
Automatically extract repeated functions
Module splitting
![Page 37: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/37.jpg)
Fine-grained Module Graph
language compilers
ProductionModule Graph
Production Build Artefacts
optimizationsoutput
generation
![Page 38: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/38.jpg)
Our tools should fully expose the module graph to cross-module optimizations.
This will allow for better performance optimization today, while also leading the way to native module workflows.
![Page 39: Unbundling the Future Web Runtime](https://reader033.vdocuments.site/reader033/viewer/2022050614/58ed8f9b1a28abb7048b4613/html5/thumbnails/39.jpg)
Thanks
@guybedford