前端工程师都在忙些什么？

Posted 2022-08-02 前端开发博客

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端工程师都在忙些什么？相关的知识，希望对你有一定的参考价值。

当看到禅意花园这个名字的时候还挺有年代感的。刚好前几天看到一篇写于2020年的回忆式文章，有兴趣可以看看。

TLDR -

入门前端 — 做页面、接资料

进阶前端 — 做流程、搞优化

资深前端 — 做系统、弄架构

欢乐老时光 — 2007–2009

在那个年代没有前端工程师这个职位，而从事网页相关的工程师一律通称 Web developer，最主要的工作，就是把 PSD 设计图，转成 html+CSS，也基于当年的浏览器限制，页面都使用拼图状的逻辑来思考，所以大家都说 “切图”。

但世界的另外一个角落，已经有一些暗涌，W3C 积极的推广 CSS 和 HTML，并强调其编辑能力极高，远超出你能想像的，CSS Zen Garden 以行动证明了这一点，身为设计师的 Dave Shea 用行动告诉大家 CSS 可以怎么把玩设计，在不换 HTML 的结构下，仅仅一份 stylesheet 就能让网站改头换面。

然而浏览器的进化速度没有跟上，当年有个著名的小游戏，Acid2，这个游戏可以测试浏览器是否通过网页标准化，然后这游戏一推出的时候，无人通过，大约在 2008 年，全部浏览器正式通过测试，表示浏览器已经就位了。

在同一个时候，世界上第一部支持标准网页的移动设备出现 ——iPhone；伟大的 jQuery 也几乎同一时间，发布 1.1 稳定版。

贾伯斯高举 iPhone 的瞬间，不仅仅是意味著一个划时代的变革即将来临，也间接的掀开了前端世界的窗纱。

而在那个朴实无华的年代，加个 jQuery 就是一个高级的表现了。

混合开发，前端生态 — 2009–2010

Github、npm 凝聚了世界各地的开发者，在一个春秋的时间，就发布了好几个影响力至今未减的开源项目，即便部分项目已经被后来者替代，但无疑不是延续他们当时的精神。

Backbone.js 提供了一个全新的网页开发体系，实现真正意义上的 SPA。

前端开始进行 package 管理，表示可以更有效率的迭代开发和协同开发；css preprocessor 出现，当中最多人使用的是 SASS 和 Less，纯 CSS 渐渐淘汰。就连我当年跟同事说

“我写 CSS 就很快了，有必要用它吗？为什么？”

我为当年的无知道歉，因为我用了之后，就回不去了。

当时有人预言，基于 NodeJS 将会改变整个游戏规则，JS 的能力将会越来越强大，这句话在未来的几年也被验证无误。

然后在这个时候，集成全部 knowhow 的人，他们都有一个称呼，叫做 “前端工程师”

而那时候常见的前端领域的事有：

基于 AngularJS/ RequireJS / Backbone js/ Knockout js / 这些框架实践 SPA，完成前后端分离。
跨平台开发，PhoneGap 是这行业的元老。
和设计师合作，量产模板。
无数 NPM 模块量产中

这个时期流行一个设计图，附上三个设备的预览图（帅

即便如此，但前端工程师的产出和以前差不多，就是前端工程师有了许多工具增加开发效率；这个时候已经开始做跨平台的事了，只是因为效果不如预期，所以并没有因此而变成主流，但萌芽期就看出大家的野心。

而在这个年代，大部分有前端体系的团队，都不会选择传统的网页开发模式，从此埋下日后前端的技术债。（逃

开发体系，模块化 — 2011–2013

既然有了那么多工具，工程师就开始变懒，没有最懒，只有更懒，我们连压缩图、concat 文件、复制文件这些事都不想做了，于是出现了 Grunt 和 Gulp 这些 Task runner，它的出现又掀起了一系列的开发环境风气，从此前端工程师真的只需要专注在程序代码上，其余的事，都自动化完成。

2012 年 5 月，Chrome 正式超越 IE 市场占有率，大家开始可以脱离 IE hack 恶梦。

2013 年，React 发布，Facebook 全部进入这个前端宇宙，有别于 AngularJS 的观点，它是一个完全 View 端的架构。

