技术分享前端新技术发展应用思考Word格式文档下载.docx

1、多端统一发展移动互联网时代浪潮下，互联网企业开始大范围将业务进行移动化转型，前端应用开始发力。“大前端”Web一统的时代到来，前端多端开发技术方面的运用迭代呈现出空前的繁荣，移动端应用由于跨Android、iOS平台导致的成本问题，诞生了Web App、Hybrid App等跨平台兼容方案，以微信为首的平台化小程序的崛起与成熟应用，业务应用开始横跨PC Web、APP、小程序、H5公众号等多端化发展。“微前端”架构伴随业务规模的迅速增长及应用体量的愈加庞大，前端应用逐步复杂化，性能体验要求不断提高，也越来越难以维护。为了保证应用的快速迭代、易于管理和可扩展性，前端应用开始尝试分治，主要围绕组件

2、化、模块化、前后端分离等方案开始进行应用架构设计。前端工程师们开始借鉴后端服务化的架构理念，并思考如何应用于浏览器端，于是“微前端”架构的思想被提出来。前端工程化随着前端工程师团队不断扩大，那么如何开发协作、管控项目质量、保证项目可维护性成为新的挑战。于是前端软件工程问题引起重视，业内开始推进前端工程化，建立前端规范的工作流程、统一的开发体系，并与后端进行整合，完成整个项目的持续集成CI自动化工具链，以此达到降低对于复杂项目的治理难度。设计理念不断进化与迭代多端并进的时代，用户体验不断被强化与重构。新的设计理念层出不穷，从UI到交互，再到数据可视化等等，被越来越多的倾注到产品之中。近几年头部互

3、联网公司逐步开源了具有通用性、科学性、理论性基础的设计语言规范，典型的如Google的material design，旨在为手机、平板电脑、台式机和“其他平台”提供更一致的用户体验；还有阿里的为服务企业级中后台产品提炼的交互语言Ant Design等。（二）前端技术应用实践挑战尽管趋势指明了未来前端技术的发展方向，然而在实践中还存在诸多挑战：多端统一发展的技术方案还不太成熟由于业务的多端化开发需求，很多时候都是希望通过一次开发，多端运行，屏蔽PC Web、APP、小程序、H5、公众号等多端开发技术的差异性。虽然大公司开源了一些技术方案，但并不是非常成熟，需要继续实践与探索。架构如何适应大规模复

4、杂企业应用当后端采用微服务架构时，会根据业务需求进行微服务化拆分。通常情况下，前端应用作为一个整体的单页应用程序（SPA）与后端开展数据服务交互，进行前后端分离。而这种研发模式的变革，让原本属于后端处理的控制层复杂的业务逻辑前移到了前端进行处理，导致前端应用的体量增大，复杂度也随之大大提升。在一个大公司里，往往面对的是一个业务模块众多、特性丰富、功能强大的系统场景，如果前端还是一个单体的单页应用程序，并且由独立的前端团队负责研发，很难想象如何保障其研发的效率性、扩展性、维护性及稳定性。这对架构设计提出了严峻的挑战，需要思考如何解决协同开发、工程化持续集成、上线部署、增量发布等难题。前端基础架构

5、如何应对技术的不确定性前端技术不断创新与颠覆，为了应对日趋复杂的应用场景以及让浏览器端Web达到近乎Native应用的体验，Angular、React、Vue等主流前端应用开发框架被创造出来，颠覆了风靡一时的JQuery脚本库，诞生了如路由、虚拟DOM、状态管理、UI组件化、MVVM模式等新技术概念。为了让Web变的更好，前端朝着高性能编程，渐进式网页应用体验，面向未来的组件化标准以及更好的开发体验等各种技术方向上开始迈进。浏览器标准ES7、Web Components、PWA（Progressive Web Apps）、WebAssembly、HTTP2等先进特性逐步在主流浏览器上推进和完善

6、；Google技术团队基于WebComponents界面组件化规范研发了Polymer技术方案，并且开源在了GitHub。新技术不断涌现，如何让基础架构能够去适应这些变化，在渐进式引入新技术的同时，降低对上层系统的影响范围成为我们探索的方向。开源的设计如何进行体验升级、满意度提升开源设计理念和技术实现方案，值得借鉴与学习，它们大多数可以直接应用在企业内部或者互联网产品中。对于软件服务提供商而言，项目往往以客户的体验为主，个性化定制的需求无法避免，所以并不是直接引入这些设计方案就能达到预期，需要基于设计方案准则提供一定的扩展能力，方便灵活的定制，且定制之后的主题风格应该具备独立性、可升级及可替换

