数据浪潮之间的前端工程师

本文是架构师 2018-10 月刊的卷首语，归纳于自笔者的技术之路系列文章，也是对 现代 Web 开发基础与工程实践 中的内容提点总结。

数据浪潮之间的前端工程师

十年来，波澜壮阔的移动互联网浪潮促进了 Web 技术的迅猛发展，随着浏览器性能、网络带宽等基础设施的提升，Web 也能够承载起包含复杂交互、可视化、计算逻辑需求的富客户端应用。同时 RN, Weex, 小程序为代表的混合式开发日趋成为与 Android、iOS 原生开发并肩的开发模式之一；而 VR, AR, IoT 等新的交互方式或者媒介也正步入消费级市场，原本前端之间的隔阂逐渐消亡，我们慢慢进入了大前端的时代。笔者认为大前端不仅仅是横向地指泛 GUI 的接入端，纵向来看基于 Node.js 的全栈开发、中台化背景下的 BFF 模式，微前端架构等也是大前端的有机组成，也给予了前端工程师更广阔地舞台。

DT 时代

繁多的互联网接入端也催生了海量数据的产生与富集，开启了所谓的 DT 时代；我们利用云计算、人工智能、深度学习等手段分析数据、利用数据，将数据作为燃料，赋能新的商业模式。算法、数据与工程是优秀的智能化产品不可或缺的组成部分，前端作为与数据的产生源头--用户最贴近的部分，也在未来全连接的架构里迸发出更绚烂的火花。

前端首先能够通过埋点、监控等方式，采集到用户行为、偏好、应用运行状态等丰富的数据，我们团队(阿里南京 NUE)也自研了高性能 Web 实时录屏与回放的产品，赋能客户服务的体验提升与前端开发者的线上调试。基于数据与算法，前端也可以设计更好地人机交互模式，譬如人脸识别的登录方式、智能问答客服、智能音箱的语音控制；数据可视化也是典型的前端与数据水乳交融的领域，ECharts, G2, D3, Three.js 等框架允许我们更便捷、友好地、深刻地展现统计数据、关系数据、地理空间数据、时间序列数据与文本数据等多源异构数据集。此外，TensorFire, TensorFlow.js 等深度学习框架利用客户端的 GPU 计算能力， pix2code 或者 SketchCode 利用算法来快速实现原型界面，Guess.js 能够帮助优化构建好的包体与智能添加预抓取策略。

值得一提的是，近几年区块链技术的爆炸性发展也促进了 Web 3.0 概念的思辨与实践，IPFS, Ethereum dApp 等工具或者开发框架允许我们便捷地编写去中心化的 Web 应用。Web 3.0 提倡以人为本，看重隐私，反垄断网络，旨在更开放的网络上进行集体贡献并实现共享利益，这也给予了前端开发者更多样化的未来。在 DT 时代，我们或许不能站在浪潮之巅，但是随波逐流顺势而下也可以找到自己的位置，或高或低地翱翔于天。

数据流驱动的界面

数据的核心操作是存储与计算，传统的 Web 应用因为单线程与离线不可用性往往是即用即走，而 PWA 这样的应用设计模式，提倡使用 Service Worker 添加离线支持，充分利用 IndexDB, CacheAPI 等进行灵活地数据存储与检索，并且给予用户贴近原生的体验。另一方面，Web Worker, WebAssembly 等亦从不同的方面释放或者增强前端的计算能力，不仅使得 Web 中运行高性能要求的应用或动画，也可以借鉴边缘计算的理念，未来将更多地数据聚合、计算的逻辑前移。感性地说，当数据逐渐活跃、富集，如百川汇海，自然需要流动起来。

广义的数据流驱动的界面有很多的理解，其一是界面层的从以 DOM 操作为核心到逻辑分离，其二是数据交互层的前后端分离。在 jQuery 时代，我们往往将 DOM 操作与逻辑操作混杂在一起，再加上模块机制的缺乏使得代码的可读性、可测试性与可维护性极低；随着项目复杂度的增加、开发人员的增加与时间的推移，项目的维护成本会以几何级数增长。随着 ES6 Modules 的广泛应用，我们在前端开发中更易于去实践 SRP 单一职责原则，也更方便地去编写单元测试、集成测试等来保证代码质量。而像 React、Vue 这样现代的视图层库为我们提供了声明式组件，托管了从数据变化到 DOM 操作之间的映射，使得开发者能够专注于业务逻辑本身。并且 Redux, MobX 这样独立的状态管理库，又可以将产品中的视图层与逻辑层剥离，保证了逻辑代码的易于测试性与跨端迁移性，促进了前端的工程化步伐。

近两年来随着无线技术的发展和各种智能设备的兴起，互联网应用演进到以 API 驱动的无线优先(Mobile First)和面向全渠道体验(Omni-channel Experience Oriented)的时代，BFF 这样前端优先的 API 设计模式与 GraphQL 这样的查询语言也得到了大量的关注与应用。GraphQL 是由 Facebook 开源的查询语言标准，包含了数据格式、数据关联、查询方式定义与实现等等一揽子东西的数据抽象层。GraphQL 并不能消融业务内在的复杂度，而是通过引入灵活的数据抽象层，尽量解耦前后端之间的直接关联或者阻塞；在满足日益增长不断变化的 Web/Mobile 端复杂的数据需求的同时，尽可能避免服务端内部逻辑复杂度的无序增加。

工程化与微前端

编程生态往往会经历三个阶段：涌现大量工具的原始阶段、复杂度提升后引入大量设计模式的框架阶段、具有更好的团队组织与协调机制的工程化阶段。大部分时候我们谈论到工程化这个概念的时候，往往指的是工具化；工具的存在是为了帮助我们应对复杂度，在技术选型的时候我们面临的抽象问题就是应用的复杂度与所使用的工具复杂度的对比。而工程化，即是面向某个产品需求的技术架构与项目组织，致力于尽可能快的速度实现可信赖的产品；尽可能短的时间包括开发速度、部署速度与重构速度，而可信赖又在于产品的可测试性、可变性以及 Bug 的重现与定位。

在 DT 时代中，很多公司也开启了大中台，小前台的战略，即在中台中完成一系列可开放能力的聚合，赋能前端业务，加速迭代开发。工程化是中台化的基石，通过制定标准化的规范、基于元数据的可配置业务流等，完成前后端的业务衔接；而统一的服务中台又是在复杂业务场景下实现微前端/微服务的保障。微服务与微前端，都是希望将某个单一的单体应用，转化为多个可以独立运行、独立开发、独立部署、独立维护的服务或者应用的聚合，从而满足业务快速变化及分布式多团队并行开发的需求。微前端的落地，需要考虑到产品研发与发布的完整生命周期；我们会关注如何保证各个团队的独立开发与灵活的技术栈选配，如何保证代码风格、代码规范的一致性，如何合并多个独立的前端应用，如何在运行时对多个应用进行有效治理，如何保障多应用的体验一致性，如何保障个应用的可测试与可依赖性等方面。

最后，对于个人而言，随着团队技术栈的相对稳定，关注点也会逐步从组件库的建设变化为基础设施的建设，从考虑选择怎样的技术栈到如何在立足某个技术栈更好地服务于业务规划。这个知识爆炸与终身学习/碎片化学习为主的时代，我们要进行更有效地学习，从知识广度，编程能力与知识深度等方面提升自己。