跨端开发

多个框架,调研太累。
直接uniapp Hello world.且目前并无上线的大项目需求
\$_PS:市场自然会做选择

uni-app, taro, mpvue, wepy, chamelemeon;mpx,Remax; kbone
移动端:rn,flutter,weex,

2020.9.29 星期二 16:06:

收益

### 公司角度
统一技术栈,标准化开发/接入
1人效可接入多端(h5和小程序,快应用;移动端不浪费人力)
拓宽公司业务线和运营手段

### 技术
技术学习/积累
参加开发者大会/联盟排行 奖励

基于uni-app的对比

身体缺很诚实

原生痛点

\$_PS: 见[原生/框架]
单独 微信小程序开发,就已经有很多痛点和 现代开发者不合

  1. 微信新语法:wxml,wxss,wjs,.json。
  2. ??vue ??react ??html。有学习成本
  3. 现代工具/工程化:npm,webpack 打包,less编译,组件(复用)等
    受平台限制。升级等

只一端。用原生是最好的。专注
可以尝试最新的更新,随时更进最新的变动

人效

实际业务中,老板永远不满足。
总想要低成本高效益。
各个生态圈,平台语言和限制

小程序只在一端,如果可以运行在多端,或者h5;
又或者用现代开发模式:工程化。
多端api兼容,服务/数据 同一

uni-app 卖瓜

ma声先行: 如何评价uni-app?

小程序开发:用原生还是选框架

小程序开发:用原生还是选框架(wepy/mpvue/taro/uni-app)– 第1季
小程序跨端框架全面测评: https://github.com/dcloudio/test-framework
本项目分别使用微信原生版、wepy版、mpvue版、taro版、uni-app版、chalemeon版,各自开发一个仿微博小程序首页的复杂长列表,支持下拉刷新、上拉翻页、点赞功能。

该项目主要用于两项测试:
1)跨端支持度如何:是否真能实现各框架宣传的那样,一次开发、多端发布?真的不需要二次开发?
2)跨端框架性能如何:跨端框架基本都是compiler + runtime模式,引入的runtime是否会降低运行性能?尤其是与原生微信小程序开发相比性能怎么样?

选型评估

# uni-app选型评估23问

跨/多端

# 跨端开发框架深度横评之2020版
这一年 mpvue 停止更新,Taro开始探索 taro next,uni-app 产品和生态持续完善,微信新推出了支持H5和微信小程序的 kbone 框架…
所以,本次评测的对象(按发布时间排序):
微信原生开发
taro,京东凹凸实验室出品,官网地址:https://taro.jd.com/
uni-app,DCloud出品,官网地址:https://uniapp.dcloud.net.cn
kbone,腾讯微信团队出品,官网地址:https://wechat-miniprogram.github.io/kbone/docs/

taro 和 uni-app 相对比较成熟,支持主流的所有平台。kbone 只支持微信小程序和 Web 端。我们重点比较一下 taro 和 uni-app。

$_PS: 移动端uni-app更强三些。 包括h5,taro 弱些

不过作为一篇评测文章的结语,我们还是要给出自己的建议:
如果你熟悉React,不懂Vue.js,推荐Taro;
如果你熟悉Vue.js,则推荐 uni-app;
如果你已经有H5代码,只想增加微信小程序平台,并且对性能要求不高,可以考虑kbone;
如果你的业务涉及多端,更推荐 uni-app;
如果你希望通过 serverless 方案快速上线业务,推荐 uni-app。

移动端

# flutter、rn、uni-app比较
在3大主流渲染引擎里,webview、react native/weex、flutter,复杂度依次降低,渲染性能依次上升。(uni-app是双渲染引擎,webview和weex都内置了,随便开发者使用切换)

$_PS: 如果要多端都做,尤其是app端,支持的能力 和 开发人效 上也是要考虑一下。

跨/多小程序

# 小程序多端框架全面测评
凹凸实验室 2019年03月20日 此时还是期待1.3

# 跨端框架深度评测:微信原生、wepy、mpvue、uni-app、taro、chameleon