7、。因为后期可能还要面对多系统集成的情况，即使不能保障与外部厂商集成的风格统一，至少自身厂商交付的系统应该能保持风格一致。如果能实现这套运转机制，那么体验升级的路将会越来越通畅。（三）应对策略基于上述实践思考，前端技术团队充分吸收并利用开源方案技术生态，逐步完善并内化为自己的体系生态，满足公司特定业务需求，形成了平台前端产品系列，应用领域包括桌面PC、移动APP、小程序、公众等，支撑丰富的业务需求；研发领域包括技术架构、组件仓库、工程化等来实现工作的流程化；工具化包括脚手架、生成器、定制器等，支撑个性化快速开发需求。图1：前端开发体系建设示意图开源技术方案选型原则越先进的技术并不就是越好的技术，

8、而应该选择最合适的技术。基于业务项目开发诉求，最初在布局新一代技术升级时，重点基于以下几点的考虑：1）引入开源成熟的技术方案，节省人力成本；2）技术方案生态丰富，有更多成熟组件库可以利用；3）前后端分离的开发需求，迎合后端微服务化趋势；4）开发模式遵循MVVM分治的开发理念，提升可维护性；5）支持单页应用开发，让Web拥有类似于客户端native本地化流畅的用户体验；6）简单好用，降低开发人员的学习成本。基于Vue技术生态的前端技术应用框架图2：前端技术选型示意图omuse.js基础框架计划整合一系列的现代化前端技术，涵盖开发框架、编译构建、质量测试、运行调试等各研发环节的功能特性，并提供插件

9、化的开发机制。基于框架的插件机制，外部可以获得扩展项目的编译时和运行时的能力，通过插件扩展有针对性的调整，以适应自己的项目需求。o工具库预先开发最佳实践工程模板，如企业PC端，移动混合APP等前端应用。通过脚手架选择模板创建生成新的项目，帮助业务开发人员快速进行项目的开发工作。o通用技术组件利用muse.js核心的插件机制扩展出企业级应用常见的基础通用性技术组件，例如安全、通讯、缓存、日志、授权、配置、异常等技术组件。这些组件的诉求是长期存在的，未来也不会消失，独立出来不仅可以积累以迭代的形式发展，也能反哺应用在其他通用技术平台的前端领域。oUI组件库Muse UI体验层组件化产品，满足PC

10、Web桌面端应用开发的vmd组件库和移动端H5混合APP应用开发的vmm组件库，降低开发难度，提高开发效率。o桌面和主题目前桌面框架可以定制布局、主题切换和主题的深度定制，例如根据某一项目界面设计规范进行皮肤改造需求，也可基于基础样式（muse ui vmd 桌面版）进行局部微调。（使用者可以是体验设计部门人员或者开发人员）o产品原型RP提供Muse UI桌面版，移动端rp原型库，方便进行业务原型设计。o平台前端官网集中入门指导、常见问题FQA、设计规范、技术成果、产品方案、基础设施等几大方面的能力资源，建立前端支持官方入口，通过线上线下配合互补，提升服务效率与质量，也为前端长期良性发展提供基

11、础保障。（四）未来展望前端应用可视化搭建对项目类型多终端化应用场景、技术框架，主题风格、桌面布局、基础UI组件、业务组件及公共界面等需求进行标准化抽象，尝试最大化代码复用，最终通过可视化向导的方式进行项目搭建，进一步提升研发效率。图标库、主题库、桌面模板库资源中心沉淀前端开发常用界面资源，全方位满足业务对界面的开发诉求，更大化节省人力资源成本，在提高效率的同时，提供优质的用户体验。性能监控后期大规模新技术引入、业务复杂度持续提升等都将给上线应用的稳定性提出了更高的要求，充分利用浏览器内核提供的关于性能方面的API接口进行通用化工具改造，逐步丰富功能特性，帮助运维人员有效预警，同时支持开发人员问题定位。【结束语】在平台前端团队积极的探索下，前端技术应用目前取得了阶段性的成果，后续将持续引入新技术，完成产品迭代或者推出新的产品，助推技术升级和架构演进，并寻求在传统企业应用端以及互联网应用端的价值更大化。