简直是神仙打架! 多端统一框架哪家强?

目前市面上端的形态多种多样,Web、App 、微信小程序等各类端大行其道,当业务要求同时在不一样的端都要求有所表现的时候,针对不一样的端去编写多套代码的成本显然很是高,根源在于传统网页开发受浏览器能力限制太大,尤为是各家浏览器的不一样实现、离线能力和性能上的缺陷致使 App 很难知足用户体验的需求。

跨端”是目前前端界比较流行的一个词汇。跨端框架本质上是将终端能力以一种形式提供业务开发使用,能够无限制地使用全部终端能力的同时,尽可能让业务开发只编写一套代码,这样既能知足性能需求,又能减小开发成本。


但纵观整个社区内的跨端开发框架,仍旧存在两个主要问题:

    1.跨端框架对前端开发者来说难度较高,若是不具有移动终端开发能力,很难上手;
javascript


   2.平台差别大,相同功能甚至要为不一样的平台使用不一样的接口编写大量平台相关代码。css


出现上述问题的缘由,是由于目前业内的跨端框架,大部分由终端开发者主导开发,并非从前端开发者角度出发的,因此对于前端开发者来讲不够友好。


因而,市面上前后出现了很多跨端技术:uni-app 、Flutter、 WePY、 React Native  


而本文主要介绍的,是国内几个大厂推出的解决方案:HippyChameleon TaroWeex前端




腾讯跨端框架- Hippy



当前star:4.5k
Github :https://github.com/Tencent/Hippy

去年2月20日,腾讯QQ浏览器部门发起的开源跨端框架 Hippy。在腾讯内部,Hippy 已运行3年之久,跨 BG 共有 18 款线上业务正在使用 Hippy,日均 PV 过亿,且已创建一套完整生态。相较于其余跨端框架,Hippy 对前端开发者更友好:紧贴 W3C 标准,听从网页开发各项规则,使用 JavaScript 为开发语言,同时支持 React 和 Vue 两种前端主流框架。java


Hippy 实现了相似 Flutter 的引擎直通架构(在 React Native 中的 Fabric 架构),经过 C++ 开发的模块直接插入 JS 引擎中运行,绕过了前终端通信编解码的开销,有效提高了 JS 前端代码和终端的通信性能。在此基础之上,Hippy 正在实现高性能自绘,以提供更强的性能和更好的用户体验。react


hippy-react 从语法上更加接近终端底层,某种程度上语法接近 React Native,同时经过官方提供了 hippy-react-web 组件库,也能够方便地生成 Web 版网页。android


特征:

  • 为传统 Web 前端设计,官方支持 React 和 Vue 两种主流前端框架。webpack

  • 不一样的平台保持了相同的接口。ios

  • 经过 JS 引擎 binding 模式实现的前终端通信。git

  • 提供了高性能的可复用列表。github

  • 皆可平滑迁移到 Web 浏览器。

  • 完整支持 Flex 的布局引擎。


项目架构:


例:全民 K 歌:react + hippy-react + hippy-react-web




滴滴跨端框架 - Chameleon



当前star: 7.3k
GitHubhttps://github.com/didi/chameleon

Chameleon(简写 CML )中文名卡梅龙,中文意思:变色龙,意味着就像变色龙同样能适应不一样环境的跨端总体解决方案。工程化设计,丰富的基础库,首创多态协议,提供标准的 MVVM 架构开发模式统一各种终端。



对上图各层定义以下:

  • API 接口协议(Library):定义基础接口能力标准。
  • 内置组件协议(Library):定义基础 Ui 组件标准。
  • 框架协议(Framework):定义生命周期、事件、路由等框架标准。
  • DSL 协议(Language):定义视图和逻辑层的语法标准。
  • 多态实现协议(Interface):定义容许用户使用差别化能力标准。

支持平台:
w eb、微信小程序、支付宝小程序、百度小程序、android(weex)、ios(weex)、qq 小程序、字节跳动小程序、快应用、持续更新中


代码示例:
<template> <view> <text>{{title}}</text><text>{{reversedTitle}}</text> </view></template>
<script>class Index { data = { title: "chameleon" } computed = { reversedTitle: function () { return this.title.split('').reverse().join('') } } mounted() {} destroyed() {}}export default new Index();</script>

网页编程采用的是 HTML + CSS + JS 这样的组合,一样道理,chameleon 中采用的是 CML + CMSS + JS。

