写点什么

2022 年盘点,主流前端跨端技术方案(包含小程序)

作者:Speedoooo
  • 2022 年 7 月 14 日
  • 本文字数:2114 字

    阅读完需:约 7 分钟

2022年盘点,主流前端跨端技术方案(包含小程序)

随着移动互联网的发展,目前市面上“端”的形态多种多样,Web、App 、车载、微信小程序等各种端大行其道,同一个业务需求往往又需要在多端上去实现,针对不同端去去编写多套代码的成本显然非常高。

近年来“跨端”显然是前端界比较流行的一个词汇。不论是国内还是国外,跨端框架百家争鸣,方案频出。相信很多有代码多端运行需求的开发者都会产生一些疑惑:这些框架都有什么优缺点?到底应该用哪个?

而本期主要介绍的几个主流的解决方案 Finclip、Flutter、Taro、React Native 、Weex

FinClip

FinClip是凡泰极客研发的一套小程序容器技术,也可以说是小程序沙箱 Runtime/Engine,提供 Runtime 基于浏览器内核,采用动态语言(JS)和声明式 View 构建(XML),兼容互联网主流小程序技术,可采用 Vue、react 基础上的 DSL 框架。


与 Taro、Flutter、Reactive-Native 等跨端语言不同的是,FinClip 严格意义上讲是一项容器技术。与上述的跨端技术不仅不冲突,还可以完美融合。不管是通过 Flutter、Taro、 kbone 等开发出来的小程序均可在 FinClip 当中运行。


这种小程序容器技术,将视图层与逻辑层分离也带来了许多好处:

1、方便多个小程序页面之间的数据共享和交互。在小程序的生命周期中具有相同的上下文可以为具备原生应用程序开发背景的开发人员提供熟悉的编码体验;

2、Service 和 View 的分离和并行实现可以防止 JS 执行影响或减慢页面渲染,这有助于提高渲染性能;

3、因为 JS 在 Service 层执行,所以 JS 里面操作的 DOM 将不会对 View 层产生影响,所以小程序不能操作 DOM 结构的,这也使得小程序的性能比传统的 H5 更好。

Flutter

Flutter 作为谷歌的移动 UI 框架,在快速构建 iOS 和 Android 应用及开发、高性能、可移植性上表现优秀,并可以与现有代码一起工作,基于这些特点使其越来越受到开发者的推崇,最近几年发展速度也比较迅猛,各大公司都在主端业务引入。


前端对于 Flutter 的热忱度之高一度让人有点惊讶,事实上在 Flutter 社区内见到的客户端开发者远多于前端开发,不过前端对于跨端解决方案确实有着天然的渴求。


优点: 

1、跨平台;

2、性能强大,流畅,混合开发中,最接近原生开发的框架;

3、Dart 语言简单易学;

4、极大降低了开发成本。原来需要招一个 iOS、一个安卓,用了 flutter 后,只需要招一个 flutter 人员就够了;


缺点: 

1、Widget 的类型难以选择,糟糕的 UI 控件 API;

2、Dart 语言的生态小,精通成本比较高。

3、开发工具版本升级后,修改量大;

4、原生集成第三方 SDK 后,兼容性适配是个令人头痛的问题;

5、代码可读性较差(嵌套地狱),对代码质量和管理要求较高;


简短版:flutter 是个性能强大的框架,但是坑多。

Taro

Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。一套代码,通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信小程序、H5、App 端等)运行的代码。同时 Taro 还提供开箱即用的语法检测和自动补全等功能,有效地提升了开发体验和开发效率。


Taro 自研了一套打包机制将 AST 不断传递,因此代码分析的速度得到了很大的提高。一台 2015 年 的 15 寸 RMBP 在编译上百个组件时仅需要大约 15 秒左右。


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

React Native

React Native (简称 RN)是 Facebook 于 2015 年 4 月开源的跨平台移动应用开发框架,是 Facebook 早先开源的 JS 框架 React 在原生移动应用平台的衍生产物,支持 iOS 和安卓两大平台。RN 使用 Javascript 语言,类似于 HTML 的 JSX,以及 CSS 来开发移动应用,因此熟悉 Web 前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。


主要特性:

1、原生的 iOS 组件 通过 React Native,开发者可以使用 UITabBar、UINavigationController 等标准的 iOS 平台组件,让应用界面在其他平台上亦能保持始终如一的外观、风格。

2、异步执行 JavaScript 应用代码和原生平台之间所有的操作都采用异步执行模式,原生模块使用额外线程,开发者可以解码主线程图像、后台保存至磁盘、无须顾忌 UI 等诸多因素直接度量文本设计布局。 3、触摸处理 React Native 引入了一个类似于 iOS 上 Responder Chain 响应链事件处理机制的响应体系,并基于此为开发者提供了诸如 TouchableHighlight 等更高级的组件。

Weex

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


特点:

1. 页面的开发目前支持 Rax 和 Vue

2. 一次编写,三端(Android、iOS、前端)运行

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

4. 支持 Native 扩展

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

6. 异步:weex 只支持 callback

发布于: 刚刚阅读数: 4
用户头像

Speedoooo

关注

还未添加个人签名 2021.10.08 加入

还未添加个人简介

评论

发布
暂无评论
2022年盘点,主流前端跨端技术方案(包含小程序)_flutter_Speedoooo_InfoQ写作社区