Flutter开发简介与其他的混合开发的对比

  • 为什么要使用Flutter?
  • 跨平台技术简介
  • Hybrid技术简介
  • QT简介
  • Flutter简介

为什么要使用Flutter?

Flutter有什么优势?*它可以帮助你:*

1、提高开发效率

2、同一份代码开发iOS和Android

3、用更少的代码做更多的事情

4、轻松迭代

5、在应用程序运行时更改代码并重新加载(通过热重载)

6、修复崩溃并继续从应用程序停止的地方进行调试

7、创建美观,高度定制的用户体验

9、受益于使用Flutter框架提供的丰富的Material Design和Cupertino(iOS风格)的widget

10、实现定制、美观、品牌驱动的设计,而不受原生控件的限制

跨平台技术简介

针对原生开发面临问题,人们一直都在努力寻找好的解决方案,而时至今日,已经有很多跨平台框架(注意,本书中所指的“跨平台”若无特殊说明,即特指Android和iOS两个平台),根据其原理,主要分为三类:

1、H5+原生(Cordova、Ionic、微信小程序)

2、JavaScript开发+原生渲染 (React Native、Weex、快应用)

3、自绘UI+原生(QT for mobile、Flutter)

4、在接下来的章节中我们逐个来看看这三类框架的原理及优缺点。

Hybrid技术简介

H5+原生混合开发

这类框架主要原理就是将APP的一部分需要动态变动的内容通过H5来实现,通过原生的网页加载控件WebView (Android)或WKWebView(ios)来加载(以后若无特殊说明,我们用WebView来统一指代android和ios中的网页加载控件)。这样一来,H5部分是可以随时改变而不用发版,动态化需求能满足;同时,由于h5代码只需要一次开发,就能同时在Android和iOS两个平台运行,这也可以减小开发成本,也就是说,h5部分功能越多,开发成本就越小。我们称这种h5+原生的开发模式为混合开发 ,采用混合模式开发的APP我们称之为混合应用或Hybrid APP ,如果一个应用的大多数功能都是H5实现的话,我们称其为Web APP 。

目前混合开发框架的典型代表有:Cordova、Ionic 和微信小程序,值得一提的是微信小程序目前是在webview中渲染的,并非原生渲染,但将来有可能会采用原生渲染。

混合开发技术点

如之前所述,原生开发可以访问平台所有功能,而混合开发中,h5代码是运行在WebView中,而WebView实质上就是一个浏览器内核,其JavaScript依然运行在一个权限受限的沙箱中,所以对于大多数系统能力都没有访问权限,如无法访问文件系统、不能使用蓝牙等。所以,对于H5不能实现的功能,都需要原生去做。而混合框架一般都会在原生代码中预先实现一些访问系统能力的API, 然后暴露给WebView以供JavaScript调用,这样一来,WebView就成为了JavaScript与原生API之间通信的桥梁,主要负责JavaScript与原生之间传递调用消息,而消息的传递必须遵守一个标准的协议,它规定了消息的格式与含义,我们把依赖于WebView的用于在JavaScript与原生之间通信并实现了某种消息传输协议的工具称之为WebView JavaScript Bridge, 简称 JsBridge,它也是混合开发框架的核心。

React Native

上文已经提到React Native 是React 在原生移动应用平台的衍生产物,那两者主要的区别是什么呢?其实,主要的区别在于虚拟DOM映射的对象是什么?React中虚拟DOM最终会映射为浏览器DOM树,而RN中虚拟DOM会通过JavaScript Core 映射为原生控件树。

JavaScript Core 是一个JavaScript解释器,它在React Native中主要有两个作用:为JavaScript提供运行环境

是JavaScript与原生应用之间通信的桥梁,作用和JsBridge一样,事实上,在iOS中,很多JsBridge的实现都是基于JavaScript Core 。

而RN中将虚拟DOM映射为原生控件的过程中分两步:

1、布局消息传递;将虚拟DOM布局信息传递给原生;

2、原生根据布局信息通过对应的原生控件渲染控件树;

至此,React Native 便实现了跨平台。相对于混合应用,由于React Native是原生控件渲染,所以性能会比混合应用中H5好很多,同时React Native是Web开发技术栈,也只需维护一份代码,同样是跨平台框架。