JS 语法用于处理页面的逻辑层,与普通网页编程相比,本项目目标定义标准 MVVM 框架,拥有完整的生命周期,watch,computed,数据双向绑定等优秀的特性,可以快速提升开发速度、下降维护成本。

CML(Chameleon Markup Language)用于描述页面的结构,咱们知道 HTML 是有一套标准的语义化标签,例如文本是<span> 按钮是<button>。CML 一样具备一套标准的标签,咱们将标签订义为组件,CML 为用户提供了一系列组件。同时 CML 中还支持模板语法,例如条件渲染、列表渲染,数据绑定等等。同时,CML 支持使用类 VUE 语法,让你更快入手。

CMSS (Chameleon Style Sheets)用于描述 CML 页面结构的样式语言,其具备大部分 CSS 的特性,而且还能够支持各类 css 的预处语言less stylus


特色:

1. 多端高度一致
深刻到编程语言维度保障一致性,包括框架、生命周期、内置组件、事件通讯、路由、界面布局、界面单位、组件做用域、组件通讯等高度统一

2. 组件
在用 CML 写页面时,chameleon 提供了丰富的组件供开发者使用,内置的有 button switch radio checkbox 等组件,扩展的有 c-picker c-dialog c-loading 等等,覆盖了开发工做中经常使用的组件。

3. API
为了方便开发者的高效开发,chameleon 提供了丰富的 API 库,发布为 npm 包chameleon-api,里面包括了网络请求、数据存储、地理位置、系统信息、动画等方法。

4. 自由定制
基于多态协议,可自由扩展任意 API 和组件,不强依赖框架的更新。各端原始项目中已积累大量组件,也能直接引入到跨端项目中使用,可充分隔离各端差别化实现。

5. 智能规范校验
代码规范校验,当出现不符合规范要求的代码时,编辑器会展现智能提示,不用挨个调试各端代码,同时命令行启动窗口也会提示代码的错误位置

6. 渐进式跨端 
不只能够用 cml 开发页面,也能够将多端重用组件用 cml 开发,直接在原有项目里面调用。





京东跨端框架 - Taro



当前star:24.5k
GitHub: http://github.com/nervjs/taro

Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。


一套代码,经过 Taro 的编译工具,将源代码分别编译出能够在不一样端(微信小程序、H五、App 端等)运行的代码。同时 Taro 还提供开箱即用的语法检测和自动补全等功能,有效地提高了开发体验和开发效率。

和微信自带的小程序框架不同,Taro 积极拥抱社区现有的现代开发流程,包括但不限于:
  • NPM 包管理系统

  • ES6+ 语法

  • 自由的资源引用

  • CSS 预处理器和后处理器(SCSS、Less、PostCSS)


对于微信小程序的编译流程,Taro的灵感来源于 Parcel ,自研了一套打包机制将 AST 不断传递,所以代码分析的速度获得了很大的提升。一台 2015 年 的 15寸 RMBP 在编译上百个组件时仅须要大约 15 秒左右。

在 Taro 中,你不用像小程序同样区分什么是 App 组件,什么是 Page 组件,什么是 Component 组件,Taro 全都是 Component 组件,而且和 React 的生命周期彻底一致。能够说,一旦你掌握了 React,那就几乎掌握了 Taro。一样使用声明式的 JSX 语法。相比起字符串的模板语法,JSX 在处理精细复杂需求的时候会更驾轻就熟。

