查看原文
其他

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

金天 code秘密花园 2022-09-17

欢乐老时光 — 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

  • 前端游戏化:另外一个大洞

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

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

关于本文
作者:@金天
原文:https://kimtoday.medium.com/ 前端工程師都在忙些什麼 - 39a066128a

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存