移动App开发

  • Native App

    Native App开发指的是移动端原生APP开发,比如qq,微信这种应用,不需要用浏览器打开的。原生应用的开发主要依赖于手机的操作体统,开发者调用操作系统的一些API完成一些交互。手机的操作系统主要有Android和IOS两种,这种不同操作系统都有各自的主流开发语言:

    • Android使用Java
    • IOS使用Object-c

    这里就出现了 Android开发 和 IOS开发

  • WebView

    WebView翻译成Web视图,是手机操作系统提供的一个控件。主要用来在应用里面显示的一个web页面。

Hybird开发

​ Hybird,混合。Hybrid开发又称混合开发,这里的“混合”指的原本的Native开发和Web开发混合开发,“开发”指的是开发移动app。

​ Hybird开发是基于WebView使用Native + H5开发的,主要原理是使用WebView的一些API实现一个被称为JsBridgge的东西,JsBridge的功能就是桥接Native和JS,使得js可以操作一些Native的API,Native访问js中的变量。

​ 因为js要使用Native的一些接口,那么js开发者就必须了解这些接口,那么对于开发者来说Native和js两者都要会了,所以又有Hybird开发一说。

​ 为什么要有Hybird开发?

  • H5开发简单敏捷,使用混合h5开发后提升开发效率。
  • 同时因为JsBridge可以抽象Android和IOS的webview接口,即js不关心移动操作系统,使用同一个接口调用原生的Api,使得同一个页面就用同一套代码,跨平台开发,统一端开发。
  • h5页面的动态性高,开源随时发布新内容。而移动端应用迭代速度慢,跟不上业务发展的速度,应用发布需要应用市场审核、用户下载更新。

React-Native 和 Weex

Hybird开发很有创造性,但是因为它是舍弃了原生的更接近操作系统的渲染,转而使用webview的浏览器渲染,所以在性能上表现并不是很理想。

2015年,Facebook开源了React-Native,一种性能更优的使用h5开发移动app的框架。它的原理比hybird更粗暴,直接抽象组件为原生ui控件:

  • 用户手机下载应用,下载结果中包含
    • 简单的js解析器JsEngine,可以用来执行js代码
    • ReactJS,就是维护virsual dom的逻辑,也即通过交互得到一些绘制指令
    • Bridge,ReacJS和Bridge通讯,ReactJS得到的绘制指令会通过Bridge调用Native 代码操作原生控件。同时Bridge也会把用户交互反馈给ReactJS,React通过维护virsual dom得到绘制指令又传递给Bridge。如此往复完成交互。
  • 然后由开发者这里发布一个JsBundle包到服务器。bundle里面就是编写的ui和交互逻辑(开发者真正开发的东西)
  • 用户使用了app,app访问服务器得到JsBundle包(有更新就获取,无则用本地的)
  • JsEngine解析执行ReactJS和JsBundle,得到初始的virsual dom然后通过Bridge绘制最初界面,然后开始交互。

其实相对于React来说,它们基本逻辑是一样的,不同的逻辑在于最终如何绘制,绘制到哪里。React的由浏览器执行js和由浏览器绘制界面。React-Native的则是由自己写的一个js解析器执行js,js逻辑通过Bridge操纵Native控件最终由手机操作系统绘制界面。

​ Android的、IOS的、Web的, React-Native真正做到了统一端开发。同时,因为React-Native最终是Native原生控件渲染,性能方面大大提升,避免了Hybird的尴尬。

由阿里开源的Weex,大体上和React-Native一致,最终产物也是Native原生代码。开发体验上可能会有不同Weex拥抱web前端框架Vue而React-Native使用的web前端框架React的语法。weex的口号也与React-Native的口号“一次学习,随处编写”相对的是”一次编写,处处运行“。

Flutter

到了2017年,google又推出了一个跨平台开发SDK——Flutter。Flutter首先仅是一个SDK(一些工具,文档、测试),不是一个框架(已经是一个应用,只是你还要填补一些空白)。然后Flutter是应用独立的一套语言Dart开发,有自己的高新能渲染引擎,有丰富漂亮的ui小部件(组件)。

Flutter is different than most other options for building mobile apps because it doesn’t rely on web browser technology nor the set of widgets that ship with each device. Instead, Flutter uses its own high-performance rendering engine to draw widgets.

Flutter于React-Native的一些区别:

  • 使用的语言不同,Flutter的Dart和React-Native的Javascript
  • Flutter自己渲染,React-Native依赖原生控件渲染
  • Flutter只支持Android和IOS但是正在逐步支持Web和PC原生应用,React-Native支持Android,IOS,Web应用
  • (呃,受限限于知识匮乏,只能做些大体上的对比了)

对Flutter于React-Native的区别做一个不那么贴切的比喻,React-Native类比成Web开发的各种的开发框架,还是借助原有的技术体系js和浏览器内核。那Flutter就是直接自己写了个解析器,解析另外一门语言,并且用自己的渲染器绘制页面结果。

目前来说,Flutter社区基本已经追上React-Native了

GitHub上(2021.8.11)

Star Fork
Flutter 127k 18.2k
React-Native 97.1k 21.1k

小程序开发

2017年,腾讯推出了微信小程序,小程序就立马火爆了起来,原因可参考this。目前小程序开发现在也成了一个非常热门的技术岗。

但是,更准确的说法是, 小程序可以视为只能用微信打开和浏览的网站。 小程序和网页的技术模型是一样的,用到的 JavaScript 语言和 CSS 样式也是一样的,只是网页的 HTML 标签被稍微修改成了 WXML 标签。所以,小程序页面本质上就是网页。

小程序的特殊之处在于,虽然是网页,但是它不支持浏览器,所有浏览器的 API 都不能使用,只能用微信提供的 API。这也是为什么小程序只能用微信打开的原因,因为底层全变了。

小程序主要是由某一个应用或者一系列应用开放一些接口,然开发者可以根据这些接口获取到应用信息,比如微信的信息,分享等。

Uni-app

​ 也是由于小程序前景光明,互联网各大公司都开放了自己平台的小程序比如微信的、qq的、抖音的、支付宝的等等,但是小程序的开发是开放公司订的,所以不同平台的小程序标准会不一样,自然的这些小程序的开发也会不一样。类似移动应用的统一端开发,小程序自然也会人想要一份代码多个平台使用。Uni-app就是这样的一个框架,支持市面上流行的小程序平台的统一端开发框架。不仅如此,uni-app同时也会支持Android、IOS、Web应用的开发。uni-app是一个开源的框架,目前趋势比较好,在GitHub上已经有32kStar和3k的fork了。

参考

https://segmentfault.com/a/1190000011154120

https://developer.android.com/guide/webapps/webview

https://zhuanlan.zhihu.com/p/41502551

https://www.zoo.team/article/jsbridge

https://reactnative.cn/docs/getting-started

http://doc.weex.io/zh/guide/introduction.html#%E6%A6%82%E8%BF%B0

https://fechat.org/topics/5

https://cloud.tencent.com/developer/article/1481116

React Native之原理浅析

week的工作原理

flutter、rn、uni-app比较

uni-app的由来