辛宝Otto 的玄酒清谈

回看再補充：當局者迷，現在回看 Modern.js 發展，對比早期的宣貫，展露出了冰山一角。常看常新。最早發布在語雀上，現在搬運到 blog 上。

原文對應 GMTC2021 上的演講 邁入現代 Web 開發（GMTC 2021 演講《字節跳動的現代 Web 開發實踐》全文）

還有一個對應的 PDF，先不放了。

技術細節#

三個部分：

• 整體回顧 “傳統開發” 並找到瓶頸
• 為了解決問題，發生的變化和趨勢
• 字節跳動的技術產出，稱之為 “引擎升級”

字節這樣的大廠裡項目多，因為體量大，前端的問題暴露得更明顯。

• 現代 Web 開發的現狀與未來：https://zhuanlan.zhihu.com/p/88616149

傳統開發和問題#

下圖是傳統的開發技術棧，讀圖。

圖中從下到上，代表抽象層從底層到頂層。最右邊三個方塊，都從最下面延伸到了最上面，代表它們都是端到端的解決方案，跟左邊的體系，以及彼此之間，都是割裂的，包含大量重複，這次分享因為時間關係，不講這幾個部分。

藍色的方塊都是代碼層面的，綠色的方塊都是平台層面的。

這套技術發展到趨於停滯，就表現了很多問題。

• 腳手架。有結構有示例

• 有的文件必須改，改完之後才符合實際的項目結構

• 多個項目同一個腳手架生產，各自發展，最後發現差異會比較大，難以復用

• 腳手架迭代了，不能對原來的項目帶來好處

• 項目模板

• 不同項目，模板不同，會越來越多

• 模板不斷發展各自沉澱，有的會停止更新

• webpack 包裝

• 避免人人都要配置 webpack，會進行封裝、包裝，慣例

• 包裝的抽象程度有限，配置的 api 五花八門，一複雜就還要改。規範太多

• 編譯工具演進。除了 webpack，還有更多選擇。稱為 js 第三紀元。具體技術細節略過

• 除了 dev build 還不夠，下圖很神，一列一列地看，這裡不展開，表達的意思是前端還有很多工作，dev 和 build 是不夠的。而且也管不到項目的底層服務。

圖中這段話來自 Redux 作者 Dan 寫的一篇文章，講 JS 工具的配置 API 的設計，這段話就是在講這方面的抽象和設計能帶來巨大的影響，有很高的門檻，需要非常嚴肅專業的對待，這種工作也需要高度的集中，而不是交給「Webpack 工程師」們搞各種各樣的「規範」。

• The melting pot of JavaScript: https://increment.com/development/the-melting-pot-of-javascript/

The Third Age of JavaScript: https://www.swyx.io/writing/js-third-age

接上

• 前端工程化。只局限到代碼層面，還到不了平台層面。（隱隱約約 serverless？）

• react 的問題。

• 選哪個具體技術框架。他們整逐漸統一到 react，理由是社區生態、應用規模、設計演進、設計趨勢。這塊沒啥意思，有結論就行了。

• react 離框架功能不全

• 去看框架級別，比如 nest，提供的後端為中心的開發，和普通 web 項目的前段關係不大，引入 node 門檻更高，從 node 到 bff 等，略過

• 核心是：分層 + 關注點分離（下面絕對有 serverless）

參考鏈接：

• https://www.npmtrends.com/@babel/preset-react-vs-@vue/cli-shared-utils-vs-next-vs-nuxt-vs-react-vs-react-scripts-vs-vue-vs-vue-loader-vs-vite

Advancing the web framework ecosystem (Chrome Dev Summit 2019): https://youtu.be/QDljY2I1Pfw

NestJS Philosophy: https://docs.nestjs.com/#philosophy

The Clean Architecture: https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html

The BFF Pattern (Backend for Frontend): An Introduction: https://blog.bitsrc.io/bff-pattern-backend-for-frontend-an-introduction-e4fa965128bf

