大前端

当我们在谈大前端的时候，我们谈的是什么

在今天，大前端并不是一个陌生的词汇。17 年开始，大前端这个概念开始浮出水面，18 年，大前端趋势已经愈发明显，层出不穷的跨平台技术，QCon、GMTC 等一线会议开始设置大前端议题，阿里、京东、美团和去哪儿开始推出自己的跨平台实践。这些都在告诉我们，大前端要来了。

标准搜索引擎搜到的，只是 4% 的互联网数据。引以为例，希望当我们谈到“大前端”时，大家的印象不再总被“HTML、CSS、JavaScript 基础”所局限。

今天我们不聊技术，不聊具体原理，只谈谈它能做到哪些。

首先，为什么要有“跨端”这个东西呢？那就是成本，一处编写，多端运行（Write Once，Run Any Where）。与之前的为了开发一个 app 要分别招 ios 和 android 两种开发人员，写两种代码相比，统一无疑是顺应潮流的

比如前两年如日中天的跨平台 RN，写一套代码可以同时运行在 Android 和 iOS 端。再到今年的大热 Flutter 真的是把大前端和跨平台融合在一起了。Flutter 可以说真的是写一次，可以运行在任何地方。Android ？可以，iOS？可以，Windows Mac OS 也可以！

接下来介绍下有哪些跨端实现了

跨端实现汇总

目前的主流跨平台方案：Cordova 框架/phoneGap、React Native、Weex、微信小程序、PWA 和 Flutter 等，根据其原理性，可以分为四大类。

• H5+原生（Cordova、Ionic、微信小程序）混合开发

  这类框架主要原理就是将 APP 的一部分需要动态变动的内容通过 H5 来实现，通过原生的网页加载控件 WebView (Android)或 WKWebView（ios）来加载，H5 部分是可以随时改变而不用发版，这样就解决了动态化的需求，同时，由于 h5 代码只需要一次开发，就能同时在 Android 和 iOS 两个平台运行，这也可以减小开发成本，我们称这种 h5+原生的开发模式为混合开发。采用混合模式开发的 APP 我们称之为混合应用或 Hybrid APP。

  混合开发中，h5 代码是运行在 WebView 中，而 WebView 实质上就是一个浏览器内核，其 JavaScript 依然运行在一个权限受限的沙箱中，所以对于大多数系统能力都没有访问权限，如无法访问文件系统、不能使用蓝牙等。所以，对于 H5 不能实现的功能，都需要原生去做。而混合框架一般都会在原生代码中预先实现一些访问系统能力的 API， 然后暴露给 WebView 以供 JavaScript 调用，这样一来，WebView 就成为了 JavaScript 与原生 API 之间通信的桥梁，主要负责 JavaScript 与原生之间传递调用消息，而消息的传递必须遵守一个标准的协议，它规定了消息的格式与含义，我们把依赖于 WebView 的用于在 JavaScript 与原生之间通信并实现了某种消息传输协议的工具称之为 WebView JavaScript Bridge, 简称 JsBridge，它也是混合开发框架的核心。

• JavaScript 开发+原生渲染 （React Native、Weex、快应用）

  这类开源框架的代表主要是 Facebook 的 React Native、阿里的 Weex，当然也有未开源的美团的 Picasso，以及最新推出的快应用。 我们先简单了解一下快应用这个东西，稍后会继续涉及到 RN 和 Weex

  快应用是华为、小米、OPPO、魅族等国内 9 大主流手机厂商共同制定的轻量级应用标准，目标直指微信小程序。它也是采用 JavaScript 语言开发，原生控件渲染，与 React Native 和 Weex 相比主要有两点不同：

  • 快应用自身不支持 Vue 或 React 语法，是采用原生 JavaScript 开发，开发框架和微信小程序很像，值得一提的是小程序目前已经可以使用 Vue 语法开发（mpvue），从原理上来讲，Vue 的语法也可以移植到快应用上。
  • React Native 和 Weex 的渲染/排版引擎是集成到框架中的，每一个 APP 都需要打包一份，安装包体积较大；而快应用渲染/排版引擎是集成到 ROM 中的，应用中无需打包，安装包体积小，正因如此，快应用才能在保证性能的同时做到快速分发。

• 自绘 UI+原生(Flutter)

  Flutter 是 Google 推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过 Dart 语言开发 App，一套代码同时运行在 iOS 和 Android 平台。

  Flutter 既不使用 WebView，也不使用操作系统的原生控件。 相反，Flutter 使用自己的高性能渲染引擎来绘制 widget。这样不仅可以保证在 Android 和 iOS 上 UI 的一致性，而且也可以避免对原生控件依赖而带来的限制及高昂的维护成本。