1)如果你只开发微信小程序,不做多端,uni-app是更好的选择,
除非你有兴趣手动优化原生小程序的代码,
或者对react非常熟悉不愿意学习vue也可以使用taro。
另外注意,使用微信原生开发,对于webpack、各种预处理器、工程化流程的支持很不好,大公司很少用原生微信开发,还是用框架开发更合适。
2)如果你主要为了统一各家小程序,uni-app仍然是最好的选择,taro次之。
3)如果你还需要跨端到H5侧,那么uni-app在跨端兼容方面会让你更省心。
4)如果你还需要跨端到App侧,那么uni-app是唯一可商用的选择。

原生/框架

使用uni-app开发小程序,比直接原生开发小程序好在哪里?

\$_PS: 所有框架都表述用框架比自己原生性能优,同mpx:setData 优化。好比用vue/react ,自己js 或者操作dom

DCloud

上述评测/文章内容分析
机制/原理 上比较客观。但涉及对比,难免有些主观情感:
夸大成分有些,或者强说优;有的缺陷/不足也没有指出,或者觉得影响不大
也有些失实/过时的内容

  1. 未提及自身也有很多问题未修复
  2. go语言的看法。至少没有那么悲观
  3. 性能测试只是一个例子。不能覆盖所有/线上(真实)案例
  4. 许多小程序自身的问题没解决。或许这不在对比/框架的考虑内。比如:发布审核

公司加持

符合国情的多端方案,包容小程序和快应用;极少的可同时支持h5。
而其他开源/主流使用的工具,框架等多为国外

很早就涉足编辑器(H5builder),跨端方案解决
面向开发人员开发;与开源项目不同
属公司的产品,极少可能丢掉。
也有人/同行业者参与进去
是(国内)公司的生态,不牵扯多家巨头的纠纷

行业/业届影响力就不清楚了

h5Editor + mpx

小程序动态编译方案

优势:

  1. 可视化编辑
  2. 一套代码。支持h5 及小程序。扩展其他小程序也不是不可
  3. 公司项目/自己开发。问题都好解决
  4. 动态编译。没有审核时间问题

风险:

  1. 是否会被小程序官方禁止掉?
    概率比较小。使用自定义组件,没有不合规处
  2. 性能方面。多注意,优化方案。
    也应该不会成为问题。也无太复杂项目,基本都是单一页面

    kbone对比

各框架说明

20200929
name | star | issue
–| –| –
taro | 27k | 690/5465
uni-app | 25.9.4k | 573/1391
kbone | 3.5k | 18/262
remax | 3.2k | 20/474
– | – |
mpx | 2.4k | 17/299
chameleon | 7.8k | 122/270
weex | 17.6k | 535/1310
weex-apache | 13.8k | 195/695

uni-app

uni-app: https://github.com/dcloudio/uni-app

Taro

Taro: https://github.com/NervJS/taro
是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5 等应用。
react:jsx 偏好
taro3 支持vue
目前 Taro 3 可以支持转换到 微信/京东/百度/支付宝/字节跳动/QQ 小程序 以及 H5 端。
$_PS: 其他几个端表现并未可知。

GMTC | 《小程序跨框架开发的探索与实践》演讲全文

kbone

kbone: https://github.com/Tencent/kbone
kbone 是一个致力于微信小程序和 Web 端同构的解决方案。

kbone-ui 是一个能同时支持 小程序(kbone) 和 vue 框架开发的多端 UI 库。
kbone,十分钟让 Vue 项目同时支持小程序

mpvue

mpvue:https://github.com/Meituan-Dianping/mpvue
mpvue 是一个使用 Vue.js 开发小程序的前端框架,目前支持 微信小程序、百度智能小程序,头条小程序 和 支付宝小程序。 框架基于 Vue.js,修改了的运行时框架 runtime 和代码编译器 compiler 实现,使其可运行在小程序环境中,从而为小程序开发引入了 Vue.js 开发体验。

已经无人维护, 心电图直线

WePY

WePY: https://github.com/Tencent/wepy
是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async Functions 的引入都是为了能让开发小程序项目变得更加简单,高效。

类Vue
同无人维护

chameleon

Chameleon: https://github.com/didi/chameleon
简写CML,中文名卡梅龙;中文意思变色龙,意味着就像变色龙一样能适应不同环境的跨端整体解决方案。

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

同样是didi出品的chameleon和mpx具体什么区别?该如何选择?

mpx

