Flutter介绍 - Flutter,H5,React Native之间的对比

Flutter介绍

Flutter是Google推出的开源移动应用开发框架。开发者可以通过开发一套代码同时运行在iOS和Android平台。

它使用Dart语言进行开发,并且最终编译成各个平台的Native代码,这样既保证了开发效率,也保证了各个平台的运行效率。其相当于从头到尾重写了一套UI框架,不依赖具体平台的组件。其所有的组件都是"Widget"。渲染引擎则依靠高效渲染库Skia实现。

下面我们对比一下H5、React Native、Flutter这些跨平台的解决方案。

移动端的跨平台技术

H5技术

常被人提起的H5技术,其实就是网页+JavaScript。比如目前的一些流行的JS框架Vue,React,AngularJS等都是为了构建网页。针对移动端构建出来的网页可以实现在跨平台的功能,但是其缺点也很明显:

  • 渲染效率低下,用户体验差。很多H5在iOS平台表现尚可,但是在Android上特别是一些低端机上的表现确实让人不敢恭维。
  • 网页调用设备硬件相关API比较困难,而且支持的功能较少,实现此类需求是H5的短板。

React Native

React Native(RN)发布于2015年,也是使用JavaScript语言进行跨平台APP的开发。与H5开发不同的是,它使用JS桥接技术在运行时编译成各个平台的Native代码,其使用的技术Facebook的Flux技术。

其优点是目前的生态比较成熟,目前也有很多跨平台应用使用React Native。它也是跟Flutter对比的主要对象。

其特点是:

  • 使用JavaScript语言,由于JS被广泛地使用,所以RN也很容易被接受。
  • RN依赖JS的运行时环境,也就是JS桥接技术。其使用Facebook的Flux架构。
  • RN仅提供了UI渲染和设备访问的API,很多功能必须依赖第三方库来实现对本地组件的使用。
  • 生态目前比较完善,使用的公司也比较多,特别是对JS比较熟悉的同学容易上手。
  • 支持热部署,开发过程中可以节约很多时间。

但是它也并不是完美的:

  • 它的渲染方式还是调用各个平台的原生控件,有时需要针对不同的平台做不同的优化。
  • 其性能相对于H5有很大的提高,但是并没有完美解决,白屏,丢帧问题依然存在。

Flutter

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。

总结

虽然Flutter目前并不是非常流行,但是笔者相信它是跨平台解决方案的未来。

如果谷歌的新系统Fuchsia OS能像当今的Android这样如日中天,甚至替代掉Android的话,Flutter的发展也会迎来它的顶峰。

本系列博客我们就来深入学习和探讨使用Flutter。

后面的文章我们会逐步深入学习Flutter的功能与实战。

我的博客中关于Flutter的所有文章可以点击这里找到,欢迎关注!

如果有问题可以留言,或者给我发邮件lloyd@examplecode.cn,期待我们共同学习与成长!

原文地址:https://www.cnblogs.com/lloyd-zh/p/10566816.html

时间: 2024-11-03 21:04:28

Flutter介绍 - Flutter,H5,React Native之间的对比的相关文章

Facebook的React Native和google的Flutter要成熟些(Facebook的React Native之所以能打败谷歌的原因有7个)

在评估哪个框架最适合您的开发人员用于构建跨平台应用程序时,有很多问题需要回答. 谷歌的Flutter是Facebook的React Native框架的答案,开发人员不断地在哪一个上推动最佳结果.对于开发者来说,这是一个激动人心的时刻,因为两个软件巨头正试图竞争. 对于初创公司而言,创建可以轻松覆盖各种设备上的用户的移动应用程序变得越来越重要,并且使用可以跨这些应用程序和设备转换代码的中央框架对于任何开发团队都很重要. 但是,当您评估哪个框架最适合您的开发人员用于构建跨平台应用程序时,除了Face

React Native环境配置

该教程主要介绍如何用react native来开发iOS,所以首先,你需要有一台mac,当然黑苹果也是可以的~ 创建一个react native的项目只需要安装以下五个组件~~(但....坑爹的是,不FQ的话安装慢成狗呀) 1. 安装 xcode 做过ios相关开发的都知道这个,作为ios开发的首席IDE,直接从Apple Store搜索下载就可以了. 2. 安装 brew brew也要Homebrew,它是什么呢?官网的解释是: Homebrew installs the suff you n

【稀饭】react native 实战系列教程之影片数据获取并解析

获取网络数据 在上一节,我们已经通过模拟数据,并将UI展示出来.这节我们将获取网络数据.数据来源于网络,仅用于学习使用. fetch介绍 fetch是react native的一个网络请求库,使用该库不用引入模块,可以直接使用.一个简单的请求如下: fetch('http://facebook.github.io/react-native/movies.json') 发起请求之后,我们还需要对它的响应进行处理,只要这样 fetch('http://facebook.github.io/react

React Native 从入门到原理一

React Native 从入门到原理一 React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几. 本文分为两个部分:上半部分用通俗的语言解释了相关的名词,重点介绍 React Native 出现的背景和试图解决的问题.适合新手对 React Native 形成初步了解. 下半部分则通过源码(0.27 版本)分析 React Native 的工作原理,适合深入学习理解 React Na

最火移动端跨平台方案盘点:React Native、weex、Flutter

1.前言 跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头. 为什么我们需要跨平台开发? 本质上,跨平台开发是为了增加代码复用,减少开发者对多个平台差异适配的工作量,降低开发成本,提高业务专注的同时,提供比web更好的体验.嗯-通俗了说就是:省钱.偷懒. 目前移动端跨平台开发中,备受关注的方案大致归纳为以下几种情况: 1)react native.weex均使

Google基于Dart的新移动开发框架Flutter介绍

Google基于Dart的新移动开发框架Flutter实际上就是以前的Sky SDK,基于Dart语言的移动开发框架,是React Native的竞争对手. 初步看了下,是一个基于Dart语言,灵感来自react Native, 支持120 fps刷新率的高性能原生UI,支持Material Design的移动开发框架 官方网站 http://flutter.io/ https://github.com/flutter/flutter    三天前更新的,现在还没有源码啊 Flutter is

[]H5、React Native、Native应用对比分析

目录(?)[-] 一React Native的出现 二3款应用效果 三工程方案 四对比分析 开发方式 性能 体验 更新 维护 开发方式 性能 体验 更新 维护 五综合 开发方式 性能 体验 更新 维护 @王利华,vczero “存 在即合理”.凡是存在的,都是合乎规律的.任何新事物的产生总要的它的道理:任何新事物的发展总是有着取代旧事物的能力.React Native来的正是时候,一则是因为H5发展到一定程度的受限:二则是移动市场的迅速崛起强调团队快速响应和迭代:三则是用户的体验被放大,用户要求

React Native之FlexBox介绍与使用

前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢 文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢 什么是 FlexBox 布局 在 html 中,界面的搭建都是采用 CSS 的布局方式,CSS 是基于盒子模型,依赖于 dis

react native 之子组件和父组件之间的通信

react native开发中,为了封装性经常需要自定义组件,这样就会出现父组件和子组件,那么怎么在父组件和子组件之间相互通信呢,也就是怎么在各自界面push和pop.传值. 父组件传递给子组件: 父组件: 在主组件里面,使用通过写一个子组件的属性,直接把值或者navigator传给子组件即可.如下20行: 1 /** 2 * Sample React Native App 3 * https://github.com/facebook/react-native 4 * 父组件传递给子组件 5