SlideShare a Scribd company logo
The native integration of ES modules into the web

JavaScript build tooling
SystemJS
Unbundling the Future Web Runtime
Unbundling the Future Web Runtime
Unbundling the Future Web Runtime
Unbundling the Future Web Runtime
Web Assembly
Unbundling the Future Web Runtime
/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
Unbundling the Future Web Runtime
Unbundling the Future Web Runtime
Unbundling the Future Web Runtime
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

.register
System

.register
/page1.html /page2.html
System

.register
System

.register
System

.register
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

generation
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.
Thanks
@guybedford

More Related Content

PDF
Storytelling For The Web: Integrate Storytelling in your Design Process
PDF
2024 Trend Updates: What Really Works In SEO & Content Marketing
PPTX
Managing Hyper-V With PowerShell
ODP
Extending An Android App Using the IBM Push for Bluemix Cloud Service
ODP
Using the Mobile Data service on IBM Bluemix with an AngularJS web app
PDF
Openbar 5 - Leuven - Automating everything with Ansible - Piros
PPTX
Building Ruby on Rails apps on Windows Azure (MIX 2010 at Last Vegas))
KEY
PyCon US 2012 - Web Server Bottlenecks and Performance Tuning
Storytelling For The Web: Integrate Storytelling in your Design Process
2024 Trend Updates: What Really Works In SEO & Content Marketing
Managing Hyper-V With PowerShell
Extending An Android App Using the IBM Push for Bluemix Cloud Service
Using the Mobile Data service on IBM Bluemix with an AngularJS web app
Openbar 5 - Leuven - Automating everything with Ansible - Piros
Building Ruby on Rails apps on Windows Azure (MIX 2010 at Last Vegas))
PyCon US 2012 - Web Server Bottlenecks and Performance Tuning

Recently uploaded (20)

PDF
Enhancing emotion recognition model for a student engagement use case through...
PDF
Web App vs Mobile App What Should You Build First.pdf
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
PDF
WOOl fibre morphology and structure.pdf for textiles
PDF
gpt5_lecture_notes_comprehensive_20250812015547.pdf
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PDF
Hybrid model detection and classification of lung cancer
PDF
A comparative study of natural language inference in Swahili using monolingua...
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PDF
Transform Your ITIL® 4 & ITSM Strategy with AI in 2025.pdf
PPTX
SOPHOS-XG Firewall Administrator PPT.pptx
PDF
Accuracy of neural networks in brain wave diagnosis of schizophrenia
PPTX
TechTalks-8-2019-Service-Management-ITIL-Refresh-ITIL-4-Framework-Supports-Ou...
PDF
Encapsulation theory and applications.pdf
PPTX
Group 1 Presentation -Planning and Decision Making .pptx
PPTX
Chapter 5: Probability Theory and Statistics
PDF
Zenith AI: Advanced Artificial Intelligence
PDF
Assigned Numbers - 2025 - Bluetooth® Document
PDF
Encapsulation_ Review paper, used for researhc scholars
PPTX
A Presentation on Artificial Intelligence
Enhancing emotion recognition model for a student engagement use case through...
Web App vs Mobile App What Should You Build First.pdf
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
WOOl fibre morphology and structure.pdf for textiles
gpt5_lecture_notes_comprehensive_20250812015547.pdf
Agricultural_Statistics_at_a_Glance_2022_0.pdf
Hybrid model detection and classification of lung cancer
A comparative study of natural language inference in Swahili using monolingua...
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
Transform Your ITIL® 4 & ITSM Strategy with AI in 2025.pdf
SOPHOS-XG Firewall Administrator PPT.pptx
Accuracy of neural networks in brain wave diagnosis of schizophrenia
TechTalks-8-2019-Service-Management-ITIL-Refresh-ITIL-4-Framework-Supports-Ou...
Encapsulation theory and applications.pdf
Group 1 Presentation -Planning and Decision Making .pptx
Chapter 5: Probability Theory and Statistics
Zenith AI: Advanced Artificial Intelligence
Assigned Numbers - 2025 - Bluetooth® Document
Encapsulation_ Review paper, used for researhc scholars
A Presentation on Artificial Intelligence
Ad
Ad

Unbundling the Future Web Runtime