Weex

Weex是阿里巴巴于2016年发布的跨平台移动端开发框架,思想及原理和React Native类似,最大的不同是语法层面,Weex支持Vue语法和Rax语法,Rax 的 DSL 语法是基于 React JSX 语法而创造。与 React 不同,在 Rax 中 JSX 是必选的,它不支持通过其它方式创建组件,所以学习 JSX 是使用 Rax 的必要基础。而React Native只支持JSX语法。

快应用

快应用是华为、小米、OPPO、魅族等国内9大主流手机厂商共同制定的轻量级应用标准,目标直指微信小程序。它也是采用JavaScript语言开发,原生控件渲染,与React Native和Weex相比主要有两点不同:

快应用自身不支持Vue或React语法,其采用原生JavaScript开发,其开发框架和微信小程序很像,值得一提的是小程序目前已经可以使用Vue语法开发(mpvue),从原理上来讲,Vue的语法也可以移植到快应用上。

React Native和Weex的渲染/排版引擎是集成到框架中的,每一个APP都需要打包一份,安装包体积较大;而快应用渲染/排版引擎是集成到ROM中的,应用中无需打包,安装包体积小,正因如此,快应用才能在保证性能的同时做到快速分发。

总结

JavaScript开发+原生渲染的方式主要优点如下:

采用Web开发技术栈,社区庞大、上手快、开发成本相对较低。

原生渲染,性能相比H5提高很多。

动态化较好,支持热更新。

不足:

渲染时需要JavaScript和原生之间通信,在有些场景如拖动可能会因为通信频繁导致卡顿。

JavaScript为脚本语言,执行时需要JIT,执行效率和AOT代码仍有差距。

由于渲染依赖原生控件,不同平台的控件需要单独维护,并且当系统更新时,社区控件可能会滞后;除此之外,其控件系统也会受到原生UI系统限制,例如,在Android中,手势冲突消歧规则是固定的,这在使用不同人写的控件嵌套时,手势冲突问题将会变得非常棘手。

QT Moblie与Flutter

在本篇中,我们看看最后一种跨平台技术:自绘UI+原生。这种技术的思路是,通过在不同平台实现一个统一接口的渲染引擎来绘制UI,而不依赖系统原生控件,所以可以做到不同平台UI的一致性。注意,自绘引擎解决的是UI的跨平台问题,如果涉及其它系统能力调用,依然要涉及原生开发。这种平台技术的优点如下:

性能高;由于自绘引擎是直接调用系统API来绘制UI,所以性能和原生控件接近。

灵活、组件库易维护、UI外观保真度和一致性高;由于UI渲染不依赖原生控件,也就不需要根据不同平台的控件单独维护一套组件库,所以代码容易维护。由于组件库是同一套代码、同一个渲染引擎,所以在不同平台,组件显示外观可以做到高保真和高一致性;另外,由于不依赖原生控件,也就不会受原生布局系统的限制,这样布局系统会非常灵活。

不足:

动态性不足;为了保证UI绘制性能,自绘UI系统一般都会采用AOT模式编译其发布包,所以应用发布后,不能像Hybrid和RN那些使用JavaScript(JIT)作为开发语言的框架那样动态下发代码。

也许你已经猜到Flutter就属于这一类跨平台技术,没错,Flutter正是实现一套自绘引擎,并拥有一套自己的UI布局系统。不过,自绘制引擎的思路并不是什么新概念,Flutter并不是第一个尝试这么做的,在它之前有一个典型的代表,即大名鼎鼎的QT。

QT简介

Qt是一个1991年由Qt Company开发的跨平台C++图形用户界面应用程序开发框架。2008年,Qt Company科技被诺基亚公司收购,Qt也因此成为诺基亚旗下的编程语言工具。2012年,Qt被Digia收购。2014年4月,跨平台集成开发环境Qt Creator 3.1.0正式发布,实现了对于iOS的完全支持,新增WinRT、Beautifier等插件,废弃了无Python接口的GDB调试支持,集成了基于Clang的C/C++代码模块,并对Android支持做出了调整,至此实现了全面支持iOS、Android、WP,它提供给应用程序开发者构建图形用户界面所需的所有功能。但是,QT虽然在PC端获得了巨大成功,备受社区追捧,然而其在移动端却表现不佳,在近几年,虽然偶尔能听到QT的声音,但一直很弱,无论QT本身技术如何、设计思想如何,但事实上终究是败了,究其原因,笔者认为主要有四:

