前端跨端跨平台开发技术一览

前言

本届前端早早聊由刘芳(宋小菜)，Jim(滴滴)，子洋(政采云)，晟怀(阿里巴巴)，保哥(DCloud)，JJ(京东)，别针(天猫精灵)进行分享

第十届大会讲师出场预告图.png

随着互联网商业形式愈加多元，前端形态也愈加丰富。例如在移动端跨平台上有RN、Flutter、uni-app、taro、ionic等，桌面端跨平台有electron。

前置背景

VUE.js

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

react

React 是一个用于构建用户界面的 JavaScript 库。

RN(React Native)

RN设计原理和react一致，通过声明式的组建机制搭建丰富多彩的用户界面，用于android和IOS开发。

Electron

electron是GitHub发布的跨平台桌面应用开发工具，让你通过web技术开发桌面应用。

web发展

web1.0---静态界面，无数据交互

web2.0---动态界面，数据交互，jquery盛行

web3.0---MVVM面向数据编程

web4.0---一套代码，多端运行

MVVM

MVVM是Model-View-VIewModel的简写，三大前端web框架都采用的这种模式。

Chameleon

滴滴自研的跨端框架，目的是让MVVM跨端环境大统一。

这么多跨端解决方案，我选择哪个？

既然浏览器这么跨端，为什么不就使用浏览器，而要使用这种跨端方案呢？现在的跨端解决方案这么多，应该怎么选择呢？这样的问题无疑是在小伙伴们的心中围绕。浏览器的确可以跨端，并且我们知道pwa技术的流行，我们可以直接将web应用安装在桌面，手机上等等。例如，如果你打开angular的文档页，你就会发现地址栏最右边会有一个加号，这就告诉你可以把这个网页作为应用“安装”在浏览器上。但是浏览器一直被人诟病的是他的性能。手机上浏览器性能不是足够的强大，如果一个耗电量高，并且卡顿让用户体验不佳，恐怕用户也会抛弃掉这个软件。

目前市面上的跨端框架有RN、WEEX、Flutter、以及ionic等等。其中flutter是google推广的跨端框架，使用的编程语言是Dart，Dart这个语言比较冷门了，如果你不是在google公司可能也不会去学习这个语言。

WebView的弊端

WebView的渲染管线并不是最优解！WebView渲染网页的时候，是先渲染HTML，再渲染CSS，最后处理javascript。但是在目前对框架大量使用的情况下，我们依赖的更多的是javascript，HTML只是作为一个入口点。其次，WebView中存在着大量相互兼容的布局逻辑，太多兼容老旧布局的算法并不高效。WebView渲染的时候使用的是异步光栅化架构，这样的架构就会特别的吃内存。

Flutter

Flutter使用的语言是Dart，Release版本是AOT，无动态性。并且包远远比不上NPM的100K+。但是Dart性能高，可以与原生相媲美。

Kraken(base on flutter)

Kraken 是由淘系技术部前端架构团队开发的一个基于 Flutter 的动态化框架，可以直接对接前端的生态。并且有着成熟的调试方案，可以进行实时的JS端点调试。支持sourceMap以及热重载等特性。

在浏览器中，光栅化是异步进行的，进行惯性滚动时，会出现白屏，这个是 WebView 始终无法避免的问题。而借助 Flutter 足够高效的同步光栅化实现，Kraken 可以做到长列表快速滚动不白屏。

Karken with Cloud

云，是未来的趋势。例如现在的云服务，云函数，以及在各大游戏公司在云上的探索，都说明了，未来的世界是寄存在云端的。

Kraken也在云渲染上作出了架构设计。将应用分离为客户端和服务端，通信使用WebSocket和WebRTC。简单来说在服务器上渲染之后，以视频流的形式传送给客户端。客户端捕获用户的操作，传送给服务端。如果网络达到了足够高的水平，就可以流畅的使用未来的新架构。这个和现在浏览器渲染是不一样的。浏览器渲染仍然是大量倚靠客户端的性能，而云渲染是将视频流发送给客户端，性能消耗就会很小。

云端一体化是未来渲染技术的新趋势。Kraken不仅仅是为用户带来一个新的渲染引擎，更是为用户带来一个可控的内核，更彻底的自定义。可以将自己的UI写在自定义的渲染引擎中，极致的提升用户体验。

小程序 with uni-app

uni-app是一个使用Vue.js开发的跨平台应用的前端框架，支持各个小程序平台，还支持发到APP，H5等，可谓是一套代码，多端运行。

是怎么实现的

uni-app的跨端主要是通过编译器加运行时配合实现。编译器解析代码后，把uni-app规范的代码转化为目标平台的代码。运行时，则将小程序的生命周期函数以及事件函数通过uni-app的runtime转发到vue层，然后在vue执行。

组件：不同的平台有着自己不同的属性，因此，uni-app通过自己特有的语法替代了他们，并且在编译之后编译成目标代码。如果是平台特有的代码，则在编译时通过条件编译进行实现。如果是目标平台不支持的属性，则在运行的时候不生效，这样就保证了，即使是不支持的，也不会报错。

小程序和H5的区别

小程序的组件是原生的，但是H5的组件都是在WebView里面的渲染的。所以在这些特有问题处理的时候，就要通过框架进行特殊的处理。例如下面的图，一个框就代代表一个原生组件。

AIoT

跨端场景

物联网跨端则不同于上面的跨端，首先端有手机，音响，电视，手机，手表，车机等，系统有IOS，Android，Linux，RTOS等，而技术栈有RN，H5小程序，cube小程序等。其中RTOS开发的时候使用的DSL是小程序，但是渲染时使用的C++。

跨端特点

物联网涉及到的端多，屏多，技术栈多，并且仍然在不断的引入新的设备，所以需要用一条更长的时间线去看技术的热点。如何对跨端方案进行持续升级？

  1. 对应用进行功能模块维度的纵向拆解

    拆解完，每个模块都可以采用不同的跨端方案，主要考虑源代码如何维护

组件：组件可以拆分为布局组件和功能组件，例如

布局组件：View，Text

功能组件：Image，Video，Input，Canvas，Map

跨端模板

目前的主流模板分为两类

  1. 指令模板

    在字符串/XML的基础上，定义一套指令，用于实现有限的逻辑能力，例如：Vue，小程序都属于这种模板

  2. JS语言混合模板

    在字符串和XML中使用特殊的字符分割，混入JS语言，使模板具有完整的表达能力，例如JSX。

总结

没有最好的方案，只有最适合的方案，不能跟随社区盲目进行选型，需要从项目来进行考量。

最后打一个前端早早聊 的广告

前端早早聊大会目标成为用得上、听得懂、抄得走的技术大会，计划 2020 年办 >= 15 期，由前端早早聊与 掘金联合举办，前端早早聊大会行程动态、录播视频/PPT/讲稿资料下载请关注 「前端早早聊」 公众号跟进。

6 月 27 日举办第十一届 - 前端跳槽的新攻略，报名请戳 ，海报及讲师行程如下：

读完了

如果大家觉得文章写的还不错，就为我点一下赞吧。移动端在最下面，PC端在文章左边。比心💖💖。

以上是 前端跨端跨平台开发技术一览 的全部内容， 来源链接： utcz.com/a/27002.html

回到顶部