5G到来,App的未来,是JavaScript,Flutter还是Native ?
Native App
React Native(RN)发布于2015年,也是使用JavaScript语言进行跨平台APP的开发。与H5开发不同的是,它使用JS桥接技术在运行时编译成各个平台的Native代码,其使用的技术Facebook的Flux技术。
其特点是:
使用JavaScript语言,由于JS被广泛地使用,所以RN也很容易被接受。
RN依赖JS的运行时环境,也就是JS桥接技术。其使用Facebook的Flux架构。
RN仅提供了UI渲染和设备访问的API,很多功能必须依赖第三方库来实现对本地组件的使用。
生态目前比较完善,使用的公司也比较多,特别是对JS比较熟悉的同学容易上手。
支持热部署,开发过程中可以节约很多时间。
但是它也并不是完美的:
它的渲染方式还是调用各个平台的原生控件,有时需要针对不同的平台做不同的优化。
其性能相对于H5有很大的提高,但是并没有完美解决,白屏,丢帧问题依然存在。
传统的原生APP开发模式,有IOS和AOS两大系统,需要各自语言开发各自APP。
目前也有很多跨平台应用使用React Native。它也是跟Flutter对比的主要对象。
优点:其优点是目前的生态相对比较成熟
缺点:开发和发布成本高
- 举个栗子:网易管家APP (Tab1,Tab2)
- 应用技术:Swift,OC,JAVA
WebApp
常被人提起的H5技术,其实就是网页+JavaScript。比如目前的一些流行的JS框架Vue,React,AngularJS等都是为了构建网页。针对移动端构建出来的网页可以实现在跨平台的功能,但是其缺点也很明显:
渲染效率低下,用户体验差。很多H5在iOS平台表现尚可,但是在Android上特别是一些低端机上的表现确实让人不敢恭维。
网页调用设备硬件相关API比较困难,而且支持的功能较少,实现此类需求是H5的短板。
移动端的网站,常被称为H5应用,说白了就是特定运行在移动端浏览器上的网站应用。一般泛指 SPA(Single Page
Application)模式开发出的网站,与MPA(Multi-page Application,再后面做介绍)对应。
优点 :开发和发布成本最低
缺点 :性能和体验不能讲是最差的,但也受到浏览器处理能力的限制,多次下载同样会占用用户一定的流量
- 举个栗子:网易管家APP(Tab3)
- 应用技术:ReactJS,RegularJS等
Hybrid App
- 混合模式移动应用,介于web-app、native-app这两者之间的app,兼具“Native App良好交互体验的优势”和“Web App跨平台
- 开发的优势”(百度百科解释)
- 主要的原理是,由Native通过JSBridge等方法提供统一的API,然后用HTML+CSS实现界面,JS来写逻辑,调用API,最终的页
** 面在webview中显示,这种模式下,Android、iOS的API一般有一致性,Hybrid App所有有跨平台效果。**
优点: 开发和发布都比较方便,效率介于Native App、Web App之间
缺点: 学习范围较广,需要原生配合
- 举个栗子:网易云音乐,我爱我家App
** 应用技术:** PhoneGap,AppCan,Wex5
React Native App
Facebook发现Hybrid App存在很多缺陷和不足,于是发起开源的一套新的APP开发方案RN App。。使用JSX语言写原生界面,
js通过JSBridge调用原生API渲染UI交互通信。
优点: 效率体验接近Native App,发布和开发成本低于Native App
缺点: 学习有一定成本,且文档较少,免不了踩坑
举个栗子:Facebook、youtube、discord、QQ、百度等等
WEEX App
- 阿里巴巴开发团队在RN的成功案例上,重新设计出的一套开发模式,站在了巨人肩膀上并有淘宝团队项目做养料,广受关注,
2016年4月正式开源,并在v2.0版本官方支持Vue.js,与RN分庭抗礼。
优点: 开发效率和体验上跟RN不相上下,并且跨平台性更强
缺点: 刚刚起步,社区没有RN活跃
举个栗子:淘宝、天猫、饿了么等
Flutter 咸鱼正在使用 , 而且他们也推荐大家尝试新技术 来自谷歌,不过貌似国内岗位少,有人说写这个35岁后可以出国。(我等将信将疑)
Flutter介绍
Flutter是Google推出的开源移动应用开发框架。开发者可以通过开发一套代码同时运行在iOS和Android平台。
它使用Dart语言进行开发,并且最终编译成各个平台的Native代码,这样既保证了开发效率,也保证了各个平台的运行效率。其相当于从头到尾重写了一套UI框架,不依赖具体平台的组件。其所有的组件都是"Widget"。渲染引擎则依靠高效渲染库Skia实现。
Flutter也看到了目前的跨平台解决方案并不完美,所以它借鉴了React Native的一些思想,做出了很大的优化。它将代码编译成原生代码,并且直接在各个平台中使用其高效渲染引擎Skia进行渲染,没有桥接,不调用平台相关控件。
这种设计思想完美解决了不同平台的性能问题。
归功于其设计思想,我们可以真正实现一套代码,运行不同的平台。在其推出之后,关注的开发者数量和相关的教程的增长速度远超当时的React Native。
其特点包括:
- 使用Google自主开发的Dart语言。Dart语言是一个强类型的语言,很好地支持面向对象,并且易于学习和使用。
- 使用谷歌自己的Skia渲染引擎,Android自带Skia引擎,iOS平台上Flutter也会把Skia引擎打包到APP中,实现高效渲染。
- 目前有非常丰富的视图组件,可以点击这里查看其组件目录,包括Android上常用的材料设计(Material Design)的UI风格,和iOS风格(Cupertino)。由于其渲染不依赖各平台相关组件,所以运行在不同平台上的效果是一致的。
- 同样支持热部署,开发时可以像网页开发一样实时看到效果。
目前它存在的一些问题是:
- 国内学习资源目前并不丰富,使用Flutter的公司也比较少。
- 相关的生态还没有React Native那样丰富,但是其发展速度大大超过了React Native。
总结
运用于跨平台开发的语言还有很多,如PWA,Uni App等。个人看来,Flutter最具有发展潜力的其中一个,虽然Flutter目前并不是非常流行,但是笔者相信它是跨平台解决方案的未来。如果谷歌的新系统Fuchsia OS能像当今的Android这样如日中天,甚至替代掉Android的话,Flutter的发展也会迎来它的顶峰。
如果你想做一个企业名片之类的东西,让更多人知道自家产品,那也许一个网站就够了;但如果产品核心功能只有native app才能提供,或者你想要确保用户有更好的体验、更强的黏性,那可能就需要做native app。
最后如果对技术比较感兴趣,欢迎关注我的微信公众号:终端研发部,id:codeGooger,一起进阶技术
5G到来,App的未来,是JavaScript,Flutter还是Native ?的更多相关文章
- 9 个用于移动APP开发的顶级 JavaScript 框架【申明:来源于网络】
9 个用于移动APP开发的顶级 JavaScript 框架[申明:来源于网络] 地址:http://www.codeceo.com/article/9-app-javascript-framework ...
- Kotlin & Android & Swift & Flutter & React Native
Kotlin & Android https://www.runoob.com/kotlin/kotlin-tutorial.html Swift 5 & iOS 12 https:/ ...
- 从2G到5G, 基站天线过去与未来
在蜂窝移动通信系统中,天线是电路信号与空间辐射电磁波的转换器,是移动通信系统的末梢关键组成部分. 从2G到4G,移动基站天线经历了全向天线.定向单极化天线.定向双极化天线.电调单极化天线.电调双极化天 ...
- 5G到来,数据中心如何变革?
导读 5G将要到来,除改变人们的工作生活外,其带宽.延时.连接特性也逼迫着数据中心变革,以满足5G时代需求.具体而言,5G将从形状规模.硬件组成及软件规模三面变革数据中心. 5G带来什么 高带宽.低延 ...
- Hybrid App: 了解JavaScript如何与Native实现混合开发
一.简介 Hybrid Development混合开发是目前移动端开发异常火热的新兴技术,它能够实现跨平台开发,极大地节约了人力和资源成本.跨平台开发催生了很多新的开源框架,就目前而言,在混合开发中比 ...
- 【转】中国正爆发聊天APP大战 未来或影响西方
[搜狐IT消息]8月15日消息,<金融时报>报道称,在中国,聊天应用程序的竞争日渐激烈,腾讯.阿里巴巴都加入大战,在西方市场的未来竞争中,中国聊天应用可能会成为先驱. 一些分析师认为,快速 ...
- 9 个用于移动APP开发的顶级 JavaScript 框架
顶级 Java 框架 对于Web开发而言,Java是一个有前途的编程语言,并且在不久的将来它将依然在这个领域大放光彩.Java在移动app开发上也有同样的影响吗?让我们一起来看看ValueCoders ...
- mui开发app之html5+,5+Runtime,5+sdk,native.js
说说几个名词 html5:目前最新的html规范,w3c联盟制定,手机端主要由webkit实现规范,对用户来说就是浏览器实现了它 html5+:所谓"+",扩充了html5原本没有 ...
- 创新高性能移动 UI 框架-Canvas UI 框架
WebView 里无法获得的能力虽然是「体验增强」与「端基本能力」,但现都基本上有成熟解决方法.但后期的 UI 和 Layout 的性能反而是目前 Web 技术欠缺的.所以,无论是 Titanium ...
随机推荐
- Linux(Ubuntu)使用日记------为程序添加桌面快捷方式
我们Ubuntu中的所以的程序的快捷方式都放在了/usr/share/applications文件夹下,都是以.desktop结尾的文件.我们可以在这个文件夹下创建我们的快捷方式,然后复制到桌面即可 ...
- pc端常規頁面實現
https://www.cnblogs.com/adc8868/p/5996885.html https://blog.csdn.net/chose_DoIt/article/details/8042 ...
- 【HTML+CSS】在书写代码时的便捷应用
创建多个相同元素: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- postgresql数据库去重方法
数据库去重有很多方法,下面列出目前理解与使用的方法 第一种 通过group by分组,然后将分组后的数据写入临时表然后再写入另外的表,对于没有出现再group by后面的field可以用函数max,m ...
- -bash: fork: Cannot allocate memory 问题的处理
今天生产机器突然无法登录了,正好有一个用top挂着,但是退出top,执行任何命令都报-bash: fork: Cannot allocate memory,但是查看内存还是有很多空闲,然后在百度上查了 ...
- CSS3基础入门03
CSS3 基础入门03 线性渐变 在css3当中,通过渐变属性实现之前只能通过图片实现的渐变效果.渐变分为线性渐变和径向渐变以及重复渐变三种.线性渐变的模式主要是颜色从一个方向过渡到另外一个方向,而径 ...
- vscode笔记(一)- vscode自动生成文件头部注释和函数注释
VsCode 自动生成文件头部注释和函数注释 作者:狐狸家的鱼 本文链接:vscode自动生成文件头部注释和函数注释 GitHub:sueRimn 1.安装插件KoroFileHeader 2.设置 ...
- centos7 部署安装gitlab服务器
概念: git 是一种版本控制系统,是一个命令,是一种工具 gitlib 是用于实现git功能的开发库 github 是一个基于git实现的在线代码托管仓库,包含一个网站界面,向互联网开放 gitla ...
- 2018-2019-2 《Java程序设计》第9周学习总结
20175319 2018-2019-2 <Java程序设计>第9周学习总结 教材学习内容总结 本周学习任务: 下载安装MySQL数据库管理系统. 教材介绍在官网下载安装Mysql服务,启 ...
- 蚂蚁爬杆问题js实现
运行效果 代码 <!DOCTYPE html> <html> <head> <title>蚂蚁爬杆实验</title> <script ...