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

歡迎來到 JSDC 2024 共筆
共筆入口：https://hackmd.io/@JSDC2024/2024
手機版請點選上方「展開選單」查看其他共筆。

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

其實 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 中，連結在這

聊天區