在这个年代，人们都在吵架，吵些什么？随便举个栗子，

Browserify vs RequireJS
Gulp vs Grunt — Less vs sass
React vs AngularJS

每个关键技术需求背后，都有超过一种选择，这就是之后有了那张，https://roadmap.sh/frontend 的选型图的由来。

当大家还在观望的时候，国外说得出名字的科技公司已经引入的 JS 体系并完成产品化，这是一枚强心针，从此前端工程师需求大增。

而在这群 SPA 大战另外的角落，全球 CMS 大战， Wordpress 3.0 在以市场占有率 30% 领先老牌 Joomla、Drupal，这意味背后的模板市场需求规模之大。

仿原生手机框架 Sencha Touch 出现，虽然它并没有成为主流，但它是仅次于 jQuery Mobile 以外的选择，它们都确实做到了仿真度极高的 Mobile web （app 体验），它们给人带来了足够多的想像力和信心。

大名鼎鼎的 Bootstrap2 发布，可能很多人都不知道，当时它也有比较对象，Foundation，他们两者都有强大的使用群。

Webpack 出现后，接管了大部分的 task 和打包工作，渐渐成为最多人用的 bundler。

而在这个时候，细分化开始出现，而每个开发团队又会选择自己的喜好和配置，就有了后来的 web Boilerplate，通常是一套设置好的开发环境。

而这个阶段的前端….

静态网页 / CMS 模板 — gulp/Grunt + sass/less/css modules + jade/HAML + browserify
React — Webpack + React +babel + es6 + sass/less/css modules
AngularJS — 嗯… 自成一体
MEAN stack — MongoDB, Express, AngularJS, and Node.js（全栈始祖？

当然这不是所有，而以上四种刚好是我比较熟悉的，当时有关前端宇宙的资讯已经大到我已经无法全部关注，我只能挑选我有兴趣的来继续了解。

数据流，体验最佳化 — 2014–2016

NPM 统计共有 11 万个 packages，前十大使用国家为：美英印德法加中俄日巴，官方估计中国用户比实际的更多。vue 基于巨人肩膀诞生，开箱即用的特性迅速崛起；GraphQL 发布。

前端宇宙的各个宝石视乎都收集完毕，但就是差了一点，SPA 的痛点就是数据分散，常常不知道自己的数据流向去哪里了，又或者低效率的 API 沟通

PWA 被提出，它要解决的问题就是用户体验，尤其是手机的用户体验。而这项领域背后的是一连串的技术坑，你以为他是一个名字就以为只有一个坑吗？错了，PWA 只是一个通称。

数据既然是重点，那肯定需要有人来解决，于是 Redux 横空出世。与其对应的有 MobX，他们两者都是处理数据（状态管理系统），具体差别是什麽我不清楚，但按照语法来看，MobX 的的设计理念是 functional programming，细分一点是 Functional Reactive Programming，它是一个 Immutability 的数据流，每次操作都会回传具备 Monad 特质的组件。相比之下，Redux 的数据相同是 Immutability，但理解起来就简单多了。

vue 基于巨人肩膀诞生，开箱即用的特性迅速崛起，从此大量新前端投入，跳过了环境建设的阶段，因此对环境建设相关的领域陌生。

混合型框架出现，意思是建立在单个或数个框架以上的框架，例如 Next。

从此你要学习 A -> 其实它是从 B + C + D 而来，而 B 是从 E + F 而来；简化了开发环境，甚至不需要自行建设环境。

WebAssembly 2019 列入 W3C 标准；CRA 官方支持 TypeScript ；Svelte 成为六大主流之一；JAMstack 成为主流开发之一。css in js 出现，即将统一前端宇宙。

除了以上的那几点以外，前端还在…

