深度对比八个主流大前端框架

谓大前端?大前端就是所有前端的统称,包括Web、Native App(Android、iOS)、小程序、快应用等,大前端的开发又称为多端开发,多端开发的一个很明显的挑战就是所用的技术各不相同,当业务要求同时在不同的端都有所呈现的时候,针对不同的端去编写、维护多套代码的成本会成倍增加。

 

于是乎,各大厂牌陆陆续续推出了自己的跨端解决方案,有的宣称“Learn once,write anywhere”,有的高呼“Write once, run everywhere”,真是乱花渐欲迷人眼啊,“香吗”?的确都很香,却让人眼花缭乱,不知所措。很多小伙伴不禁吐槽,学前端越来越难了,就连选择一个框架都那么难。

 

作者着眼前端框架发展史,并着力研究了一下各大跨平台框架的发展(国内市场),凭着多年技术选型的经验,从主观上对一些发展前景明朗的,或者虽不明朗但短期不至于消亡的,斗胆在这里列出来供大家参考。也不多,总共8个,大概分四类:

 

1、Hybrid app(使用Webview和JSBridge的H5+Native混合App)

        Ionic(Cordova + Angular)

2、JS Engine+Native Render

        React Native、Weex、Hippy

3、综合技术的开发框架 ,主要面向小程序兼顾Web、App

        taro、uni-app、chameleon

4、自绘UI+原生   

        Flutter

 

(以下序号只为方便阅读,非排行榜)

 

01

—————

Flutter

 

https://flutter.dev/

https://flutterchina.club/

https://github.com/flutter/flutter

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。

 

Flutter使用Skia作为底层图像渲染引擎。Skia 是一款用 C++ 开发的、性能彪悍的 2D 图像绘制引擎。由于Skia 已然是 Android 官方的图像渲染引擎了,因此 Flutter Android SDK 无需内嵌 Skia;而对于 iOS 平台来说,由于 Skia 是跨平台的,因此它作为 Flutter iOS 渲染引擎被嵌入到 Flutter 的 iOS SDK 中,替代了 iOS 闭源的 Core Graphics/Core Animation/Core Text,这也正是 Flutter iOS SDK 打包的 App 包体积比 Android 要大一些的原因。

Flutter的开发语言是Dart. 同时支持即时编译 JIT 和事前编译 AOT。

 

 

02

—————

React Native

 


https://reactnative.cn/

https://github.com/facebook/react-native

 

React Native 是 Facebook 开发的使用JavaScript和React编写原生移动应用的框架

React Native使你只使用JavaScript也能编写原生移动应用。它在设计原理上和React一致,通过声明式的组件机制来搭建丰富多彩的用户界面。

React Native产出的并不是“网页应用”, 或者说“HTML5应用”,又或者“混合应用”。最终产品是一个真正的移动应用,从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。React Native所使用的基础UI组件和原生应用完全一致。你要做的就是把这些基础组件使用JavaScript和React的方式组合起来。

 

 

03

—————

Weex

https://weex.apache.org/

https://github.com/alibaba/weex

Weex 是阿里开发的、致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验,来构建 Android、iOS 和 Web 应用。简单来说,在集成了 WeexSDK 之后,你可以使用 JavaScript 语言和前端开发经验来开发移动应用。

Weex 渲染引擎与 DSL 语法层是分开的,Weex 并不强依赖任何特定的前端框架。目前 Vue.js和 Rax这两个前端框架被广泛应用于 Weex 页面开发,同时 Weex 也对这两个前端框架提供了最完善的支持。

 

 

04

—————

Taro

https://taro.aotu.io/

https://github.com/NervJS/taro

Taro 是由凹凸实验室(京东)打造的多端统一开发框架

目前 Taro 代码可以支持转换到 微信/百度/支付宝/字节跳动/QQ/京东小程序 、快应用、 H5 端 以及 移动端(React Native)。

Taro 遵循 React 语法规范,它采用与 React 一致的组件化思想,组件生命周期与 React 保持一致,同时支持使用 JSX 语法,让代码具有更丰富的表现力,使用 Taro 进行开发可以获得和 React 一致的开发体验。配套的,Taro UI 是一款基于 Taro 框架开发的多端 UI 组件库。

 

 

05

—————

Uni-app

 

https://uniapp.dcloud.io/

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

uni-app 由DCloud开发的一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。

 

 在App端,uni-app支持webview渲染和原生渲染双引擎

 

DCloud公司拥有420万开发者,几十万应用案例、10.5亿手机端用户,数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app,腾讯课堂官方为uni-app录制培训课程,开发者可以放心选择。

 

 

06

—————

Hippy 

http://hippyjs.org/

https://github.com/Tencent/Hippy

 

Hippy 是腾讯新生的一个跨端开发框架,目标是使开发者可以只写一套代码就直接运行于三个平台(iOS、Android 和 Web)。面向的对象主要为传统 Web 开发者,特别是之前有过 React Native 和 Vue 的开发者,其致力于让前端开发跨端 App 更加容易。

 

另外其官方文档介绍,截止目前为止,腾讯内部已经有了18款流行 App 在使用 Hippy 框架,每日触达数亿用户。应该是一款已经较为稳定的框架。

 

 

07

—————

chameleon

https://cmljs.org/

https://github.com/didi/chameleon

Chameleon/kəˈmiːlɪən/,简写CML,中文名卡梅龙;中文意思变色龙,意味着就像变色龙一样能适应不同环境的跨端整体解决方案。滴滴开发。

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

 

 

08

—————

ionic

https://ionicframework.com/

https://ionicframework.com/docs

ionic是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架。绑定了AngularJS和Sass。这个框架的目的是从web的角度开发手机应用,基于PhoneGap(Cordova)的编译平台,可以实现编译成各个平台的应用程序。

 

ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,是一个轻量的手机UI库。为了解决其他一些UI库在手机上运行缓慢的问题,它直接放弃了IOS6和Android4.1以下的版本支持,来获取更好的使用体验。

ionic基于AngularJS框架,但仅针对移动APP开发,遵循JavaStript的MVVM模式。目前已经有了 React 版和 Vue beta版支持


未经允许不得转载:大自然的搬运工 » 深度对比八个主流大前端框架

赞 (1)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址