移动应用开发:Flutter
前言
“镜子镜子 告诉我,世界上最好的语言是什么”
“当然是... “
开始正文吧。
该篇博文主要记录了Flutter、H5、React Native 及原生开发的选择对比,以及对 Flutter 的介绍(这里主要是因为之后的移动端开发选择了 Flutter)
Flutter 介绍
Flutter 是 Google 推出的一个移动应用开发框架,支持跨平台,即开发者可以通过 Dart 语言实现一套代码同时在 Android 和 IOS 平台上运行。Flutter 除了跨平台这个特性,还在于其提供了流畅的、高保真的 UI 体验,Flutter 内置的组件,丰富的 API ,响应式框架等都给开发带来了便利。
移动应用开发:选择对比
原生开发
原生应用指的是某一移动平台特有的应用(例如 IOS 或 Android ),需要使用不同的语言及调用不同的 SDK 进行开发。
其缺点在于开发成本高,不同平台需要维护多套代码从而增大人力成本;若有新功能更新则要发布新版本,同时用户需下载新版本进行更新。
使用原生开发的优点是可以访问平台的全部功能,且速度快、性能高,整体用户体验好。
H5 技术
H5 移动端开发主要是网页+JavaScript,目前比较流行的 JS 框架有 Vue、React、AngularJS 等都是为了构建网页。这些针对移动端所构建出来的网页可以实现跨平台,相比于原生开发而言,减少了开发及维护的成本;且用户无需每次都下载新版本进行更新。但其也存在明显的缺点:渲染效率低,用户体验差;网页调用设备的硬件 API 较为困难。
React Native
React Native ( 简称RN ) 是 Facebook 在2015年开源的一个跨平台移动应用开发框架,是 React 在原生移动应用平台的衍生产物。RN 使用 JavaScript 语言,类似于 HTML 的JSX 以及 CSS 来开发移动应用。与 H5 开发不同的是,它使用 JS 桥接技术在运行时编译成各个平台的 Native 代码。其优点在于目前的生态较为成熟,也有很多的跨平台应用使用的 React Native ;支持热部署,开发过程中可以节约很多时间。
Flutter
前面介绍了这么多移动应用开发技术,终于到 Flutter 了。在前面的 Flutter 介绍中也已了解到 Flutter 是一个跨平台的框架,可以实现一套代码在不同的平台上运行。
Flutter 在 React Native 的设计思想上又做了很大的优化,它将代码编译成原生代码,并且直接在各个平台中使用其高效渲染引擎 Skia 进行渲染,没有桥接,不调用平台相关控件。
这种设计思想完美解决了不同平台的性能问题。
Flutter 的特点:
- 有丰富的视图组件
- 支持热部署,开发时可以像网页开发一样实时看到效果
但它也存在一些不足:目前学习的资源比较少;其相关生态也没有 React Native 那样丰富。
总结
“镜子镜子 告诉我,世界上最好的语言是什么”
“当然是... “
你觉得呢?
文章总结想引用知乎上的一个问题的回答:需要开发app和h5,用Flutter靠谱吗?
flutter目前web端并不是那么友好,移动端的话目前除了流畅和生态比原生差点,其它都还好,如果小型项目,而且并不是和硬件打交道比较多,只涉及一些图形交互的业务逻辑的话,建议用uniapp这种类似的H5移动端一站式解决方案。
至于纯原生开发,除非一些经常和系统硬件打交道的App(如摄像头相关的图像处理,平衡仪相关的游戏或者其他业务需求),一般都很少用原生开发。一来项目管理和人力成本因为两个团队的原因会比较大,二来时间上肯定原生开发时间周期更长,三来是没必要。
总体结论:
根据需求来,简单的图形业务App用uniapp这种就够了,网站、移动端App、小程序一套代码稍微修改就可以上线了,稍微追求一点效率和流畅性的用flutter构建移动端,vue做H5,极限点就iOS、Android各自用原生,网页还是用vue。
选择当下最符合业务需求的、最合适的就是最好的。
参考
- Flutter 中文网
- 《Flutter实战》电子书 - 移动开发技术简介
- Flutter介绍 - Flutter,H5,React Native之间的对比
- Flutter | 什么是 Flutter?
移动应用开发:Flutter的更多相关文章
- 使用VSCode开发Flutter
前言 为什么使用VSCode? flutter官方推荐的编辑器有IDEA/Android Studio和VSCode, 之前开发Flutter用的IDEA, 不过IDEA始终比较重,于是换用VSCod ...
- Flutter Android 真机器调试 、模拟器调试、Vscode 中开发 Flutter 应用
必备条件: 1.准备一台 Android 手机 2.手机需要开启调试模式 3.用数据线把手机连上电脑 4.手机要允许电脑进行 Usb 调试 5.手机对应的 sdk 版本必须安装 注意: 1.关闭电脑上 ...
- vsCode开发flutter项目
Visual Studio Code 安装: 下载链接:https://code.visualstudio.com/ 下载完成后根据步骤自行安装. 使用vsCode开发flutter项目需要部 ...
- 安装与配置Flutter开发环境
这篇博客我们介绍了Flutter,并且对比了H5,React Native,Flutter. 由于Flutter是跨平台的开发框架,开发一次可以同时运行在Android和iOS上面,所以我们开发时最好 ...
- Flutter Plugin开发流程
这篇文章主要介绍了Flutter Plugin开发流程,包括如何利用Android Studio开发以及发布等. 本文主要给大家介绍如何开发Flutter Plugin中Android的部分.有关Fl ...
- Flutter与Android混合开发及Platform Channel的使用
相对于单独开发Flutter应用,混合开发对于线上项目更具有实际意义,可以把风险控制到最低,也可以进行实战上线.所以介绍 集成已有项目 混合开发涉及原生Native和Flutter进行通信传输,还有插 ...
- mac 上配置flutter开发环境
(ios,Android,Xcode,Android Studio,VScode,IDEA) 1)安装Flutter SDK 2)iOS 环境配置 3)Android Studio配置 4)VS co ...
- Mac版最详细的Flutter开发环境搭建
上周任务不多,闲来无事想学习一下flutter耍一耍,发现flutter的环境搭建步骤还是很繁琐的,官网的搭建教程只是按步骤让你进行操作,中间出现的问题完全没有提及,对我这种没搞过原生开发的小白来说超 ...
- 入门: 在Windows上搭建Flutter开发环境
使用镜像 由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中: export PUB_HOSTED_URL=htt ...
- 【老孟Flutter】6种极大提升Flutter开发效率的工具包
老孟导读:本文介绍6种极大提升Flutter开发效率的工具包. [1] 强大的日志软件包 在开发 Flutter 的过程中打印日志是常用的调试方式之一,但 Flutter 内置的日志打印非常简单,下面 ...
随机推荐
- 华为9.8笔试题C++
问题 给出一颗二叉树,每个节点有一个编号和一个值,该值可能为负数,请你找出一个最优节点(除根节点外),使得在该节点将树分成两棵树后(原来的树移除这个节点及其子节点,新的树以该节点为根节点),分成的两棵 ...
- Jenkins快速上手安装
目录 环境准备 - JDK 安装 1. APT 安装 2. WAR包方式运行 3.Docker 方式运行 Jenkins 是一个独立的开源自动化服务器,可以用来自动化与构建.测试.交付或部署软件相关的 ...
- CF45G
考虑哥德巴赫猜想:一个偶数可以被拆分两个质数. 所以我们考虑如果不是偶数的话,我们拆分成\((2,m-2)\)或者\((3,del(m - 3))\) 如果是偶数的话\(del(m)\),我们直接枚举 ...
- 洛谷 P7156 - [USACO20DEC] Cowmistry P(分类讨论+trie 树上 dp)
题面传送门 题意: 给出集合 \(S=[l_1,r_1]\cup[l_2,r_2]\cup[l_3,r_3]\cup\dots\cup[l_n,r_n]\) 和整数 \(k\),求有多少个三元组 \( ...
- Codeforces 704C - Black Widow(dp)
Codeforces 题目传送门 & 洛谷题目传送门 u1s1 感觉这种题被评到 *2900 是因为细节太繁琐了,而不是题目本身的难度,所以我切掉这种题根本不能说明什么-- 首先题目中有一个非 ...
- FESTUNG模型介绍—1.对流方程求解
FESTUNG模型介绍-1.对流方程求解 1. 控制方程 对流问题中,控制方程表达式为 \[\partial_t C + \partial_x (u^1 C) + \partial_y (u^2 C) ...
- R shiny 小工具Windows本地打包部署
目录 服务器部署简介 windows打包部署 1. 部署基本框架 2.安装shiny脚本需要的依赖包 3.创建运行shiny的程序 [报错解决]无法定位程序输入点EXTPTE_PTR于动态链接库 将小 ...
- header 301,显示302
header 301,显示302 一定要注意Location 后面的":"前后都不能有空格 header('HTTP/1.1 301 Moved Permanently'); he ...
- 日常Java测试第一段 2021/11/12
课堂测试一 package word_show;import java.io.BufferedReader;import java.io.FileNotFoundException;import ja ...
- Flume(四)【配置文件总结】
目录 一.Agent 二.Source taildir arvo netstat exec spooldir 三.Sink hdfs kafka(待续) hbase(待续) arvo logger 本 ...