当前位置: 首页 > Web前端 > HTML5

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

时间:2023-04-04 23:30:03 HTML5

本文为Architect2018-10月刊序言。是作者技术之路系列文章的总结,也是对现代Web开发基础和工程实践内容的总结。数据浪潮之间的前端工程师十年来,波澜壮阔的移动互联网浪潮推动了Web技术的飞速发展。随着浏览器性能和网络带宽等基础设施的提升,Web也可以承载复杂的交互、可视化和计算逻辑。需要的富客户端应用程序。同时,以RN、Weex、小程序为代表的混合开发正日益成为与Android、iOS原生开发并驾齐驱的开发模式之一;VR、AR、IoT等新的交互方式或媒体也正在进入消费市场。前端之间的壁垒正在逐渐消失,我们慢慢进入了大前端时代。笔者认为,大前端不仅仅指横向泛GUI的接入端,还指基于Node.js的全栈开发。给了前端工程师更广阔的舞台。DT时代的各种互联网接入终端也催生了海量数据的产生和丰富,开启了所谓的DT时代;我们利用云计算、人工智能、深度学习等手段分析数据,利用数据,以数据为燃料赋能新的商业模式。算法、数据、工程是优秀智能产品不可或缺的组成部分。前端作为数据产生的源头——离用户最近的部分,也将在未来的全连接架构中擦出更加灿烂的火花。首先,前端可以通过埋点、监控等方式采集用户行为、偏好、应用运行状态等丰富的数据。我们的团队(阿里南京NUE)还自主研发了高性能的网页实时录屏回放产品,为前端开发者赋能提升客服体验和在线调试。基于数据和算法,前端还可以设计更好的人机交互方式,如人脸识别登录方式、智能问答客服、智能音箱语音控制等;数据可视化也是一个典型的前端与数据融合的领域,ECharts、G2、D3、Three.js等框架让我们呈现统计数据、关系数据、地理空间数据等多源异构数据集,时间序列数据和文本数据以更方便、友好和深刻的方式呈现。此外,TensorFire、TensorFlow.js等深度学习框架利用客户端GPU算力,pix2code或SketchCode利用算法快速实现原型界面,Guess.js帮助优化构建包体,智能添加预取策略.值得一提的是,近几年区块链技术的爆发式发展也推动了对Web3.0概念的思索和实践。IPFS和以太坊dApp等工具或开发框架使我们能够轻松编写去中心化的Web应用程序。Web3.0提倡以人为本、注重隐私、反垄断网络,旨在在更开放的网络上集体贡献、实现共享,这也赋予了前端开发者更加多元的未来。在DT时代,我们或许无法站在浪潮之巅,但我们也可以顺势而为,翱翔天际,或高或低,找到自己的定位。数据流驱动接口数据的核心操作是存储和计算。由于单线程和离线不可用,传统的Web应用程序通常是随时可用的。而PWA等应用设计模式提倡使用ServiceWorker加入离线支持,充分利用IndexDB、CacheAPI等进行灵活的数据存储和检索,给用户接近原生的体验。另一方面,WebWorker、WebAssembly等也从不同方面释放或增强前端计算能力,不仅可以让高性能应用或动画在Web上运行,还可以借鉴边缘计算的概念,以后聚合更多的数据,计算的逻辑前移。从感性上讲,当数据逐渐活跃和丰富起来,如百川大海,自然需要流动。广义上的数据流驱动的接口有多种理解。一是界面层从以DOM操作为核心到逻辑的分离,二是数据交互层的前后端分离。在jQuery时代,我们经常将DOM操作与逻辑操作混淆,再加上缺乏模块机制,代码的可读性、可测试性和可维护性极低;随着项目复杂度的增加,开发人员时间的增加和时间的推移,项目的维护成本将成倍增加。随着ES6Modules的广泛应用,我们在前端开发中更容易践行SRP单一职责原则,也更容易编写单元测试、集成测试等保证代码质量。React和Vue等现代视图层库为我们提供了声明式组件,这些组件托管从数据更改到DOM操作的映射,使开发人员可以专注于业务逻辑本身。此外,Redux、MobX等独立的状态管理库可以将产品中的视图层和逻辑层分离,保证逻辑代码的易测性和跨端迁移,促进前端工程化的步伐。近两年,随着无线技术的发展和各种智能设备的兴起,互联网应用已经进入了API驱动的无线优先(MobileFirst)和全渠道体验(Omni-channelExperience)时代定向)。API设计模式和GraphQL等查询语言也得到了大量的关注和应用。GraphQL是Facebook开源的查询语言标准,它包含一个数据抽象层,包括数据格式、数据关联、查询方法定义和实现等。GraphQL并不能消解业务固有的复杂性,而是引入了一个灵活的数据抽象层,试图解耦前后端之间的直接连接或阻塞;在满足Web/Mobile端不断增长变化的复杂数据需求的同时,尽可能避免服务器内部逻辑复杂度的无序增加。工程化和微前端编程生态往往会经历三个阶段:大量工具涌现的原始阶段、复杂度增加后引入大量设计模式的框架阶段、团队组织更好的工程化阶段和协调机制。大多数时候,当我们谈论工程的概念时,我们经常指的是工具;工具的存在就是为了帮助我们应对复杂性,而我们在选择技术时面临的抽象问题就是应用的复杂性和工具复杂性的比较。而工程是指面向某种产品需求的技术架构和项目组织,致力于尽快实现可靠的产品;最短的时间包括开发速度、部署速度和重构速度,而可靠还在于产品的可测试性和可变性,以及bug的重现和定位。在DT时代,很多企业也开启了大中台小前台的战略,即完成一系列中台开放能力的聚合,赋能前端业务,加速迭代发展.工程是中台化的基石。通过制定标准化规范、基于元数据的可配置业务流程等,完成前后端的业务对接;统一服务中心是实现复杂业务场景保护的微前端/微服务。微服务和微前端都希望将单个单体应用转化为多个可以独立运行、独立开发、独立部署、独立维护的服务或应用聚合,以满足业务快速变化和分布式多业务的需求。应用程序。团队并行开发的需要。微前端的实现需要考虑到产品开发和发布的完整生命周期;我们将重点关注如何保证每个团队的独立开发和灵活的技术栈选择,如何保证代码风格和代码规范的一致性,以及如何合并多个独立的前端应用程序,如何在运行时有效地管理多个应用程序,如何保证多个应用之间体验的一致性,如何保证单个应用的可测试性和可靠性。最后,对于个人来说,随着团队技术栈的相对稳定,重心会逐渐从组件库的构建转向基础设施的构建,从考虑选择什么样的技术栈到如何立足某个技术栈。服务于商业策划。在这个知识爆炸和终身学习/碎片化学习的时代,我们需要更有效地学习,在知识广度、编程能力和知识深度上提升自己。