辛宝Otto

辛宝Otto 的玄酒清谈

北漂前端程序员儿 / 探索新事物 / Web Worker 主播之一/内向话痨
xiaoyuzhou
email

Modern.js 前传-字节现代 web开发

image.png

回看再补充:当局者迷,现在回看 Modern.js 发展,对比早期的宣贯,展露出了冰山一角。常看常新。最早发布在语雀上,现在搬运到 blog 上。

原文对应 GMTC2021 上的演讲 迈入现代 Web 开发(GMTC 2021 演讲《字节跳动的现代 Web 开发实践》全文)

还有一个对应的 PDF,先不放了。

技术细节#

三个部分:

  • 整体回顾 “传统开发” 并找到瓶颈
  • 为了解决问题,发生的变化和趋势
  • 字节跳动的技术产出,称之为 “引擎升级”

字节这样的大厂里项目多,因为体量大,前端的问题暴露得更明显。

传统开发和问题#

下图是传统的开发技术栈,读图。

image.png

图中从下到上,代表抽象层从底层到顶层。最右边三个方块,都从最下面延伸到了最上面,代表它们都是端到端的解决方案,跟左边的体系,以及彼此之间,都是割裂的,包含大量重复,这次分享因为时间关系,不讲这几个部分。

蓝色的方块都是代码层面的,绿色的方块都是平台层面的。

这套技术发展到趋于停滞,就表现了很多问题。

  • 脚手架。有结构有示例

  • 有的文件必须改,改完之后才符合实际的项目结构

  • 多个项目同一个脚手架生产,各自发展,最后发现差异会比较大,难以复用

  • 脚手架迭代了,不能对原来的项目带来好处

  • 项目模板

  • 不同项目,模板不同,会越来越多

  • 模板不断发展各自沉淀,有的会停止更新

  • webpack 包装

  • 避免人人都要配置 webpack,会进行封装、包装,惯例

  • 包装的抽象程度有限,配置的 api 五花八门,一复杂就还要改。规范太多

  • 编译工具演进。除了 webpack,还有更多选择。称为 js 第三纪元。具体技术细节略过

  • 除了 dev build 还不够,下图很神,一列一列地看,这里不展开,表达的意思是前端还有很多工作,dev 和 build 是不够的。而且也管不到项目的底层服务。

图中这段话来自 Redux 作者 Dan 写的一篇文章,讲 JS 工具的配置 API 的设计,这段话就是在讲这方面的抽象和设计能带来巨大的影响,有很高的门槛,需要非常严肃专业的对待,这种工作也需要高度的集中,而不是交给「Webpack 工程师」们搞各种各样的「规范」。

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

image.png

接上

  • 前端工程化。只局限到代码层面,还到不了平台层面。(隐隐约约 serverless?)

  • react 的问题。

  • 选哪个具体技术框架。他们整逐渐统一到 react,理由是社区生态、应用规模、设计演进、设计趋势。这块没啥意思,有结论就行了。

  • react 离框架功能不全

  • 去看框架级别,比如 nest,提供的后端为中心的开发,和普通 web 项目的前段关系不大,引入 node 门槛更高,从 node 到 bff 等,略过

  • 核心是:分层 + 关注点分离(下面绝对有 serverless)

参考链接:

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)

下图,绿色部分是底层服务。黄色和蓝色是前后端。

image.png

至此,第一部分结束。

问题都抛出来了,如何解决,这是第二部分内容。

改变的趋势#

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

技术在进行演变

image.png

先看蓝色的:

在看橙色的 未完待续。

  • JAMstack

  • j,js -> CSR 对应单页

  • A, apis -> BFF ContentMesh

  • Markup SSR/SSG serverless

  • SHAMstack

  • Static Hosting -> serverless

  • Apis+js

  • Markup

  • STAR app

  • meta-framework

star 是在上面两个的基础上组合

image.png

国外技术社区提到 meta-framework ,

本质上是把 JAMstack 和 STAR 强调的部分加起来,用以客户端为中心的、包含更上层抽象的、通用的 Web 框架的形式,整体系统的满足这些需求,抽象、简化这里面的各种模式。

还放了一张 s 曲线,来说,ui 框架趋近稳定之后,基于 react 做整合。形成新的主流技术。

参考资料

可以进入下一话题了,就是传统开发,变成现代 web 开发,这叫范式转移, Paradigm shift ,各种旧模式向新模式转换。

定义现代开发#

来定义了

「现代 Web 开发」实现了在同一套程序里一体化开发,在开发、调试、运行、部署等环节都能做到「无服务器化」,让前端技术栈的开发者更容易成为真正的「产品开发者」。

参考链接

进入第三部分

字节跳动最佳实践#

回看,传统和现代开发

image.png

image.png

图中绿色代表的平台化基建,占比超过蓝色代表的纯代码层面的基建。

image.png

image.png

生成了项目,完全是在线,并且可以一键预览。

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。