React Native 2015/ionic 2013 发布，最接近 APP 体验的前端 APP 开发框架诞生，前端写 APP 的时代来了。
PWA / AMP 是网站标准改善作业项目，弄一弄又是几个月过去了。
JS 无性别（型别的时代结束，typecheck 正夯，弄一弄又是几个月过去了
Svelte 成为六大主流之一，人们厌恶了 virtual dom 了吗
babylonjs 微软发布 3D 框架，除了它还有老牌的 three.js，对啊，前端可以写 3D 的网页游戏。
TensorFlow js，Google 的 TensorFlow 推出 JS 版本，嗯，你可以来玩一下 AI 了。
JAMstack，又是一种开发型态（其实就是 2013 年出现的那种静态网页的进化版）
Serverless 和前端有什麽关係？那麽 Front-End Ops 和 BFF （backend for frontend）应该就跟前端有关了吧。

这个时候，前端已经涉及网页、移动端、游戏、AI、优化、维运等等领域。

可免则免，快狠准 —2017–now

前端框架进入收敛期，现在追求精简化开发流程，轻量化 APP 出现，JS 跨平台成型。混合设计和开发能力的设计师出现，比较火红的应该是 Netflix，基于他们的产品特性和市场需求，逼的他们把 UI 工程玩的非常极致。

轻量化是因为经过岁月的洗礼，大家也尝试过了各种开发模式之后，保留了最具作战力的生产方式，而根据移动 APP 的饱和，MiniAPP 首次在宇宙中露面，不料马上引来浪潮，至今 MiniAPP 玩得最透彻的应该就是中国。

JS 跨平台已经不是梦，在电视机上 ReactAPP，在设备裡跑 Node.js。

这个时期出现的前端框架大多数都是面向业务需求，他们并没有为前端宇宙带来多少波动（相比之前那几次）更多的事，各家科技巨头纷纷推出自己的前端体系，当中跟非工程师的人接触最多的应该是 Bot.

Bot 市场是一块大饼，每一家通讯软体无一不推出自家的 Bot。

Electron 推出，用 Web stack 写出 desktop APP 的时代来了；Static site generators 不少于 10 种；Google 推出 puppeteer，是想连测试领域都加入吗；WebAssembly 跟刺客一样，在 WebAssembly 2019 列入 W3C 标准，但至今也没有看到它有多大的动静，但大家对他的评价都预期的好。

CRA 官方支援 TypeScript，未来的 JS 是不是都会迈向这个方向，我想答案呼之欲出。

我刚刚不是说了，有人在 201x～2015 年之间埋下了许多前端技术债，那是很合理的，因为当时并没有明显的主流，如果维护者没有是时刻保持框架的完整性和跟进进度，很容易在这个时候就陷入无法升级的困境。

为了避免这种情况，有一种开发体系应然而生 —— micro-frontends。实际上它也已经不是新领域，甚至它已经实践在产品上行之有年，例如 Spotify、Ikea、淘宝等都已经大量使用这种开发体系。

未来展望

对于成为一名前端工程师可以做得事情太多了，以上我举例的，都只是我粗浅认知中的冰山一角，

前端 + 设计：D2C（Design to Code）领域，这类型的前端专注在把设计图有效转为 Code，可能需要知道的技巧包括 AI、设计、优化、视觉化。比较知名的玩家如 Wix、淘宝、squarespace。
一码多端：跨端开发从 PhoneGap 开始就没听过，目前主流的玩家有 Flutter，一套程序代码跑在 APP、web、desktop 上。
PHA/PWA/Hybrid app：跟以上的差别是，这类型的体系不追求取代，讲求相容，通过混合开发的模式达到最佳的体验和效果。
去框架化：设计要考虑的应该缩小到组件的尺度上，讲求不依赖框架的组件设计，欢迎来到 bit，
micro-frontends：你有没有想过如何管理超复杂的 SPA？不妨试试看分开管理，会变得比较简单，提示，这是一个未知的黑洞。
优化工程：这是一个加分项目，优化工程涉及好几个领域，包括 UI 工程、frontend devop、开发环境建置等等，是一个综合技。
前端视觉化：顾名思义，看 demo
前端游戏化：另外一个大洞

最后附上一张前端技能树，你会发现，技能树基本上就是前端的历史，要当个前端我觉得最起码每个历史痕迹都稍微踏过一遍，这样未来对于你选择技术时能有更好的判断。

而且很重要很重要的一点事，每个技术背后，要解决的问题是什麽，其实都有它的原因，它的原因都很直觉，不用想的太深奥，别盲目追求技术。