// 一个典型的 Taro 组件
   
     
   
   
    
    
    
    
import Taro, { Component } from '@tarojs/taro'import { View, Button } from '@tarojs/components'
export default class Homeextends Component{  constructor (props) {    super(props)    this.state = {      title: '首页',      list: [1, 2, 3]    }  }
  componentWillMount () {}  componentDidMount () {}  componentWillUpdate (nextProps, nextState) {}  componentDidUpdate (prevProps, prevState) {}  shouldComponentUpdate (nextProps, nextState) {    return true }
  add = (e) => {    // dosth }
  render () {    const { list, title } = this.state    return (      <ViewclassName='index'>        <ViewclassName='title'>{title}</View>        <ViewclassName='content'>          {list.map(item => {            return (              <ViewclassName='item'>{item}</View>            )          })}          <ButtonclassName='add'onClick={this.add}>添加</Button>        </View>      </View>    )  }}

Taro已有功能相对完善的IDE:
错误语法触发报错,并给出报错信息和一个文档地址描述:



自动补全功能:





阿里无线前端 - Weex



当前star: 17.6k
GitHubhttps://github.com/alibaba/weex

Weex 是阿里巴巴开源的一套构建高性能,可扩展的原生应用跨平台开发方案。
在 2016 年阿里双十一中,Weex 在阿里双十一会场中的覆盖率接近 99%,页面数量接近 2000,覆盖了包括主会场、分会场、分分会场、人群会场在内几乎全部的阿里双十一会场业务。阿里双十一主会场秒开率97%,所有会场页面达到 93%。


特色:

1. 页面的开发目前支持Rax和Vue
Weex 也不是只支持 Vue 和 Rax,你也能够把本身喜欢的前端框架集成到 Weex 中,有一个文档扩展前端框架描述了如何实现,可是这个过程仍然很是复杂和棘手,你须要了解关于 js-native 之间通讯和原生渲染引擎的许多底层细节。

2. 一次编写,三端(Android、iOS、前端)运行
前提是都集成了 weex sdk,另外视觉表现作不到彻底同样,有的会有一些差别,须要作一下适配。因此写 weex 页面的时候,若是支持三端,便须要在三端都进行自测。

3. 通讯
UI 的绘制经过 native 的组件,JavaScript 逻辑在 JS 引擎里运行,二者经过 JavaScriptCore 通讯

4. 支持 Native 扩展
能够将 native 的 UI 组件封装成 component,将 native 的逻辑代码封装成 module。从而在 weex 里能够进行使用。这里的 natiev UI 组件包括 modal、webview、image 等,这里的 native 逻辑代码包括 storage、network 等。

5. 视图
每一个 weex 页面会被打包成一个 js 文件,weex sdk 将 js 文件渲染成一个 view
weex 的打包经过 webpack,将每一个页面打包成独立的一个 js 文件,weex sdk 会将 js 进行解析,将 UI 部分绘制成一个 view, 再绑定 view 的事件与 js 代码绑定。

6. 调试
均可以在chrome中调试JS代码,weex支持在chrome中预览页面dom节点

7. 页面开发
weex提供了一个playground,能够方便的预览正在开发的页面

8. 即时预览
weex和ReactNative都有提供hot reload功能,能够边更改代码,边在手机上看到效果 

9. 打包
weex默认打的js bundle只包含业务js代码,体积小,基础js库包含在weex sdk中

10. 异步
weex只支持callback

例:



代码:
   
     
   
   
    
    
    
    
<template>    <div class="wrapper">        <div class="login">            <div class="input-wrapper">                <input οnchange="onchangeUserNumber" class="input" type="text" placeholder="手机号" autofocus="true" value=""/>                <image class="input-img" src="resources/img/login_input_user_img.png"></image>            </div>                             //......                  </div>        <toast id="toast"></toast>    </div></template>
<script>    module.exports = {        data:{            userNumber:'',            userPassword:''        },        methods:{            onchangeUserNumber:function (event) {                this.userNumber = event.value;            },            onchangeUserPassword:function (event) {                this.userPassword = event.value;            },                        //......        } }</script>
<style> ......</style>





写在最后

目前你们可能会有一些疑问,好比跨端技术之后是否会取代原生开发?对于这个一直争议不断的问题,笔者认为,从目前的发展趋势来看,并无取代一说,跨端的灵活与低成本,大多数应用场景是在一些变化较快的常规业务开发中,而原生开发中,好比定制化的视频渲染,复文本阅读器,高响应度复杂动画,各种传感器好比 蓝牙,陀螺仪,距离感应等等,这些关乎到交互体验的细腻程度,目前仍是得以原生开发来处理。因此与其说取代,不如说二者相辅相成,互相配合,发挥出最高效率,才是正确操做。

这么多跨端技术,各有优劣,不能一句话去评判哪一个好与很差,至于选择哪个,得考虑自家系统的现有架构,还得考虑开发人员的配置,因此适合本身,才是选择的标准。相信之后相似框架会愈来愈多,愈来愈成熟,学习成本也会愈来愈低,而就目前而言,国内这几家的跨端开源框架,你更看好哪一个呢?

若是以为文章对你有收获,请点赞在看,分享。

◆ ◆ ◆ ◆ 

推荐阅读:


玩转VS Code

VS Code · 编程开发 · 业界资讯

本文分享自微信公众号 - 玩转VS Code(vs_code)。
若有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一块儿分享。

本站公众号
   欢迎关注本站公众号,获取更多信息