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

十年来，波澜壮阔的移动互联网浪潮促进了 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 端复杂的数据需求的同时，尽可能避免服务端内部逻辑复杂度的无序增加。

工程化与微前端