# Web Containers - Let’s develop Web with Web!! - Johnny(LINE)

{%hackmd @JSDC2024/INuUpOqWS42gD1_pz5S4Bg %}

Slido：
https://app.sli.do/event/5d529Dq5sUBbfVecvf8rq8

> 開始做筆記

https://webcontainers.io/

https://techblog.lycorp.co.jp/zh-hant/build-your-nodejs-web-container

## About Me
Johnny Wang (王志瑜)

## Agenda

## What?
- Introduced by StackBlitz
- Browser-based NodeJS runtime
- Run terminal + node.js in Browser
- Created by Web Assembly

## Why?
- Faster than local environment
- Run in your local memory
- No need remote Cloud VM
- Debugging in-browser
- Sandboxing
- Secure by default
-

## How?

[Share Array Buffer need](https://webcontainers.io/guides/quickstart#cross-origin-isolation)

其實 fs 不會真的寫入 root，在 browser memory 內 增加安全性

WebContainers 非開源，flow 為推測出來

spawn 執行 code，為核心

jsh + xterm -> 在 Browser 內執行 command line

## Comparison with Docker VM

## Conclusion
- Heavily using Memory
- XSS attack risk

Compile Node.js to WASM (wenode.js)

## Q & A

### 請問 web container 解決了你們團隊的什麼問題？
Web Container 在公司內還沒導入，因為需要 Licence

### 想詢問跟 web assembly差別是？
Web container 主要是把 nodejs 核心模組（其中 fs, http 透過類似 memfs、service worker 模擬取代原本的 fs, http）編譯成 web assembly 格式，並讓開發者透過 client side 的 library 方便下載並調用，所以

web container 是一個使用到 web assembly 技術並打造的一款方便開發者使用的 browser-based Nodejs Runtime 工具

### 請問剛才最後測試直接跑github專案的連結是哪裡？
在我的 blog side project 中，[連結在這](https://pen.maju-web.club/webcontainer/)

> 聊天區
>