迈入现代 Web 开发 (一)

前言：7月4日，字节跳动Web开发引擎负责人杨扬（dexteryy）在 GMTC 全球大前端技术大会（北京站）2021 上又搞了一场「跨年演讲」（内容超多的意思），不但现场爆满、超时严重，而且一如既往的讲完之后只要把讲稿和幻灯片拼起来就能发出来，大家可按需取用。
亮点：为了方便大家理解，杨扬（dexteryy）同学为这次分享画了 90 张图（工具是 Keynote），其实在内部版《Modern Web Stack》里有 120 多张图…

第一部分，先整体回顾「传统 Web 开发」范式中的「前端开发」技术和工程体系，有哪些瓶颈问题。

第二部分，对于在这些问题的背后、在这些问题的驱动下，正在发生的转变，做一下归纳和比较。

第三部分，介绍字节跳动在落地和推动这种转变中，发展和建设出的技术体系。对于字节这个「App 工厂」来说，这种发展相当于一场「引擎升级」的过程。

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

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

这套体系是字节曾经的主流，是从业务中自然发展出来的，但随着这种发展趋于停滞，这套技术栈正在同样自然的演变成历史遗留的「祖传技术栈」，其中每个部分都有比较大的瓶颈问题。

虽然跟建筑行业使用的脚手架一样，都是在搭建过程中使用，用完就放到一边，只留下搭完的项目。但建筑脚手架拆掉之后留下的建筑，有一套不能动的钢筋混凝土骨架，而脚手架生成的前端项目，是混杂在一起的样板代码，虽然有文件结构，但可以随意修改，而且因为基建和示例代码混在一起，所以不仅是「可以改」，而且经常是「必须改」样板文件的内容和结构，才能完成真实项目的完整搭建。

另一方面，脚手架本身也在迭代改进，但因为脚手架是一次性的，一用即抛，这些改进不能对原先创建的项目带来好处，引入这些改进的成本，跟从其他项目里引入改进的成本差不多。

图上每个方块，都代表一个真实存在的模板，可以看到这些模板中有大量重复、又不会完全相同的内容，升级维护模板、在模板之间同步技术沉淀，都有成本。很多模板会缺少更新，长期停滞，把成本留给搭建项目的人

这些维度之间的排列组合，要么会导致模板进一步分裂和数量爆炸，每种模板的维护成本更高，应用场景更小，ROI 因此变低，更加倾向于停滞；要么会导致模板对很多维度中的需求，不做考虑，只覆盖小部分需求，对项目开发的支持，局限在比较低的水平。

JS 开发工具从去年开始又出现新一轮更新换代的征兆，有人把这种趋势称作 「JS 的第三纪元」，新范式的项目涌现，开始进入到日常业务的开发实践，很多场景下已经没有 Webpack。

而随着行业和业务的发展，随着前端技术的发展，一个前端工程的完整需求，就像图中一样，会包含蓝色方块代表的整个研发链路的每个环节，以及每个环节下面，绿色方块代表的工程需求。这些都超出了 Webpack 的能力范围。


• 「全球的 JS 开发者已经上千万了」：https://zhuanlan.zhihu.com/p/111204309
  

在另一些情况下，客户端部分比较厚，这种情况下需要的「客户端应用架构」，就像图中右边的蓝色部分，跟左边代表「服务器端应用架构」的橙色部分，是完全不同的，如果使用 Node.js 框架，蓝色部分仍然需要自己摸索和搭建。

在「前后端分离」之后从「后端项目」里独立出来的「前端项目」，使用 Node.js 框架之后，又混入了很重的后端业务逻辑和研发需求。而 Node.js 框架随着发展，本质也越来越清楚：还是服务于专业服务器端开发的，降低不了前端开发者的服务器端开发门槛，这是一个最大的瓶颈。

未完待续

参见《 迈入现代 Web 开发 (二)》

2022.6.3日（长期有效）：打个广告，苏州华为终端BG面向 会招聘人才，Java /C C++ / Python / Javascript 。有兴趣来苏州的同学们 可以加我V 15850277051 ，走内推流程，有问必答！

声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！