【51CTO.com原创稿件】如今，移动终端的崛起已经超过PC，设备、系统以及语言的不统一，致使前端开发的难度越来越大。在具体的实际操作中，前端需要考虑开发几个不同的版本来应对不同尺寸的设备展现，相对而言非常浪费人力、物力。
因此，大前端时代应运而生，一次开发适用所有平台，开发者再也不用为一个APP适配安卓和iOS两种模式而忧心了。目前各家公司都在利用HTML5开发各种需求。另一方面，云计算的迅猛崛起必然导致未来一切云端化，比如操作系统，各种应用程序未来都将云端化。
WOT2018全球运维与技术峰会“前端工程实践”分论坛
那么，如何利用H5技术和云端化功能去解决这些问题？WOT2018全球运维与技术峰会刚刚落下帷幕，在为期两天的会议中，十二个分论坛的四十余位讲师进行了精彩的内容分享，其中，在“前端工程实践”分论坛，主要围绕着前端技术的创新发展、应用实践以及未来趋势等进行经验共享。
抽象语法树在前端的应用
旖美信息技术前端开发经理陈国兴演讲的主题为《抽象语法树与Javascript》，他主要介绍了使用抽象语法树（Abstract Syntax Tree）对前端代码进行重构、Babel转译原理、代码转换等内容。
旖美信息技术前端开发经理 陈国兴
抽象语法树是代码结构转换成一棵类似于树状的结构，然后再去执行。从树根开始，相当于是一棵倒过来的树，然后一直往上延伸。在这个树中，有很多种类型的语言，例如函数、加减表达式等，所以开发者就要把这些语言一一转换。最终，开发者把所学到的语言和语法转换成一棵树，然后再根据这棵树继续做接下来的工作。
首先就是工具，常用的工具包括Astexplorer、Recast、Jscodeshift、Acorn、Esprima、Escodegen、Estree spec等网站。开发者可以把代码贴到这些网站上，就会自动转换成为语法树。
其次是规范，开发者要实现一个编程语言，就需要写一棵语法树。这棵树需要有一个规范，例如函数的类型、名称，都有一套完整的规范。
抽象语法树的应用场景主要包括：代码的升降级、格式化（美化）代码、生成代码结构图、代码压缩优化、代码转换、语言编译（解释）器等。
基于Vue开发微信小程序和原生App
DCloud CTO崔红保介绍了使用mpvue开发微信小程序的技术路线，之后从分析微信小程序的运行时框架出发，讲解如何使用Vue数据绑定替代小程序框架的数据绑定、基于Vue模板（SFCs）实现小程序组件（WXML），以及HTML5 Plus模拟小程序的JS API，从而完成跨平台的App开发。***，还从跨端需求及平台特性的角度，给出了开发者应遵循的开发规范及条件编译方案。
DCloud CTO 崔红保
据介绍，使用mpvue开发小程序，开发者将在小程序技术体系的基础上获取到以下能力：
·彻底的组件化开发能力：提高代码复用性；
·完整的Vue.js开发体验；
·方便的Vuex数据管理方案：方便构建复杂应用；
·快捷的webpack构建机制：自定义构建策略、开发阶段hotReload；
·支持使用npm外部依赖；
·使用Vue.js命令行工具vue-cli快速初始化项目；
·H5代码转换编译成小程序目标代码的能力。
mpvue构建流程是整个项目最核心的地方之一，通过webpack，完成了template转换为WXML和样式转换优化以及其他的若干代码的拼接压缩混淆等操作，最终使之可以运行在微信小程序的环境中。
在核心实现方面，mpvue将小程序的数据绑定功能，托管给了Vue。小程序负责视图层展示，所有业务逻辑收敛到 Vue.js 中，Vue.js 数据变更后同步到小程序。数据更新发端于小程序，处理自 Vue.js，Vue.js 数据变更后再同步到小程序。
基于Vue开发的项目，在小程序上已经可以正常运行了。如果实现一套和小程序一样的App运行时环境，就可以发布成App了。
在iOS上，小程序的JavaScript代码是运行在JavaScriptCore中，是由WKWebView来渲染的，环境有iOS8、iOS9、iOS10。在Android上，小程序的JavaScript代码是通过 X5 JSCore来解析，是由X5基于Mobile Chrome 53/57内核来渲染的。
Weex在魅族小程序中的实践
魅族高级工程师张兴业表示，一直以来，魅族也在思考是否可以根据自己的业务创造一套适合自己的小程序方案，升级现有的动态化方案。也正是基于这种思考，同时结合Flyme系统中应用的重运营属性，魅族基于Weex技术实现了自己的小程序方案。
魅族高级工程师 张兴业
魅族小程序是公司内部的一套无需安装的小程序方案，集成了魅族内部的服务，包括登录、埋点、push、支付等等。经过和微信小程序与快应用的对比，魅族最终选择Weex方案。Weex是一套构建高性能、可扩展的原生应用跨平台开发方案，魅族更关注高性能，快稳省才是重点，这也是魅族选择Weex的原因。
小程序方案主要包括系统级渲染引擎、管理平台、FlymeUI三大模块。
1、系统级渲染引擎：UI渲染、Native 通信、应用数据缓存、系统级渲染引擎；
2、管理平台：应用创建、上架、下架、升级等功能；
·可靠的版本管理系统：包括版本、灰度发布、内测、邀测、回退、更新、推送管理。
·监控度量体系：监控小程序启动时间、页面渲染时间、页面滑动帧率、各种crash日志、流量、电量等问题和指导标准。通过无痕埋点的方式卡顿、不流畅、内存爆掉问题。
·多维度的数据分析系统：包括日活、月活、留存、机型、地域、支持自定义埋点。主要依托大数据能力，通过埋点SDK上报数据，通过小程序id区分。
3、FlymeUI：Flyme风格UI以及相关使用文档，开发辅助项。目前提供了30+的Flyme风格UI，极大提升开发效率。
小程序方案重点优化包括启动性能、长列表、动画、安全、热更新、国际化、夜间模式、部署等。
·启动性能：小程序的启动包括服务端获取应用的信息、CDN下载***文件、小程序初始化、小程序首屏页面渲染四个部分。
·长列表：Week提供的list确实很强大了，提供了loading、refresh组件。
·动画：Week提供了两种动画方案。一是animation module，包括位置、大小、旋转角度、背景颜色和透明度。二是手势交互，包括touch、pan、swipe、longpress。
·安全：主要包括沙盒机制、权限控制、安全域、文件签名、Https。
·关于部署：通过开发小程序管理平台，支持版本内测。
·夜间模式：支持Flyme 7的夜间模式，提供了应用自身的夜间模式方案；
·国际化：结合Vuejs的国际化开发经验，给出了小程序的国际化方案。
此外，Weex也有AI方面的能力，可通过AI模型下发实现接口复用，可实现两个应用场景，例如扫福等固定场景可以使用模型下发；识图，支持LOGO识别、语音识别可以使用云端识别。
滴滴前端工程化思维
滴滴汽车开放平台部前端负责人谯洪敏的演讲主题是《滴滴前端工程化思维》。滴滴作为全球***汽车运营商，不仅能够为用户带来丰厚的收入回报、更自由的选择订单，也能够打通司机与租赁公司的信息不对称。
滴滴汽车开放平台部前端负责人 谯洪敏
在业务高速发展的过程中，滴滴面临的业务系统越来越复杂，包括团队成员越来越多、跨团队协作越来越多、业务系统越来越复杂、框架越来越多、性能要求越来越高、可维护性越来越差等问题。因此，这就需要运用工程化的管理思想来解决，最终使其更加灵活、高效、稳定、简单。
在工程领域，包括分层分域、基础架构、系统、运维平台、数据库、平台中间件、产品线规划、持续交付、规范制定、流程管控。谯洪敏认为，前端所做的工作其实和这些方面都有关系。但有所不同的是，前端更多的是关注模块化、组件化、规范化、自动化、流程规范、仓库管理、性能优化、资源控制（异步、同步、按需、预加载、依赖管理、合并、内嵌）、系统部署、效率工具等方面。
前端首先涉及到的就是组件与模块设计。所谓组件，就是要把Container Components（容器组件模型）和Presentational Components（展示组件模型）进行分治。目前，主流的组件包括antd、element、material、cube-ui、mand-mobile。
其次，就是进行粒度控制，包括UI级、BC业务组件级、Page页面级、Module模块级、项目级。
第三是治理。前端有很多开发业务，在开发一套系统时，很多人都在想一定要考虑到5年甚至10年以后，其实很多系统往往几个月就要重新写。现在很多系统架构特别复杂，没有规范性。因此，开发者在进行大量治理时，***的方式就是根据SPA，进行前端的梳理和规划，而后在接入层给前端的就是一些非常简单、比较规范的API。
所以，前端工程化思维中不能只局限于前端一个领域进行思考，而是要与后端沟通，从全局考虑。如何把API做到好用，如何让业务架构师规划好，这些都是工程化思维。因此，工程化不只是由前端一个人来实现的。
第四是按需加载。前端如何做到性能优化、按需加载、更快的下载是前端工程化思想中非常重要的问题。下载包括三种模式：楼层模式、Code Splitting模式、babel-plugin-import模式。
大前端时代是WEB统一的时代，利用HTML5，不但可以开发传统的网站，做炫酷的网页动态效果，更可以采用BS架构开发应用程序、开发手机端WEB应用、移动端Native应用程序、智能设备等，从而让人们的生活更加的丰富多彩。来自前端领域的四位讲师结合自身经验的分享想必能够为您提供新的思路与灵感，以上即为WOT2018全球软件与运维技术峰会“前端工程实践”分论坛四位讲师演讲的重点内容，更多关于WOT的内容请关注51cto.com。
【51CTO原创稿件，合作站点转载请注明原文作者和出处为51CTO.com】
