移动前端开发与Web前端开发：技术演进与未来趋势解析
转发链接：
前言
前端技术从诞生至今也仅仅发展了十几年。如果说前十年是PC前端的时代，那么接下来的十年一定是移动前端的时代。特别是随着网络标准的发展，移动设备在全球范围内获得了前所未有的普及。在前端领域，Web、Weex等一系列新的移动前端技术也如雨后春笋般涌现。今天，就跟大家分享一下我对“移动前端开发和Web前端开发”的理解。
回顾：前端发展史▐第一阶段：刀耕火种
十几年前的前端，开发者还在为兼容IE6而苦苦挣扎。框架才是老大。有抱负的前端开发人员可能会使用 .js 来减小网页的大小。此时的前端页面仍然以PC为主。这个时候根本没有移动前端的概念。手机小屏幕上的流量页面以纯文本为主。
▐ 第二阶段：工程
在2011-2014年的历史阶段，模块化思想占据主导地位。当时为了设计资源加载器，制定了模块化的协议规范。当时比较流行的模块化协议有AMD()、CMD(以 为代表)、KMD(以 为代表)。在淘宝、天猫，应用非常流行，所以KMD一统天下；在支付宝和外部社区，该应用程序非常流行，因此CMD一统天下。 Yubo的名气和威望在前端圈子里也特别高；而AMD在国外比较流行，但其势头却被后来出现的规范逐渐削弱。
▐ 第三阶段：移动性
随着3G、4G的发展以及iOS和手机在市场上的日益普及，PC业务的主战场逐渐转向移动端。前端思维模式从PC端转向移动端，与App的用户体验看齐。移动协议支持不完整，前端制作支持不完整，画面碎片化。所以当时前端开发移动端页面适配的痛苦远比PC时代要痛苦。
▐ 第四阶段：框架
在前端社区，MV*、Vue、RN（）等框架相继出现，让前端接受了数据驱动思想的洗礼。也利用RN完成了移动体验的升级，包括后来的Weex。
这个阶段前端开始有了终端的底层架构，开始构思前端页面在移动端的加载性能和用户体验性能。在阿里巴巴内部，为了解决多端复用的问题，Rax 使用 VDOM 将两端与 Weex 连接起来，一套代码跑遍天下。
▐第五阶段：垂直化
随着第一代的发布，大屏手机逐渐成为主流，手机的需求开始爆发。在淘宝、天猫上，双十一的移动交易额逐年增长，并逐渐占据绝对领先地位。前端领域也随着这种趋势逐渐细分。按照场景可以简单分为移动（无线）前端开发和中后端前端开发。
移动前端开发面向消费侧Web和轻App业务场景。在此场景下，淘西经过多年的营销活动，逐渐形成了一套独特的、轻量级的移动端解决方案，以及模块维度、面向运营的页面构建体系。
中后台前端面向企业ERP、CRM、OA等后端业务场景，如商户后台等系统。在该场景下，借助非冰、非冰等中后端素材，形成可视化的中后端建设解决方案，为前端提供一站式中后端生产解决方案- 业务的最终、开发或产品角色。
移动前端：混合技术的过去和现在
曾几何时，移动客户端开发和前端开发是两条没有交集的平行线，但现在我们越来越拥抱他们合作的产物：混合（）应用开发，或者用最近流行的一个概念——大前端端技术。
从技术的表达上思考，客户端开发和前端开发本质上都是终端技术，其特点是直接用户UI编程。
▐ 我们都是UI编程，面临的痛点是什么？传统Web前端技术的技术局限性
资源加载：HTML、JS、CSS、图片等静态资源存储在远程服务器上。需要动态异步拉取它们，然后拉取数据进行显示。初始化效率比多重渲染机制慢：在浏览器的设计中，JS的执行和页面的布局都在同一个主线程上，无法并行化。另外，JS的性能跟不上AOT。语言方面，执行复杂逻辑时产生的滞后通常会阻塞UI，再加上冗长的渲染管线，浏览器的渲染体验在同等比较中并不占优势。页面切换：浏览器中没有路由的概念，导致页面之间的切换体验完全依赖于浏览器提供的能力，在页面切换时会重复加载。当然，前端社区中也出现了单页面应用的概念，但多页面的资源也使得体积明显增大，让页面开发变得更加复杂。 API能力：浏览器的安全机制是基于同源策略的沙箱机制。这种沙箱机制阻止前端开发人员使用本机系统功能。只能使用W3C标准定义的功能，而考虑到终端碎片化的问题是这些接口往往不能直接使用。这在PC场景下没有问题，但在移动端却相反。开发者希望能够调用系统接口来实现一些交互性更强的场景。交互性能：浏览器的实时交互性能体验较差。复杂交互场景下的大规模回流限制了UI帧率。这种限制在中低端移动设备中尤为严重。脚本语言，动态解析执行
JS是一种JIT语言，这意味着它需要动态解析和执行。与预编译机器码的AOT语言相比，执行性能差很多。传统客户端技术有哪些局限性？
动态：客户端开发通常有固定的版本发布计划，并遵守App审核规则。版本发布的不确定性也会受到政策的影响。国内渠道很多，每次发布版本都要反复检查渠道。 ，一旦发现线上问题，需要重新发布。容错的成本非常高，这也大大增加了业务的局限性。开发成本：客户端的开发成本较高，但生态没有Web那么丰富。 npm社区数以万计的开源包，加上较为活跃的开发者社区，导致企业客户端的开发成本高于Web开发。跨端一致性：在传统客户端开发一套业务，需要实现两套代码+iOS，由于与iOS操作系统能力的差异，同样的需求往往会用不同的视觉和交互来实现，这也导致企业成本居高不下。 ▐ 混合前端开发
为什么会出现混合前端开发？
随着iOS+确立了移动操作系统的统治地位，前端开发者也在寻找利用操作系统提供的能力进行业务开发的方法。 Web的开发方式远比iOS和iOS方便、高效。 Web 上种类繁多的库和框架也比 iOS 方便得多。在Web上，我们可以方便地使用各种前端框架并实时预览效果（想想大型/iOS项目的编译时间）。
在阿里巴巴看来，随着中台概念逐渐被接受：业务需要追求快速发展，前端的UI和需求会随着业务决策而快速迭代，前端和前端的不同定位客户也形成了分工。研发模式。
从前端向上，前端作为业务侧的唯一接口，逐步演化为大前端的业务层。在这一层，它的职责是定义规范，通过框架规范业务开发流程，同时封装统一的解决方案和工程能力，抽象掉重复性的工作。
将客户端下推，解耦业务需求，变成一个大的前端架构层，为上层业务开发人员提供能力支撑。通过将客户端的系统级API和宿主应用能力暴露给上层前端，提高前端页面承载更丰富的交互场景的能力。
在此背景下，各种混合开发技术层出不穷。这里我们简单地将混合应用的发展定义为三个阶段：
▐ 第一阶段：
现阶段主要是基于与JS的通信链接。基于这个通信基础，可以暴露一些标准的服务API供JS调用。同样的JS还可以封装一些基础的API。打电话。前端开发人员使用传统的JS+HTML+CSS来开发页面，并调用API来驱动客户端能力。现阶段，它是行业的领先者。大多数互联网公司也有自己的框架实现。可以说，第一次赋予了前端开发者调用的能力。
但该解决方案的主要缺点是缺乏性能和高级组件扩展能力，并且流畅度始终无法比拟。
▐ 第 2 阶段：原生 UI
虽然Web的动态性和高开发效率是原生开发无法企及的，但浏览器技术的瓶颈也非常明显：
作为一个开放的技术标准，W3C 有着悠久的历史和很多包袱，这显着降低了浏览器的性能。渲染引擎设计上的缺陷，渲染管线很长，导致浏览器对合成器动画和非合成器动画区别对待，非合成器动画的性能较差。单线程模型无法利用现代硬件架构尤其是ARM架构的多核性能。由于异步光栅化的设计，滚动长列表时难免会出现白屏。
有没有一种方法可以两全其美？
/Weex 的出现给前端开发者带来了曙光。
/Weex 通过 JS 引擎调用端组件来实现相应的功能。 Weex和Weex都允许前端开发者使用JS进行业务逻辑开发，使用VDOM来描述文档结构，使用CSS的子集来自定义样式，将样式和模板分离。
在Weex系统中，JS在JS中独立执行，渲染在系统中执行，三个线程相互独立，并行执行。
系统中，JS、 、 、 的执行相互影响，在执行复杂任务时会造成界面卡顿。
该方案的优点是最大化前端生态和生态系统的复用。
在阿里巴巴，Weex的大规模应用甚至支撑了双11亿的流量。
▐ 第三阶段：自绘引擎 什么是自绘引擎？
所谓自绘制引擎，就是不依赖操作系统提供的布局和原生组件能力，直接调用GPU或者底层抽象层进行绘制的渲染引擎。
在前一阶段，前端开发者已经可以使用JS引擎来驱动原生UI。为什么他们还需要自绘引擎？
/Weex 将View系统完全导出到前端系统，然后封装/iOS View，有很多难以逾越的障碍。例如：双端一致性问题难以消除、复杂的造型功能难以实现、动画需要执行两次（及其本身）。随着复杂度的增加，组件的封装成本越来越高，很难克服View的限制来提供更详细的W3C标准能力。
它诞生于2018年，使用Dart语言构建了一套跨平台开发组件。所有组件均基于Skia引擎自绘。其性能与平台的View相当，而且还解决了上一代架构难以解决的双端一致性等问题。引起了广泛关注，充分验证了通过绘制和构建组件来构建堪比View的UI渲染引擎的可行性。
然而，它缺乏动态更新功能。社区中也有一些项目正在探索动态特性。我们团队也在实现一个前端动态引擎：与其他解决方案不同，它不是基于自己的框架进行扩展。 ，而是从底层扩展了W3C标准API，使其更像浏览器，大大降低了Web开发者的使用门槛。
未来：回归基础
世界的总趋势是，久分必合，久合必分。移动前端开发本质上是终端开发的一种形式。无论容器、框架、语言如何变化，在前端开发者中，只有W3C标准永远不会改变。笔者相信，随着Web的发展，浏览器技术在解决一系列性能和体验问题后，将会成为更加通用的UI编程标准。
▐ 渐进式网页应用
过去几年，我们已经在这个领域下了功夫，引入了PWA（Web）的概念。
PWA在移动浏览器中提供了一个标准化的框架，以实现接近Web App中的App的用户体验。它的特点实际上是一系列W3C标准和私有标准的集合。简而言之，PWA 支持：
▐ PHA
当然，在标准能力不完善、业务需要定制能力的时候，混合应用将会不断发展。
PHA脱胎于PHA（）概念的应用，是一种渐进式混合应用增强策略，提供端测辅助能力，提升渲染性能和体验。广义上讲，现在流行的小程序、快应用都是PHA的实现。
在淘宝内部，我们也在实施轻量级的PHA解决方案，在各大销售中也取得了不错的成绩。关于PHA我想稍后单独写一篇文章来详细阐述。
展望未来，随着技术方案的多样化和终端边界的扩大，我们认为最重要的问题是效率和性能。
基于大数据的机器学习能力，移动端将拥有更高效的UI编排能力，最终实现UI渲染的实时个性化。
基于最近流行的能力，浏览器可以突破限制，有更大的想象空间。
推荐经典实例和学习资料文章
《63个常规礼包“值得收藏”》
“提高技能的 10 个问题”
“前 5 名图表库”
“在一篇文章中彻底理解 . 和 .seal 的用法”
《 JS：动态图形演示——事件循环流程》
《手把手教你用动态规划和贪心算法实现前端瀑布流布局《实践》》
《 js：动态图演示&/流程》
“你知道如何使用原生JS封装来拖动和验证滑块吗？” “实践””
《如何实现高性能在线PDF预览》
《使用字库加密数据详解——仿58同城》
“Node.js 结束了吗？” 》
“Pug 3.0.0正式发布，不再支持Node.js 6/8”
《纯JS手写轮播图（代码逻辑清晰易懂）》
《中文版标准创立20年》
《60多个值得收藏的常用前端工具和方法《JS》》
《箭头函数与常规函数的 5 个区别》
《通过发布/订阅设计模式理解 Node.js 核心模块》
《“前端”不再担心规律性》
““”Node.js V14.3.0 发布，支持顶级和 REPL 增强功能”
《深入了解浏览器原理“流程图”》
《进入第三纪元，未来将走向何方？》
《在前端上传前预览文件、文本、json》
《深入剖析与浏览器渲染、帧动画、空闲回调的关系》
《推荐13个实用阵法“值得收藏”》
《前端必备基础知识：.详解》
“不要再依赖了”
《犀牛书作者：最令人难忘的特质》
《作品中常用的36个功能片段“值得收藏”》
《Node + H5实现大文件分段上传和断点续传》
《一篇文章看懂文件上传全流程（1.8k字深度解析）《前端进阶必备》
《【实践总结】关于小程序挣脱束缚实现批量上传》
《一步一步教你如何在前端上传各种文件以及断点续传大文件》
《字节跳动面试官：请实现大文件上传和断点续传》
《聊聊前端关于文件上传和下载的那些事[练习]》
《一步一步教你写一个前端图片压缩、方向校正、预览、上传插件》
“最全面的模块化解决方案和工具”
《《前端进阶》JS中的内存管理》
《深入的规律性和10个非常有趣的规律性练习》
《前端面试官经常忽略的一个面试问题》
《一行JS代码实现简单的模板字符串替换《练习》》
《JS代码是如何压缩的》前端进阶》
《前端开发规范：命名规范、html规范、css规范、js规范》
《【标准】前端团队代码标准最佳实践》
《100个原生代码片段知识点详解【实践】》
《前端174个知识点总结（一）》
《前端174个知识点总结（二）》
《前端174个知识点总结（三）》
《几个很有趣的知识点总结[实践]》
《都2020年了，你还不知道如何装修吗？》
《图像合成下载》
《70个知识点详解（上）【练习】》
《70个知识点详细总结（下）【练习】》
《开源敏感词过滤库》
《43道面试题给你》
“你值得拥有的 3 个伟大的利基图书馆”
《手把手教你深度巩固知识体系【思维导图】》
《推荐7个很棒的产品步骤指导库》
“埃查哥教你吃透执行机制”
《合格的中级前端工程师需要掌握的28项技能》
《深入解析高频项目中使用的知识点总结[JS]》
《工具功能合集[新]》
《从这里看设计模式（摘要）》
《正则表达式详解及身份证号验证(,)》
“在浏览器中实现计时器的 4 种创新方法”
《.js动画解决方案》
《一步一步教你59个常用的JS类方法》
《127个常用JS代码片段，每段代码30秒就能看懂——【第1部分】》
《用简单的话解释js深拷贝与浅拷贝》
《一步步教你如何用JS开发H5游戏【毁灭星星】》
《深入浅出地讲解 JS 中 this//call/bind 的巧妙使用【练习】》
《教你一步步完整解读JS中这句话的真谛【实践】》
“书用了就少了遗憾，一大波JS开发工具功能来了”
《充满有用的信息！如何优雅简洁地实现时钟翻转器（支持 JS/Vue/）》
《一步步教你六种JS异步编程解决方案【实践】》
《15个高效JS技巧和知识点总结，帮你减少加班【实践】》
《一步步教你如何用JS开发H5游戏【黄金矿工】》
《一步步教你如何用JS监听浏览器上下左右滚动》
《JS经典实例知识点合集【实践】》
《字JS有用资讯分享，带你领略前端魅力【基础知识】》
《字JS实用资讯分享，带你领略前端魅力【实践】》
《简单几步，让你的JS写得更漂亮》
“恭喜您获得治疗此JS的详细处方”
《说说前端关于文件上传和下载的那些事[练习]》
《教你绕过面试时关于范围的 5 个陷阱》
《Plug-ins（常用插件库）》
《[JS]如何防止重复的ajax请求》
“+实施自定义绘图板”
《JS“前端”中的应用》