第一:QT移动开发社区太小,学习资料不足,生态不好。

第二:官方推广不利,支持不够。

第三:移动端发力较晚,市场已被其它动态化框架占领(Hybrid和RN)。

第四:在移动开发中,C++开发和Web开发栈相比有着先天的劣势,直接结果就是QT开发效率太低。

基于此四点,尽管QT是移动端开发跨平台自绘引擎的先驱,但却成为了烈士。

Flutter简介

“千呼万唤始出来”,铺垫这么久,现在终于等到本书的主角出场了!

Flutter是Google发布的一个用于创建跨平台、高性能移动应用的框架。Flutter和QT mobile一样,都没有使用原生控件,相反都实现了一个自绘引擎,使用自身的布局、绘制系统。那么,我们会担心,QT mobile面对的问题Flutter是否也一样,Flutter会不会步入QT mobile后尘,成为另一个烈士?要回到这个问题,我们先来看看Flutter诞生过程:

2017 年 Google I/O 大会上,Google 首次推出了一款新的用于创建跨平台、高性能的移动应用框架——Flutter。

2018年2月,Flutter发布了第一个Beta版本,同年五月, 在2018年Google I/O 大会上,Flutter 更新到了 beta 3 版本。

2018年6月,Flutter发布了首个预览版本,这意味着 Flutter 进入了正式版(1.0)发布前的最后阶段。

观其发展,在2018年5月份,Flutter 进入了 GitHub stars 排行榜前 100 名,已有 27k star。而今天(2018年8月16日),已经有35K的Star。经历了短短一年多的时间,Flutter 生态系统得以快速增长,由此可见,Flutter在开发者中受到了热烈的欢迎,其未来发展值得期待!

现在,我们来和QT mobile做一个对比:

生态;从Github上来看,目前Flutter活跃用户正在高速增长。从Stackoverflow上提问来看,Flutter社区现在已经很庞大。Flutter的文档、资源也越来越丰富,开发过程中遇到的很多问题都可以在Stackoverflow或其github issue中找到答案。

技术支持;现在Google正在大力推广Flutter,Flutter的作者中很多人都是来自Chromium团队,并且github上活跃度很高。另一个角度,从今年上半年Flutter频繁的版本发布也可以看出Google对Flutter的投入的资源不小,所以在官方技术支持这方面,大可不必担心。

开发效率;Flutter的热重载可帮助开发者快速地进行测试、构建UI、添加功能并更快地修复错误。在iOS和Android模拟器或真机上可以实现毫秒级热重载,并且不会丢失状态。这真的很棒,相信我,如果你是一名原生开发者,体验了Flutter开发流后,很可能就不想重新回去做原生了,毕竟很少有人不吐槽原生开发的编译速度。

参考链接:

https://flutterchina.club/technical-overview

https://book.flutterchina.club

