Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
The native integration of ES modules into the web

JavaScript build tooling
SystemJS
Web Assembly
/page1.html /page2.html
ESM
Static import Dynamic import
ESM WASM
ESM ESMESM ESM
ESM
ESM
ESM
Build tools don’t have to be taken by surprise

We can already investigate this future
SystemJS
Built on top of es-module-loader
Static import Dynamic import
ESM WASM
ESM ESMESM
ESM
ESM
/page1.html /page2.html
ESM
ESM ESM
Static import Dynamic import
System

.register
WASM
System

.register
System

.register
System

.register
System

.registe...
Isomorphic

Modular Runtime
How is the native
module loader useful?
The native module loader enables code

sharing across pages and lazy loaded code
Optimization
/page1.html /page2.html
Static import Dynamic import
ESM WASM
ESM ESMESM
ESM
ESMESM
ESM ESM
x.js
y.js
x.js
/page1.html /page2.html
Static import Dynamic import
ESM WASM
ESM ESMESM
ESM
ESMESM
ESM ESM
Static import Dynamic import
ESM WASM
ESM ESMESM
ESM
ESM
/page1.html /page2.html
ESM
ESM ESM
Static import Dynamic import
WASM
ESM ESMESM
/page1.html /page2.html
ESM
ESM ESM
Static import Dynamic import
WASM
ESM ESMESM
/page1.html /page2.html
ESM
ESM ESM
x.js
y.js
z.js
xy.js z.js
Static import Dynamic import
WASM
ESM ESMESM
/page1.html /page2.html
ESM
ESM ESM
Static import Dynamic import
WASM
ESMESM
/page1.html /page2.html
ESM
ESM ESM
Output Generation
Static import Dynamic import
WASM
ESM ESMESM
/page1.html /page2.html
ESM
ESM ESM
ESM ESM
Static import Dynamic import
WASM
ESM
/page1.html /page2.html
ESM
Express optimization strategies
Visual tools for optimization management
Tree shaking Web Assembly
Automatically extract repeated functions
Module splitting
Fine-grained
Module Graph
language

compilers
Production

Module Graph
Production 

Build Artefacts
optimizations
output

...
Our tools should fully expose the module
graph to cross-module optimizations.


This will allow for better performance
opt...
Thanks
@guybedford
Unbundling the Future Web Runtime
Unbundling the Future Web Runtime
Unbundling the Future Web Runtime
Unbundling the Future Web Runtime
Unbundling the Future Web Runtime
Unbundling the Future Web Runtime
Unbundling the Future Web Runtime
Unbundling the Future Web Runtime
Upcoming SlideShare
Loading in …5
×

Unbundling the Future Web Runtime

1,268 views

Published on

Slides from the DotJS 2016 talk by Guy Bedford.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Unbundling the Future Web Runtime

  1. 1. The native integration of ES modules into the web
 JavaScript build tooling
  2. 2. SystemJS
  3. 3. Web Assembly
  4. 4. /page1.html /page2.html ESM Static import Dynamic import ESM WASM ESM ESMESM ESM ESM ESM ESM
  5. 5. Build tools don’t have to be taken by surprise
 We can already investigate this future
  6. 6. SystemJS Built on top of es-module-loader
  7. 7. Static import Dynamic import ESM WASM ESM ESMESM ESM ESM /page1.html /page2.html ESM ESM ESM
  8. 8. 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
  9. 9. Isomorphic
 Modular Runtime
  10. 10. How is the native module loader useful?
  11. 11. The native module loader enables code
 sharing across pages and lazy loaded code
  12. 12. Optimization
  13. 13. /page1.html /page2.html Static import Dynamic import ESM WASM ESM ESMESM ESM ESMESM ESM ESM
  14. 14. x.js y.js
  15. 15. x.js
  16. 16. /page1.html /page2.html Static import Dynamic import ESM WASM ESM ESMESM ESM ESMESM ESM ESM
  17. 17. Static import Dynamic import ESM WASM ESM ESMESM ESM ESM /page1.html /page2.html ESM ESM ESM
  18. 18. Static import Dynamic import WASM ESM ESMESM /page1.html /page2.html ESM ESM ESM
  19. 19. Static import Dynamic import WASM ESM ESMESM /page1.html /page2.html ESM ESM ESM
  20. 20. x.js y.js z.js
  21. 21. xy.js z.js
  22. 22. Static import Dynamic import WASM ESM ESMESM /page1.html /page2.html ESM ESM ESM
  23. 23. Static import Dynamic import WASM ESMESM /page1.html /page2.html ESM ESM ESM
  24. 24. Output Generation
  25. 25. Static import Dynamic import WASM ESM ESMESM /page1.html /page2.html ESM ESM ESM
  26. 26. ESM ESM Static import Dynamic import WASM ESM /page1.html /page2.html ESM
  27. 27. Express optimization strategies Visual tools for optimization management
  28. 28. Tree shaking Web Assembly Automatically extract repeated functions Module splitting
  29. 29. Fine-grained Module Graph language
 compilers Production
 Module Graph Production 
 Build Artefacts optimizations output
 generation
  30. 30. 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.
  31. 31. Thanks @guybedford

×