We are already got used to continuous migration from desktop to the web and to the fact that Web Browser powered by Javascript, WASM, etc. can replace a huge amount of desktop applications. In this talk, I’ll talk about WebContainers as another step in this direction, which brings Node.js runtime directly to your browser. Why do we need Node.js in the browser at all? Will it work in any real use case, not just on the demo site? But is it a good step in general? All this and a few more questions I will try to answer in my presentation.

2. About me
JavaScript
fwdays
2023
Position: Engineering Director,
Avenga
Industry Experience: Over a decade
in IT & Software Engineering
Passion: My passion thrives in the
realm of IT and coding.

3. In this talk
JavaScript
fwdays
2023
WebContainers
use cases
01
How it works
03
WebContainers
internals
02
Strengths and
weaknesses
04

4. JavaScript
fwdays
2023
Why we need Node.js
in Web Browser? 🤔

5. Node.js in browser
JavaScript
fwdays
2023
It is helpful for all kinds of applications that
require dedicated VMs created to execute
users code
Documentation
Development
Education
Tooling

6. Typical architecture
JavaScript
fwdays
2023
Client Layer
Server Layer
Data
Layer
Front-End
User 1 Browser
Front-End
Front-End
User 2 Browser
Front-End
User 3 Browser
Front-End
User 4 Browser
Back-End
��

7. JavaScript
fwdays
2023
What if …? 🤔

8. Moving BE to Client
JavaScript
fwdays
2023
Client Layer
Server Layer
Data
Layer FE
BE
User 1 Browser
FE
BE
User 2 Browser
FE
BE
User 3 Browser
FE
BE
User 4 Browser
FE
BE

9. JavaScript
fwdays
2023
That’s what are
WebContainers about! 💣

10. WebContainers
JavaScript
fwdays
2023
Stackblitz company is the creator and
popularizer of WebContainers technology.
This technology might be beneficial for apps
that previously required cloud VMs.
WebContainers are a browser-based runtime
for executing Node.js applications, and
operating system commands entirely inside
your browser tab.

11. General information
JavaScript
fwdays
2023
You can think about WebContainer as a
virtual POSIX-compliant Operation System
in the tab of your browser.
This virtual OS heavily utilizes
some existing capabilities of the
Web Browsers like:
● Service Workers
● Web Workers
● WebAssembly
● SharedArrayBuffers

12. Prerequisites - Service Worker
Service
worker
Window (page)
JavaScript
fwdays
2023

13. Prerequisites - Web Worker
Web worker
Window (page)
JavaScript
fwdays
2023
Service worker

14. Prerequisites - WebAssembly
Web worker
Window (page)
WebAssembly
JavaScript
fwdays
2023
Service worker

15. Prerequisites - SharedArrayBuffer
JavaScript
fwdays
2023
SharedArrayBuffer - is a javascript object which allows
storing and sharing the binary data across the threads.
It is available only if Cross-origin isolation is turned on.
Turning on means that the following headers should be
added:
'Cross–Origin–Embedder–Policy': 'require–corp',
'Cross–Origin–Opener–Policy': 'same–origin',

16. </>
JS
Cross-Origin-Embedder-Policy
JavaScript
fwdays
2023
COEP: require-corp
<script>
<img>
<video>
CORP: cross-origin
a.example
b.example
CORS
CORP: same-origin

17. Cross-Origin-Opener-Policy
JavaScript
fwdays
2023
Pop up! Pop up!
COOP: same-origin COOP: same-origin COOP: same-origin
Browsing Context Group Browsing Context Group

18. ● Specific cases - cross-origin might be
needed for OAuth flows or payments;
● Assets loading - asset server has to
explicitly grant permission for the asset
to be loaded on your origin;
● Embedding - you cannot embed a
cross-origin isolated website inside the
context which is not cross-origin isolated;
Cross-origin isolation limitations
JavaScript
fwdays
2023

19. High-level architecture
JavaScript
fwdays
2023
WebAssembly
Web Browser
SharedArrayBuffer WebWorkers ServiceWorkers
OS Core(shell, binutils, etc.)
File System Threads Network

20. JavaScript
fwdays
2023
Dive into WebContainers 󰞵

21. import { WebContainer } from
'@webcontainer/api' ;
window.addEventListener ('load', async () =>
{
webcontainerInstance = await
WebContainer .boot();
});
Booting
JavaScript
fwdays
2023
WebContainer instance
Web Browser
wasm workers
Booting means to load all needed resources,
create an instance of WebContainer for future
usage in your application.
App Server Stackblitz servers

22. Interaction with WebContainer
JavaScript
fwdays
2023
WebContainer as a mini-OS for executing node.js should provide:
A way to
create/delete/
update files;
A way to interact with
with WebContainer
instance;
Pre Installed Node.js
ecosystem

23. FileSystem API (.fs)
JavaScript
fwdays
2023
fs property is exposed on the WebContainer instance. Currently, fs
supports a few methods:
mkdir readdir readFile rm writeFile

24. await
webcontainerInstance .mount(files);
.mount
JavaScript
fwdays
2023
For loading multiple files
FileSystemTree
Where files has a type
const files = {
'package.json ': {
file: {
contents: `
{
"name": "vite-starter",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"vite": "^4.0.4"
}
}`,
},
},
};

25. .spawn
JavaScript
fwdays
2023
.spawn is used to run commands inside the WebContainer.
webcontainerInstance.spawn('mkdir', ['newProject']);
or
webcontainerInstance.spawn('ls', ['src', '-l']);

26. Preconfigured node ecosystem
JavaScript
fwdays
2023
WebContainer provides you with a preinstalled
Node.js ecosystem.
Node.js - v16.14.2
Turbo(custom npm client), which optimize the
dependency management and installation
processes. You still can use npm or yarn for
your project, but internally it will be Turbo.

27. Running server
JavaScript
fwdays
2023
WebContainer expose the server-ready
event, which is emitted when the server
is ready to accept requests.
await webcontainerInstance.spawn('npm', ['run',
'start']);
// Wait for `server-ready` event
webcontainerInstance.on('server-ready', (port, url) => {
// ...
});

28. JavaScript
fwdays
2023
Mind-blowing 🤯, isn’t it?

29. JavaScript
fwdays
2023
Some examples 👀

33. Current issues
JavaScript
fwdays
2023
Custom Event Loop, File System, Multi
Threading implementations
Offline support(not really)
Proprietary nature
Turbo package manager
Networking

34. Conclusion
JavaScript
fwdays
2023
WebContainers - another step of desktop to
web migration
Workarounds, workarounds are everywhere
WebContainers - main browser load tester
Technology not for many use cases, but
definitely worth try it

35. Useful links
JavaScript
fwdays
2023
https://node.new https://webcontainer.new

36. JavaScript
fwdays
2023
Q/A

37. JavaScript
fwdays
2023
<Thank/you!>
Do you have any questions?
oleksandr.zinevych@avenga.com
https://www.linkedin.com/in/oleksandr-zinevych/
https://twitter.com/a_zinewicz
https://github.com/zinevych