• 增强版 Web App(PWA) Progress Web App

  PWA 不属于上述跨平台开发的某一种，它是一种理念，PWA 本质上是 Web App，借助一些新技术也具备了 Native App 的一些特性，比如离线能力、本地缓存、和通知推送，兼具 Web App 和 Native App 的优点，看起来更像一个原生 App。 是一个不需要下载安装即可使用的应用。

  PWA 完全使用前端技术栈，不过它需要手机和浏览器的支持，目前支持 ServiceWorker 和 Google Play Service 的 Android 手机，以及搭载 11.3 以上的 iOS 手机可以使用 PWA。由于国内手机厂商和浏览器厂商的统一性问题，PWA 在国内发展不是很好，但是在国外并没有这些问题。

Node

过去几年，前端技术经历了爆发式的发展，这种发展最重要的推动者之一就是 NodeJS。NodeJS 为前端建立了与系统之间沟通的桥梁，从此前端技术不仅能在服务端大放异彩，还能在本地的前端开发工具与工作流上大展身手，前端从此被解放了，也因为有了 node 的出现，随之而来了的 JavaScript 统治世界的论调一度甚嚣尘上。前端同学暂时取得了一些阶段性胜利，其结果就是从后端主导的开发中脱离出来，实现前后端分离。在以前前端页面模板由后端生成，导致在页面需要频繁修改的时候效率低下，前后端分离指的是后端只提供接口，前端对页面有完整控制，同时通过中间层将前后端隔开，在这里对数据进行抽取、聚合、分发等操作。这个中间层，通常也是由前端同学负责。

从这个意义上，大前端的原始定义可以称为前端技术的扩大化，包括 NodeJS，同时对 Web 页面有更强的控制权，开发承载更多功能的页面。

而 node 可以做什么呢，稍后再详细讲一下用法。

接下来我们继续看看 js 还能做什么哈～那就是移动端 APP 的大行其道

移动端 android/ios

移动互联网时代到来之后，移动 App 成为新的主流，而 PC 浏览器的地位则逐渐降低。新的 android/ios 原生开发需求出现了，但是慢慢的发现为了做一个 APP 开发和维护的时间和资金成本都比较大，这个时候以 PhoneGap/Cordova 为代表的 Hybrid 开发，以及内嵌在 App 中的 WebView 开发，再加上微信成为主流之后的“微信 Web”，前端技术其实在移动端也有很多的使用场景，直到 17 年风靡一时的 RN 的加入，壮大了前端的技术栈，真正实现了一处编写，多端运行（Write Once，Run Any Where）的开发方式。在所有通过图形界面进行人机交互的地方都可行，在 PC、Web、移动设备甚至还未发明出的未来的种种设备上，只要系统能运行 JavaScript 引擎，理论上都可以采用类似 React Native 的开发方案。这种前端技术，开始被称为大前端。

前端的客户端渲染框架三大之二：React 和 Vue 已经覆盖了目前主流的系统平台，并且分别对应的 facebook 推出的React Native和阿里推出的Weex 框架可以进行原生开发，相较于其它技术有很强的优势。

小程序

自从 2017 年发布微信小程序到现在，小程序平台主要是 BAT 即腾讯、阿里、百度加上头条抖音四个。对小程序定义通常为：是一种不需要下载安装即可使用的应用，用户扫一扫或者搜一下即可打开应用。

先看微信小程序，它已经初具规模，虽然很多报道说微信小程序风口已过，由于微信的社交黏性，用户长时间的使用习惯已经养成，所以微信平台肯定是目前最强的小程序平台。

再来看支付宝的小程序，只允许企业注册提交，不允许个人开发者进入，因为支付宝小程序基本是围绕钱的应用，严格准入也可以理解。支付宝小程序主要面向商业和生活服务领域，开放的核心能力主要是支付、信用借贷（花呗和芝麻信用）、会员卡等。过年集五福的小游戏也都是小程序，但游戏显然不是支付宝的重点。

百度小程序的特色在于开放各种智能能力，主要体现在提供了图像语音等识别能力，但实际业务案例还比较少。

同时还出现了一批支持小程序的组件框架。腾讯的 WePY、美团的 mpVue、还有京东的 Taro 等，暂时不讨论哈。

接下来可以简单看一个微信小程序的 demo。

桌面端 Windows/Mac OS/Linux

在国内All in mobile的风气下谈论桌面客户端开发似乎是个很非主流的行为，但是作为 JavaScript 在桌面端伸出的利爪，Electron不仅仅是快速开发跨平台桌面客户端的一个技术选型，也有着其独特的象征意义~

Electron 是由 Github 出品、维护的跨平台桌面应用开发框架。说白了就是剥离 Chromium 内核拿来写桌面应用，应用的大部分 UI 就是 web 页面，也就是我们前端熟悉的 dom. 交互逻辑全部是 js，样式还是 css 写，相当于给用户一个浏览器去渲染应用……看到这里想必读者老爷会骂娘（这不就是 web 么？要这么折腾还不如直接写个网页）