混合开发框架Flutter的更多相关文章

  1. 美团点评技术专家 帮你快速上手跨平台开发框架Flutter

    Flutter并没有开创新的概念,它背后的框架原理和底层设计思想,与原生Android/iOS开发并没有本质区别,甚至从React.Native中吸收了不少优秀的设计理念. Flutter是Googl ...

  2. 在混合开发框架模式中,简化客户端对Web API的频繁调用

    在混合开发框架模式中,有时候我们在处理树形节点的时候,需要很多关联的处理,可能需要结合用户配置信息,属性字典,以及表的字段分类等信息来展示一个结构树,那么在处理的时候就可能会频繁的对这些接口API进行 ...

  3. 自己动手打造基于 WKWebView 的混合开发框架(一)WKWebView 上手

    http://www.cocoachina.com/ios/20150911/13301.html 代码示例:https://github.com/johnlui/Swift-On-iOS/tree/ ...

  4. flutter 混合开发

    flutter 混合开发 https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps https://flutter.de ...

  5. flutter初探

    这两天看了下flutter,感觉这两年可能会爆发,所以尝试在mac和win10上面跑了下hello world... 移动技术简介 原生开发 跨平台技术简介 H5+原生(Cordova.Ionic.微 ...

  6. Flutter调研(1)-Flutter基础知识

    工作需要,因客户端有部分页面要使用flutter编写,需要QA了解一下flutter相关知识,因此,做了flutter调研,包含安装,基础知识与demo编写,第二部分是安装与环境配置. —— Flut ...

  7. flutter在2019年会有怎样的表现?

    2019独角兽企业重金招聘Python工程师标准>>> Flutter的趋势 在移动端,受成本和效率的驱使,跨平台一站式开发慢慢成为一个趋势.从Hybird,RN,WEEX,Flut ...

  8. Flutter开发进阶学习指南Flutter开发进阶学习指南

    Flutter 的起源 Flutter 的诞生其实比较有意思,Flutter 诞生于 Chrome 团队的一场内部实验, 谷歌的前端团队在把前端一些"乱七八糟"的规范去掉后,发现在 ...

  9. 如何高效、快速学习Flutter?如何避坑?(文末送服福利)

    稳住,今天是周末,不过我今天要上班....啊..啊... 对于 Flutter 我没有太多的发言权,不过GSY是对 Flutter 充分理解并精深掌握的前辈了,所以转一篇他对 Flutter 的一些解 ...

随机推荐

  1. 了解mysql concat()函数

    concat(arg1,arg2,....):将形参对应字段的值组合成一个字符串 假设:现在有一张学生表(test_user) 将这三个字段组合成一个字符串作为第四个字段 select test_us ...

  2. K8S 简介

    K8S架构与组件 kubectl: 是一个客户端管理工具,直接管理API server,提供请求给API server,中间有auth认证.用户使用kubectl命令来请求API Server接口完成 ...

  3. dubbo 2.7应用级服务发现踩坑小记

    本文已收录 https://github.com/lkxiaolou/lkxiaolou 欢迎star. 背景 本文记录最近一位读者反馈的dubbo 2.7.x中应用级服务发现的问题,关于dubbo应 ...

  4. python库--tensorflow--可视化

    方法 返回值类型 参数 说明 tf.summary .FileWrite()   创建事件文件     logdir 文件保存路径(C盘), 通过tensorboard --logdir=文件路径(l ...

  5. 【第九篇】- Git 标签之Spring Cloud直播商城 b2b2c电子商务技术总结

    Git 标签 如果你达到一个重要的阶段,并希望永远记住那个特别的提交快照,你可以使用 git tag 给它打上标签. 比如说,我们想为我们的 xxx 项目发布一个"1.0"版本. ...

  6. 浅谈VMware的NAT模式

    什么是NAT模式?理论化的措辞我就不说了,我将结合本人平时的经验来简单的说明一下NAT模式,以及配置NAT模式时遇到的问题. 大家都知道,我们的电脑要想联网,需要与交换机连接,假设交换机的网关为192 ...

  7. find命令查找某一个时间点以后创建或者修改的文件

    touch -t 201711211615.47 starttouch -t 201711211617.47 end find ./* -newer start |xargs ls -al-rw-r- ...

  8. RabbitMQie消息列队整理

    使用方法过程,这儿只做了windows平台教程 先安装Erlang 编程软件,然后设置环境变量,在安装RabbimMQ ,这儿我下载了一个版本不行,后来换了最新版就好了,以后在使用过程 中如果有问题 ...

  9. git介绍-常用操作(一)

    Table of Contents 1  系列文章 2  git说明 3  git常用命令 3.1  基本操作 3.2  远程操作 4  查看git的配置 4.1  查看已配置项 4.2  其他配置 ...

  10. 修改 CubeMX 生成的 RT-Thread makefile 工程

    修改 CubeMX 生成的 RT-Thread makefile 工程 使用 RT-Thread 官方 基于 CubeMX 移植 RT-Thread Nano 生成的 Makefile 工程在编译时有 ...