Mpx: https://github.com/didi/mpx
是一款致力于提高小程序开发体验和开发效率的增强型小程序框架,通过Mpx,我们能够高效优雅地开发出具有极致性能的优质小程序应用,并将其输出到各大小程序平台和web平台中运行。
增强型小程序开发框架 区别于其他编译型

多平台增强 (支持在微信、支付宝、百度、qq、头条小程序平台中进行增强开发)
跨平台编译 (支持以微信为base,将一套代码转换输出到支付宝、百度、qq、头条小程序平台和 web平台 中运行)

请问怎么支持h5呢?
$_PS: 看了是小程序增强。如果支持h5改动较大,所以也没有看到支持h5的情形

Remax

remax: https://github.com/remaxjs/remax
文档: https://remaxjs.org/guide/implementation-notes

Remax - 使用 React 开发小程序
Remax - 使用真正的 React 构建小程序

Weex

Weex: https://github.com/alibaba/weex
https://github.com/apache/incubator-weex
A framework for building Mobile cross-platform UI.

react native

flutter

移动端。
语言:dart 。学习成本

electron

跨桌面端

各框架原理

从实现原理上,开源社区的跨端框架大致分为下面两类:
compile time 编译时
runtime 运行时

compile time 编译时的跨端框架,主要的工作量在编译阶段。
他们框架约定了一套自己的 DSL ,在编译打包的过程中,利用 babel 工具通过 AST 进行转译,生成符合小程序规则的代码。
这种方式容易出现 BUG ,而且开发限制过多。早期的 Taro 1.0 和 2.0 的版本就是采用的这种方案,下文会有更具体的介绍。

而另外一种runtime 运行时模式, 跨端框架真正的在小程序的逻辑层中运行起来 React 或者是 Vue 的运行时,然后通过适配层,实现自定义渲染器。这种方式比静态编译有天然的优势,所以 Taro 的最新 Next 版本和 Remax 采用的是这种方案。

$_PS: vue3.0 也可以自定义实现渲染器

参考:

[【2万字长文】深入浅出主流的几款小程序跨端框架原理]

[小程序底层实现原理及一些思考]

选品

业务:当前项目;未来项目
基本5-20年没问题。(黑猫白猫,能抓老鼠就是好猫)
成本:学习/开发/维护成本;增强;新手 || 研发人效(研发速度)
生态:文档/资源,框架-ui,丰富组件等,开发者,活跃态; 开发工具
所属:维护-有人继承/迭代
跨端圆桌会议–规范 并没有。未来
案例:线上成熟方案
协议:开源协议
安全:包括是否会被限制使用;源码泄露
性能/用户体验:越快越好,编译/运行时;体积
解决方案/能力:越强越好。限制越少。 比如云开发
只能能力/api 多,且限制少;兼容等已内部处理
扩展:或者替换成本较低。迁移

业务场景、用户体验、研发速度、维护成本四个维度来看框架等前端技术,大部分的技术点都能找到合适的位置,
解的问题是如何快速上线和维护满足业务的好用的产品。

这部分解如何快速完成研发,并交付上线。
产品不仅要开发,还要维护,何况框架和依赖库还在不断升级。

其他因子:
typescrpt 并不在此次的考量范围

未来变数

vue3 可以支持多种/自定义编译实现
taro3 和react的走向可以持续观察
react native 已被airbin 抛弃
flutter 如无必要不实践;持续观察好久
kbone 新秀,可能微信生态友好;tencent 团队(wepy);跨端能力弱;包括ui等三方组件/生态

是否需要/搭建开源项目

大型互联网公司发布的开源框架,是不是更有影响力?
uni-app选型评估23问 结尾

创新项目可
有能力,和精力
项目或其他支持
可持久;影响力

不可避免

同志仍需努力

1)webpack 项目构建,优化
2)依赖/三方 组件/库 能力/问题
3)小程序审核发布问题。只是编译了
4)多端兼容,虽然差量编译。但是业务/代码少不了了
5)服务端支持,数据问题
虽有云开发,但还是公司后端接入妥当,也是必要
6)原生能力支持。
虽然有h5+,但是公司自有app 能力也可以接入
7)CI/CD 。虽然编辑器操作方便,但是仍然需要CI/CD
8)学习成本。还是需要学习uni-app开发,多端小程序也不可不了解
9)标准开发;快速构建项目.cli。 多项目开发/发布

22:02

knowledge is no pay,reward is kindness
0%