Electron 的本质目的还是利用 js 构建跨平台的桌面端应用，个人认为它的使用场景主要是一些需要原生功能支持、有离线使用需求、迭代速度较快、对下载安装不太敏感同时桌面端开发人员不足的项目。Electron 不仅仅是个“浏览器”，它也封装了一些原生系统的功能，提供给 js 开发者，比如可以简单地使用 js 定制不同系统的菜单栏、应用图标、任务栏，控制应用窗口的大小和位置，调用本地的程序等。相比 web 应用，开发者摆脱了来自浏览器的限制、并可以间接地和原生打交道。

目前基于 Electron 最著名的桌面端应用是: Atom编辑器、VS Code编辑器、Slack、Postman桌面版、Wordpress桌面版等等，基本上都是国外公司在使用。

接下来我们可以先上俩个 demo 简单有个印象～…

Electron 运行时分为两个进程：主进程和渲染进程。主进程是启动 app 时创建的，主要负责 app 如何调用原生、如何创建并管理新窗口（页面）以及各种和原生相关的逻辑，可粗略理解为跑了个 node；渲染进程负责所有页面的绘制（使用 Chromium 内核）、及其前端 js 的解析和运行，粗略理解为“前端”。两个进程通过 ipc（跨进程交互）通信，窗口之间可以有附属关系，也可以使用消息机制互相通信。

Electron 帮开发者完成和原生的连接，和现在 Facebook 推出的React Native一样，开发者所需要做的无非是阅读文档、通过 js 调用封装好的接口，无需直接和原生打交道（写原生代码）

Flutter 全平台制霸

Flutter 是 Google 推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过 Dart 语言开发 App，一套代码同时运行在 iOS 和 Android 平台。 Flutter 提供了丰富的组件、接口，开发者可以很快地为 Flutter 添加原生扩展。

确切的说，Flutter 不属于 js 的跨段实现范围，它使用的是 dart 语言，一种类 js 语言，Flutter 既不使用 WebView，也不使用操作系统的原生控件。 相反，Flutter 使用自己的高性能渲染引擎来绘制 widget。这样不仅可以保证在 Android 和 iOS 上 UI 的一致性，而且也可以避免对原生控件依赖而带来的限制及高昂的维护成本。

目前 Flutter 已经支持了移动端/桌面端/嵌入式设备。Flutter 项目不再是一套单纯的移动框架，今年的谷歌 I/O 大会上，介绍 Flutter 在桌面系统及嵌入式设备中的应用与未来的发展，宣布 Flutter 已经在为包括 Google Home Hub 在内的多种谷歌智能显示平台提供支持，并通过 Chrome OS 迈出了桌面级应用程序支持的第一步。而将真正实现了[跨三端多平台框架]，也一度越为 19 年前端必须技术之一。但是 Flutter 也有不足之处，不支持动态下发代码和热更新。

这个可以留到下次分享会一起讨论学习。

小结

在客户端开发上，Native 与 HTML5 之争持续快十年，吵了人们都失去兴趣了，从现在来看，并没有谁取代谁，而是有融合的趋势，融合之后的产物就是所谓的大前端。如果说前后端分离是前端在纵向上变大，那么这种跨不同的终端的前端技术则可以说是在横向上变大。

目前的缺陷

虽然现在已有的各种跨端和原生相比有很大的缺点。

ReactNative 和 weex：Facebook 和阿里的方案，执行效率是硬伤，首页不能用 RN 已是共识，而且目前在统一 Android 和 iOS 代码方面尚存在不足。

Flutter：Google 的方案，不支持线上热修复，和跨平台方案天然的动态化属性不符，目前尚在 preview 阶段。

PWA：Google 的方案，用纯 web 的方式统一三端，很好的 idea。但是需要借助 Google play Service 和浏览器支持，国外大部分 Android 手机和 iOS 的新版本都可以支持 PWA，但遗憾的是，就我对国内生态的了解，国内的浏览器没法统一支持 PWA。

微信小程序：腾讯的方案，属于微信内的生态闭环，注定没法成为世界统一的方案，更适合小工具和小游戏，一般都作为原生 APP 的延伸入口。而且目前仍存在不少未符合浏览器标准的坑。

很显然，跨平台技术还需要发展，这需要时间，上面的一切我总结为一句话：
大前端的车轮将在曲折中前进。

但是它的一个优点足以弥补现阶段的这些不足：那就是成本，一处编写，多端运行（Write Once，Run Any Where），而且也会是大势所趋。

而且随着技术的成熟，加上 5G 的到来，那些和原生相比的劣势可能会变成优势。并且，大前端工程师将会是一个拥有强大生命力的职业，因为显示终端设备的生命力会很强，毕竟人类的信息获取有 80% 以上是通过视觉，无论 Amazon Echo 这样的语音交互设备如何演化，显示终端都会有一席之地，大前端也因而不会失业。最终，大前端这个概念也许会变成一个“集浏览器，客户端，安卓/ios 开发，以及即将到来的 AR，VR 包含所有视觉呈现交互技术的集合”。