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