SlideShare a Scribd company logo
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

.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

Similar to Unbundling the Future Web Runtime

Aspnet architecture
Aspnet architectureAspnet architecture
Aspnet architecture
phantrithuc
 
EECI - EE And Magento Integration
EECI - EE And Magento IntegrationEECI - EE And Magento Integration
EECI - EE And Magento Integration
Simplified Safety
 
Building a Spring Boot Application - Ask the Audience! (from JavaLand 2017)
Building a Spring Boot Application - Ask the Audience!  (from JavaLand 2017)Building a Spring Boot Application - Ask the Audience!  (from JavaLand 2017)
Building a Spring Boot Application - Ask the Audience! (from JavaLand 2017)
🎤 Hanno Embregts 🎸
 
ASP.Net Presentation Part1
ASP.Net Presentation Part1ASP.Net Presentation Part1
ASP.Net Presentation Part1
Neeraj Mathur
 

Similar to Unbundling the Future Web Runtime (20)

Web assembly brings the web to a new era
Web assembly brings the web to a new eraWeb assembly brings the web to a new era
Web assembly brings the web to a new era
 
WebAssembly - kolejny buzzword, czy (r)ewolucja?
WebAssembly - kolejny buzzword, czy (r)ewolucja?WebAssembly - kolejny buzzword, czy (r)ewolucja?
WebAssembly - kolejny buzzword, czy (r)ewolucja?
 
Web assembly - Future of the Web
Web assembly - Future of the WebWeb assembly - Future of the Web
Web assembly - Future of the Web
 
WASM! WASI! WAGI! WAT?
WASM! WASI! WAGI! WAT?WASM! WASI! WAGI! WAT?
WASM! WASI! WAGI! WAT?
 
WebAssembly WASM Introduction Presentation
WebAssembly WASM Introduction PresentationWebAssembly WASM Introduction Presentation
WebAssembly WASM Introduction Presentation
 
WebAssembly - czy dzisiaj mi się to przyda do pracy?
WebAssembly - czy dzisiaj mi się to przyda do pracy?WebAssembly - czy dzisiaj mi się to przyda do pracy?
WebAssembly - czy dzisiaj mi się to przyda do pracy?
 
Aspnet architecture
Aspnet architectureAspnet architecture
Aspnet architecture
 
EECI - EE And Magento Integration
EECI - EE And Magento IntegrationEECI - EE And Magento Integration
EECI - EE And Magento Integration
 
Building a Spring Boot Application - Ask the Audience! (from JavaLand 2017)
Building a Spring Boot Application - Ask the Audience!  (from JavaLand 2017)Building a Spring Boot Application - Ask the Audience!  (from JavaLand 2017)
Building a Spring Boot Application - Ask the Audience! (from JavaLand 2017)
 
A Safe Dock for our Programs
A Safe Dock for our ProgramsA Safe Dock for our Programs
A Safe Dock for our Programs
 
Winter Sim 2009 Presentation
Winter Sim 2009 PresentationWinter Sim 2009 Presentation
Winter Sim 2009 Presentation
 
ASP.Net Presentation Part1
ASP.Net Presentation Part1ASP.Net Presentation Part1
ASP.Net Presentation Part1
 
Browser exploitation SEC-T 2019 stockholm
Browser exploitation SEC-T 2019 stockholmBrowser exploitation SEC-T 2019 stockholm
Browser exploitation SEC-T 2019 stockholm
 
Webpack: your final module bundler
Webpack: your final module bundlerWebpack: your final module bundler
Webpack: your final module bundler
 
Booting up with polymer
Booting up with polymerBooting up with polymer
Booting up with polymer
 
Building a Spring Boot Application - Ask the Audience!
Building a Spring Boot Application - Ask the Audience!Building a Spring Boot Application - Ask the Audience!
Building a Spring Boot Application - Ask the Audience!
 
Building a Spring Boot Application - Ask the Audience! (from JVMCon 2018)
Building a Spring Boot Application - Ask the Audience! (from JVMCon 2018)Building a Spring Boot Application - Ask the Audience! (from JVMCon 2018)
Building a Spring Boot Application - Ask the Audience! (from JVMCon 2018)
 
Web tech
Web techWeb tech
Web tech
 
Web techh
Web techhWeb techh
Web techh
 
Web tech
Web techWeb tech
Web tech
 

Recently uploaded

Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 

Recently uploaded (20)

Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
 
Agentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfAgentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdf
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří Karpíšek
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
Introduction to Open Source RAG and RAG Evaluation
Introduction to Open Source RAG and RAG EvaluationIntroduction to Open Source RAG and RAG Evaluation
Introduction to Open Source RAG and RAG Evaluation
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024
 
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 

Unbundling the Future Web Runtime