大前端是什么？

大前端是什么？

简单来讲，大前端就是全部前端的统称，好比Android、iOS、web、Watch等，最接近用户的那一层也就是UI层，而后将其统一块儿来，就是大前端。大前端最大的特色在于一次开发，同时适用于全部平台，开发者不用为一个APP须要作Android和iOS两种模式而担忧。大前端是web统一的时代，利用web不只能开发出网站，更能够开发手机端web应用和移动端应用程序。

大前端为何出现？

因为node的出现，前端工程师不须要依赖于后端程序而直接运行，从而先后端分离起来。因此当开发一个新产品的时候服务只须要写一次，可是面向用户的产品可能有不少，例如网站、Android客户端、iOS客户端和微信小程序等。因为各个平台使用的技术栈都不同，代码没法复用，很是浪费人力、物力。那么有没有什么技术可以解决这一痛点呢？大前端应运而生，其实大前端的主要核心就是跨平台技术，有了跨平台技术，各个平台的差别性就抹平了，开发者只须要一套技术栈就能够开发出适用于多个平台的客户端。

跨平台方案简介

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

H5+原生（Cordova、Ionic、微信小程序）
JavaScript开发+原生渲染 （React Native、Weex、快应用）
自绘UI+原生(Flutter)
加强版Web App(PWA)
接下来简单介绍这三种跨平台方案。

H5+原生混合开发

这种模式又称为Hybrid开发，如今不少App都用这种模式去开发，常见的有微信、淘宝、美团、爱奇艺等知名移动应用等。国内也有不少公司使用Hybrid模式去开发平台，供开发者使用，像Dcloud、AppCan、Inoic等，基本上都是参考Cordova衍生出的混合开发框架。

这类框架主要原理就是将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，它也是混合开发框架的核心。

混合应用的优势是动态内容是H5，使用web技术栈就能够开发，社区及资源丰富，缺点是性能很差，对于复杂用户界面或动画，webview不堪重任。

JavaScript开发+原生渲染

这类开源框架的表明主要是Facebook的React Native、阿里的Weex，固然也有未开源的美团的Picasso，以及最新推出的快应用。
JavaScript开发+原生渲染的方式主要优势以下：

采用Web开发技术栈，社区庞大、上手快、开发成本相对较低。
原生渲染，性能相比H5提升不少。
动态化较好，支持热更新。
固然也有缺点以下：

渲染时须要JavaScript和原生之间通讯，在有些场景如拖动可能会由于通讯频繁致使卡顿。
JavaScript为脚本语言，执行时须要JIT，执行效率和AOT代码仍有差距。
+因为渲染依赖原生控件，不一样平台的控件须要单独维护，而且当系统更新时，社区控件可能会滞后；除此以外，其控件系统也会受到原生UI系统限制，例如，在Android中，手势冲突消歧规则是固定的，这在使用不一样人写的控件嵌套时，手势冲突问题将会变得很是棘手。

React Native

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和Android两个平台。RN使用Javascript语言，相似于HTML的JSX，以及CSS来开发移动应用，所以熟悉Web前端开发的技术人员只需不多的学习就能够进入移动应用开发领域。

React Native的原理和React设计一致，React中虚拟DOM最终会映射为浏览器DOM树，而RN中虚拟DOM会经过 JavaScriptCore 映射为原生控件树。

JavaScriptCore 是一个JavaScript解释器，它在React Native中主要有两个做用：

为JavaScript提供运行环境。
是JavaScript与原生应用之间通讯的桥梁，做用和JsBridge同样，事实上，在iOS中，不少JsBridge的实现都是基于 JavaScriptCore 。
而RN中将虚拟DOM映射为原生控件的过程当中分两步：

布局消息传递； 将虚拟DOM布局信息传递给原生
原生根据布局信息经过对应的原生控件渲染控件树
因为React Native是原生控件渲染，因此性能会比混合应用中H5好不少，同时React Native是Web开发技术栈，只需维护一份代码，便可在多个平台上使用。

Weex

Weex是阿里巴巴于2016年发布的跨平台移动端开发框架，思想及原理和React Native相似，最大的不一样是语法层面，React Native使用React.js做为开发框架，而Weex则使用Vue.js做为开发框架。Vue和React堪称前端领域最火的JavaScript框架，它们的易用性和功能性都很是强大，Weex在淘宝上也有普遍的应用。

快应用

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

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

自绘UI+原生

经过在不一样平台实现一个统一接口的渲染引擎来绘制UI，而不依赖系统原生控件，因此能够作到不一样平台UI的一致性。注意，自绘引擎解决的是UI的跨平台问题，若是涉及其它系统能力调用，依然要涉及原生开发。这种平台技术的优势以下：

性能高；因为自绘引擎是直接调用系统API来绘制UI，因此性能和原生控件接近。
灵活、组件库易维护、UI外观保真度和一致性高；因为UI渲染不依赖原生控件，也就不须要根据不一样平台的控件单独维护一套组件库，因此代码容易维护。因为组件库是同一套代码、同一个渲染引擎，因此在不一样平台，组件显示外观能够作到高保真和高一致性；另外，因为不依赖原生控件，也就不会受原生布局系统的限制，这样布局系统会很是灵活。
不足之处：

动态性不足；为了保证UI绘制性能，自绘UI系统通常都会采用AOT模式编译其发布包，因此应用发布后，不能像Hybrid和RN那些使用JavaScript（JIT）做为开发语言的框架那样动态下发代码。

Flutter

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

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

Flutter使用Skia做为其2D渲染引擎，Skia是Google的一个2D图形处理函数库，包含字型、坐标转换，以及点阵图都有高效能且简洁的表现，Skia是跨平台的，并提供了很是友好的API，目前Google Chrome浏览器和Android均采用Skia做为其绘图引擎，值得一提的是，因为Android系统已经内置了Skia，因此Flutter在打包APK(Android应用安装包)时，不须要再将Skia打入APK中，但iOS系统并未内置Skia，因此构建iPA时，也必须将Skia一块儿打包，这也是为何Flutter APP的Android安装包比iOS安装包小的主要缘由。

可是Flutter也有不足之处，不支持动态下发代码和热更新。

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在国内发展不是很好，可是在国外并无这些问题。

大前端趋势

大前端不只会成为移动开发与Web前端的发展趋势，也将会是将来的显示设备终端的开发技术趋势。大前端将作更多的终端开发、工程化等工做，而不只仅只是开发Web页面。大前端工程师将能搞定全部端上的开发。与充满争议的全栈工程师相比，它更具可操做性。但同时对开发者而言，要会更多的技术栈，好比原生开发者要学习html、css、js等前端知识，前端开发人员也要学习Android或iOS的原生开发技术，而后了解一下常见的跨平台技术，只有这样才能更好的融入到大前端的这个你们庭中。

做者：前端启航连接：http://www.imooc.com/article/283259?block_id=tuijian_wz来源：慕课网