接上

• IaaS 和後端 PaaS。和前端更沒有關係了。藍色應該有個統一的收口。（是啥呢，必然是 serverless）

下圖，綠色部分是底層服務。黃色和藍色是前後端。

至此，第一部分結束。

問題都拋出來了，如何解決，這是第二部分內容。

改變的趨勢#

• 現代 Web 開發的現狀與未來（JSDC 2019 演講全文）: https://zhuanlan.zhihu.com/p/88616149
• 理解現代 Web 開發（JSConf China 2017）：https://youtu.be/515pkXWHgnE

https://2017.jsconfchina.com/files/02-modern-web-dev-dexteryy.pdf

技術在進行演變

先看藍色的：

• lamp Linux+apache+mysql+php 老一套，略

• ruby on rails。引入 MVC 分層

• 12-factor app 十二要素應用宣言，是一種工程標準，具體略

• mean/mern mongo+express+angular/react+node.js 描述略

• 「範式轉移」：https://wiki.mbalib.com/wiki/%E8%8C%83%E5%BC%8F%E8%BD%AC%E6%8D%A2

• The Asset Pipeline: https://guides.rubyonrails.org/asset_pipeline.html

• Hotwire: https://github.com/hotwired/hotwire-rails

• MERN Stack: https://www.mongodb.com/mern-stack

在看橙色的 未完待續。

• JAMstack

• j,js -> CSR 對應單頁

• A, apis -> BFF ContentMesh

• Markup SSR/SSG serverless

• SHAMstack

• Static Hosting -> serverless

• Apis+js

• Markup

• STAR app

• meta-framework

star 是在上面兩個的基礎上組合

國外技術社區提到 meta-framework ，

本質上是把 JAMstack 和 STAR 強調的部分加起來，用以客戶端為中心的、包含更上層抽象的、通用的 Web 框架的形式，整體系統的滿足這些需求，抽象、簡化這裡面的各種模式。

還放了一張 s 曲線，來說，ui 框架趨近穩定之後，基於 react 做整合。形成新的主流技術。

參考資料

• JAMstack: https://jamstack.org/
• SHAMstack: https://css-tricks.com/jamstack-more-like-shamstack/
• "Content Mesh": https://www.gatsbyjs.com/blog/2018-10-04-journey-to-the-content-mesh/
• ooooops I guess we’re* full-stack developers now: https://css-tricks.com/ooooops-i-guess-were-full-stack-developers-now/
• STAR Apps: A New Generation of Front-End Tooling for Development Workflow: https://css-tricks.com/star-apps-a-new-generation-of-front-end-tooling-for-development-workflows/
• React Distros and The Deployment Age of JavaScript Frameworks: https://www.swyx.io/react-distros/

可以進入下一話題了，就是傳統開發，變成現代 web 開發，這叫範式轉移， Paradigm shift ，各種舊模式向新模式轉換。

定義現代開發#

來定義了

「現代 Web 開發」實現了在同一套程序裡一體化開發，在開發、調試、運行、部署等環節都能做到「無伺服器化」，讓前端技術棧的開發者更容易成為真正的「產品開發者」。

參考鏈接

• What Is DX? (Developer Experience): https://medium.com/swlh/what-is-dx-developer-experience-401a0e44a9d9

• What is developer experience?: https://www.tiny.cloud/blog/developer-experience/

• "SPR": https://vercel.com/blog/serverless-pre-rendering

• "SSG": https://www.freecodecamp.org/news/static-site-generation-with-nextjs/

• "ISG": https://www.smashingmagazine.com/2021/04/incremental-static-regeneration-nextjs/

• "Micro Frontend": https://micro-frontends.org/

進入第三部分

字節跳動最佳實踐#

回看，傳統和現代開發

圖中綠色代表的平台化基建，占比超過藍色代表的純代碼層面的基建。

生成了項目，完全是在線，並且可以一鍵預覽。