今年6月,Airbnb 技术团队宣布,Airbnb 将放弃使用 React
Native,回归到使用基于原生技术的自有框架开发
App。作为一家世界级顶尖公司,在对 React Native
投入大量精力后,突然决定弃它而去,这让不少想要使用和正在使用 React
Native 的人都感到震惊和疑惑。

澳门新葡萄京所有网站 1

澳门新葡萄京所有网站,时间: 2019-02-24阅读: 574标签: 前端大前端是什么?

近日,Airbnb 工程师 Gabriel Peal
在接受外媒采访时,聊到了
Airbnb 的移动开发历史、React Native 的优缺点,以及 Airbnb
最终为什么决定从 React Native 迁移。

2018年 iOS
技术发展有点跌宕起伏。在苹果官方进入慢车道的同时,谷歌却强势推出了新的跨平台移动架构
Flutter;同一时间,与 Flutter 类似的跨平台解决方案 React Native 却被
Airbnb 放弃,一时之间蒙受阴影。

简单来说,大前端就是所有前端的统称,比如Android、iOS、web、Watch等,最接近用户的那一层也就是UI层,然后将其统一起来,就是大前端。大前端最大的特点在于一次开发,同时适用于所有平台,开发者不用为一个APP需要做Android和iOS两种模式而担心。大前端是web统一的时代,利用web不仅能开发出网站,更可以开发手机端web应用和移动端应用程序。

澳门新葡萄京所有网站 2

原生开发一直是最正统的 iOS
开发解决方案。经历了10多年的发展,苹果已经构建起了相当完善的开发框架和体系,社区也开发出了丰富多彩的第三方框架,其数量和质量都是其他任何解决方案望尘莫及的。

大前端为什么出现?

React Native 对 Airbnb 来说最大优势是快速开发和平台不可知论(platform
agnosticism)。通过 React Native ,Airbnb
可以利用整个开发团队来帮助构建和支持他们的移动应用。这意味着无论后来的员工在移动和
Web
开发方面的背景如何,都可以快速培训上手。它还意味着更精简的代码库,因为能够跨三个平台部署一个存储库。但同时,也带来了挑战:

今年 WWDC 的主旋律可以说是“修修补补”——明星框架依然是 AI (ML & Siri Kit)
和 AR 这两个;对于 Xcode 和 iOS 系统及其各种框架的性能优化如 Auto Layout
算法改进、UITableView 滑动效率增强则是本次大会的重点。

由于node的出现,前端工程师不需要依赖于后端程序而直接运行,从而前后端分离起来。所以当开发一个新产品的时候服务只需要写一次,但是面向用户的产品可能有很多,例如网站、Android客户端、iOS客户端和微信小程序等。由于各个平台使用的技术栈都不一样,代码无法复用,非常浪费人力、物力。那么有没有什么技术能够解决这一痛点呢?大前端应运而生,其实大前端的主要核心就是跨平台技术,有了跨平台技术,各个平台的差异性就抹平了,开发者只需要一套技术栈就可以开发出适用于多个平台的客户端。

从 0 至 1 ,需要一大笔投入

Swift 的更新可以说是乏善可陈。万众期待的 Swift ABI
稳定被官宣推迟到2019年,4.2
版本小修小补中继续向着更易用的方向进行努力;在谷歌大脑的 Swift 之父
Chris 依然在努力的将 Tensorflow Swift 化,虽然取得了一定进步,但 Google
对其显然支持力度不够(只有 Richard Wei 一人在进行相关工作);Server
端方面,IBM 依然不遗余力地更新着自家的 Swift
全家桶,然而其8%的云市场份额作用有限。除此之外,一年一度的 Swift Summit
今年居然停办,不知是因为资金不足还是开发者热情消减。

跨平台方案简介

许多人认为在 Airbnb 决定使用 React Native
时有做完整的迁移,其实到目前为止,React Native 代码仅占 Airbnb
代码库和开发资源的 15-20%,它一直就不是 Airbnb 公司的主要平台。尽管
React Native
是一个框架并且极大地简化了移动开发流程,但启动和运行起来并非易事,尤其是在已有现成代码库的情况下。将
React Native 集成到现有的移动代码库中预期会耗费大量时间和精力。

基于 Swift 整体方面不够给力,Swift 的三大排名更新如下:

目前的主流跨平台方案:Cordova/phoneGap、React
Native、Weex、微信小程序、PWA和Flutter等,根据其原理性,可以分为三大类。

开发者仍需编写原生代码

  1. TIOBE 语言排名从第10名下降到第14名
  2. StackOverflow 最受欢迎语言维持在第14名
  3. Github 综合语言排名为第14名

H5+原生(Cordova、Ionic、微信小程序)JavaScript开发+原生渲染 (React
Native、Weex、快应用)自绘UI+原生(Flutter)增强版Web App(PWA)

对于 API 在两个平台之间具有明确桥梁的简单应用,React Native
是一个很好的选择。在 Airbnb 移动应用的早期阶段,React Native
是移动应用中的强大加速器。但最终,API
将无法以你想要的方式运行,你还是不得不深入到原生库中进行必要的调整。

反观 Objective-C 则在不被看好的情况下逆势而上。其在 TIOBE 和 Github
的排名稳居第10名;而在公司方面,LinkedIn 决定从 Swift 迁移回
Objective-C,与 Snap、Facebook、Twitter 一道成为 Objective-C的卫道者。

接下来简单介绍这三种跨平台方案。

如果聘请一位 JavaScript 开发者来维护你的 React Native
项目,那么他们必须编写原生代码来弥补功能上的缝隙。

而完全拥抱 Swift 的依然只有 Uber,Lyft,Coursera 这三家早在 Swift 3
就入坑的公司 。硅谷的绝大多数公司,如
Google、Amazon、Microsoft、Netflix、Airbnb、Slack、Pinterest、Quora都对
Swift 持观望态度,其产品中也大多是以 Objective-C
为主的混编。好消息是,它们中的绝大多数代码库都在往更多 Swift
的方向去迁移;Amazon 则是在11月发布了轻量级的 smoke 服务器框架,完全是由
Swift 编写。

H5+原生混合开发

小心“地雷”

澳门新葡萄京所有网站 3硅谷公司
iOS 开发语言选择分布

这种模式又称为Hybrid开发,现在很多App都用这种模式去开发,常见的有微信、淘宝、美团、爱奇艺等知名移动应用等。国内也有很多公司使用Hybrid模式去开发平台,供开发者使用,像Dcloud、AppCan、Inoic等,基本上都是参考Cordova衍生出的混合开发框架。

React Native 代码中的地雷和互作用极难追踪和重现。举个实际例子,Airbnb
团队有遇到 React Native 组件在某些手机上显示一片空白的问题,该 bug
不仅不可靠,而且难以追踪。

总结:Objective-C 瘦死的骆驼比马大,Swift 发展陷入低迷。

这类框架主要原理就是将APP的一部分需要动态变动的内容通过H5来实现,通过原生的网页加载控件WebView
(Android)或WKWebView(ios)来加载,H5部分是可以随时改变而不用发版,这样就解决了动态化的需求,同时,由于h5代码只需要一次开发,就能同时在Android和iOS两个平台运行,这也可以减小开发成本,我们称这种h5+原生的开发模式为混合开发。采用混合模式开发的APP我们称之为混合应用或Hybrid
APP。

解决方案是关闭初始化 Fresco ,这是一个适用于 Android 的 React Native
标准图像渲染库。直到今天,工程师仍然不明白为什么这个步骤修复了这个 bug

Flutter 应该算是今年 iOS
开发的年度关键词了。从2015年首次出现在安卓的操作系统中,到2017年 Alpha
版本的发布,再到两个 Beta
版本分别在今年2月和3月发布,随后在9月上海的谷歌开发者大会上宣布稳定版,最后在2018年的尾巴12月4日,我们终于见到了1.0版本。这款以
Dart
为开发语言、承载了谷歌未来系统级战略的框架,注定要展现出巨大的影响力。

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

投入永无止境/迭代缓慢

对于开发 Flutter 的动机,原 Swift 团队的二号人物 Kate Stone 认为,开发
Flutter 的目的在于为其 IOT 战略铺路和试错。在 AI First 大背景下的
Google,其基本的布局是以人工智能为核心构建一整套软硬结合的生态圈。其中硬件就是以
Google Home 为中心的 IOT 产品线(包括自家的 Clips、Wifi、Nest
一套),这些硬件需要一套更高效和统一的软件平台——以 Java 为主的 Android
当然不错,但将其适配新的 IOT产品线成本较高,且每年要付给 Oracle
大量的专利费显然并不划算;Chrome OS
因为理念太先进,完全基于云端而导致现在的基础设施和第三方厂商难以适应,目前只是小众产品。整合
Android 和 Chrome OS 两大平台的资源,配合未来 5G 的高速通信,使 Google
做出了统一系统、高效开发的决策。这正是开发 Fuchsia 的原因,而 Flutter
也是其配套的重要一环。

混合应用的优点是动态内容是H5,使用web技术栈就可以开发,社区及资源丰富,缺点是性能不好,对于复杂用户界面或动画,webview不堪重任。

许多团队使用 React Native
进行小型移动应用的原型设计,并相信它能解决他们的所有问题。但与所有开源软件一样,该平台在不断变化,每天都会发现新的
bug 和问题。支持 React Native 还处于动荡的生态需要持续的投资。

澳门新葡萄京所有网站 4谷歌新推出的
Google Home Hub 采用的就是 Fuchsia OS

JavaScript开发+原生渲染

比如 Airbnb 工程师希望一个符合其产品目标的补丁能够尽快合并进入 React
Native 框架,不幸的是,React Native
的开发生命周期为每四周发布一次。如果这次没通过,他们将不得不等待差不多一个月,来重新审查或采用他们的修改。

Flutter 与 Fuchsia 操作系统一样,采用 Dart 作为底层编程语言。Dart
由于其预编译和高兼容等特色,使得其可以在 iOS 设备上无缝高速运转。而
Flutter 作为其架构,完美得绕过了 JSCore
这个桥接,可以直接在机器上渲染图形,这比 React Native
要前进了一大步,与原生相比效率上几乎无差别;在兼具热加载和跨平台等优点的基础上,Flutter
又拥有丰富成熟的控件,这些噱头已经足够吸引开发者。在实际开发中,Reflectly
的工程团队证明,React Native 在跨平台上造成的小毛病在 Flutter
上完全看不到,其跨平台可靠性、热加载高效性、工具链丰富性、文档的高可读性都给整个开发过程带来了非常愉快的体验。

这类开源框架的代表主要是Facebook的React
Native、阿里的Weex,当然也有未开源的美团的Picasso,以及最新推出的快应用。JavaScript开发+原生渲染的方式主要优点如下:

随着 Airbnb 的发展加速,他们无法承担其中的风险。由于劣势高于优势,促使
Airbnb 重新考量,并最终放弃 React Native 开发。

如此优越的先天条件使得 Flutter 目前在 Github 上已经拥有了48000+的
Star。Google 在优达学城开放了入门课程,同时自己在 Google Ads
上投入使用。国外的大厂有 Capital One、Groupon 已经开始尝试
Flutter,而国内的阿里巴巴、腾讯、京东更是作为 Google 的合作伙伴使用
Flutter。

采用Web开发技术栈,社区庞大、上手快、开发成本相对较低。原生渲染,性能相比H5提高很多。动态化较好,支持热更新。

此外,虽然除了 React Native 之外还有其他的跨平台替代方案,比如 Google 的
Flutter 和微软的 Xamarin
,但和上面提到的类似的问题也都可以在这些框架上面找到,而且这两个框架在
Google 和 Microsoft
中的使用率都相对较低。虽然跨平台框架能解决大多数简单问题,但一些更复杂的问题最终还是需要回到相应移动设备的原生平台来处理。

虽然好评如潮,但是开发者对 Flutter 也有一些忧虑。Reflectly
团队指出,Flutter
对于应用内购买和本地推送这两个功能没有很好的支持;Google Ads
的技术负责人 Mehmet 在 Quora 上则说,Flutter
只是目前阶段的解决方案,当网速足够快时,网站和浏览器就足以取代 App 了 ——
这时候 PWA 才是王道;而闲鱼的宗心同学则是在他的直播中说使用 Flutter
后稳定性稍有下降,而内存占用情况也比较严峻。

当然也有缺点如下:

澳门新葡萄京所有网站 5

总结:Flutter 在2018年异军突起,战略意图明显且优点鲜明,值得一试。

渲染时需要JavaScript和原生之间通信,在有些场景如拖动可能会因为通信频繁导致卡顿。JavaScript为脚本语言,执行时需要JIT,执行效率和AOT代码仍有差距。

来自:softwareengineeringdaily.com 
编译:开源中国

老牌跨平台框架 React Native
在2018年迭代了5个版本:从0.52到0.57,Facebook
依然在对这个框架进行各种尝试。然而,坏消息却是接踵而来,首先是 Airbnb
弃用 React
Native,还连发数篇文章阐明相识相知到累觉不爱的过程。这波有理有据的吐槽的蝴蝶效应则是在开发者中带动了一波
React Native “下车”的大辩论。

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

可能 Facebook 团队也意识到了桥接等性能问题。在 Airbnb 事件之后数周,
React Native
官方就发文宣布重构。主要工作围绕在线程、异步渲染、简化桥接三个方面,整个过程循序渐进,力争不会对已经使用
React Native 的应用和开发者造成重大影响。这之后8月份,全新的
Accessibility API 推出,而这正是 Airbnb 吐槽的大坑。11月初,React Native
发布了2019年的路线图,Facebook 团队决定明年将完成重构并发布稳定的
API,将其推进到1.0正式版。

React Native

如果说 Flutter 是 Google 在 IOT 战略中下的一步棋,那么 React Native 便是
Facebook 在 VR/AR 战略中下的类似一步。去年发布的 React VR 在2018年的
Facebook F8 上与 React Native
深度结合展现出了其优秀的可扩展性。然而无论是 VR 产业的成熟,还是 React
VR 框架的成熟都尚需数年,所以 React Native 在此方面的优势也就仅此而已。

React Native
(简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架
React
在原生移动应用平台的衍生产物,目前支持iOS和Android两个平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

总结:React Native 步履蹒跚,在面对 Airbnb 的抛弃和 Flutter
的竞争下,展现出了一些求生欲。

React
Native的原理和React设计一致,React中虚拟DOM最终会映射为浏览器DOM树,而RN中虚拟DOM会通过
JavaScriptCore 映射为原生控件树。

2018年是第一台 iPhone 发布的第11个年头。很多人都说移动浪潮已过、iOS
工程师没人要、写 iOS 以后就和写网页一样,唱衰的声音此起彼伏。然而
Flutter 的出现像是回应了这种质疑;2019年 React Native 的重构和 Swift 的
ABI 稳定,这也许意味着 iOS 的第二春即将来临。在 Google,Facebook,Apple
三家大厂争霸布局的同时,我们 iOS
开发者则应该保持信心,在苦修内功的同时又抬头看看最新的技术,毕竟 iOS
作为平台也在不断进化,与 AI 和 VR/AR 的结合也督促着我们不断学习。

JavaScriptCore 是一个JavaScript解释器,它在React
Native中主要有两个作用:

  • What Stats and Surveys are saying about Swift in 2018
  • Is Flutter likely to replace Java for Android app development?
  • What’s Revolutionary about Flutter
  • Flutter 1.0: Google’s Portable UI Toolkit
  • Reflectly — From React Native to Flutter
  • State of React Native 2018
  • Open Source Roadmap
  • Airbnb: React Native 从选择到放弃
  • 基于Flutter的产品应用实践

为JavaScript提供运行环境。是JavaScript与原生应用之间通信的桥梁,作用和JsBridge一样,事实上,在iOS中,很多JsBridge的实现都是基于
JavaScriptCore 。

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

布局消息传递;
将虚拟DOM布局信息传递给原生原生根据布局信息通过对应的原生控件渲染控件树

由于React
Native是原生控件渲染,所以性能会比混合应用中H5好很多,同时React
Native是Web开发技术栈,只需维护一份代码,即可在多个平台上使用。

Weex

Weex是阿里巴巴于2016年发布的跨平台移动端开发框架,思想及原理和React
Native类似,最大的不同是语法层面,React
Native使用React.js作为开发框架,而Weex则使用Vue.js作为开发框架。Vue和React堪称前端领域最火的JavaScript框架,它们的易用性和功能性都非常强大,Weex在淘宝上也有广泛的应用。

快应用

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

快应用自身不支持Vue或React语法,其采用原生JavaScript开发,其开发框架和微信小程序很像,值得一提的是小程序目前已经可以使用Vue语法开发(mpvue),从原理上来讲,Vue的语法也可以移植到快应用上。React
Native和Weex的渲染/排版引擎是集成到框架中的,每一个APP都需要打包一份,安装包体积较大;而快应用渲染/排版引擎是集成到ROM中的,应用中无需打包,安装包体积小,正因如此,快应用才能在保证性能的同时做到快速分发。自绘UI+原生

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

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

不足之处:

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

Flutter 是
Google推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过
Dart语言开发 App,一套代码同时运行在 iOS 和 Android平台。
Flutter提供了丰富的组件、接口,开发者可以很快地为 Flutter添加原生扩展。

Flutter既不使用WebView,也不使用操作系统的原生控件。
相反,Flutter使用自己的高性能渲染引擎来绘制widget。这样不仅可以保证在Android和iOS上UI的一致性,而且也可以避免对原生控件依赖而带来的限制及高昂的维护成本。

Flutter使用Skia作为其2D渲染引擎,Skia是Google的一个2D图形处理函数库,包含字型、坐标转换,以及点阵图都有高效能且简洁的表现,Skia是跨平台的,并提供了非常友好的API,目前Google
Chrome浏览器和Android均采用Skia作为其绘图引擎,值得一提的是,由于Android系统已经内置了Skia,所以Flutter在打包APK(Android应用安装包)时,不需要再将Skia打入APK中,但iOS系统并未内置Skia,所以构建iPA时,也必须将Skia一起打包,这也是为什么Flutter
APP的Android安装包比iOS安装包小的主要原因。

但是Flutter也有不足之处,不支持动态下发代码和热更新。

PWA(Progress Web App)

PWA不属于上述跨平台开发的某一种,它是一种理念,PWA 本质上是 Web
App,借助一些新技术也具备了 Native App
的一些特性,比如离线能力、本地缓存、和通知推送,兼具 Web App 和 Native
App
的优点,看起来更像一个原生App。PWA完全使用前端技术栈,不过它需要手机和浏览器的支持,目前支持ServiceWorker和Google
Play
Service的Android手机,以及搭载11.3以上的iOS手机可以使用PWA。由于国内手机厂商和浏览器厂商的统一性问题,PWA在国内发展不是很好,但是在国外并没有这些问题。

大前端趋势

大前端不仅会成为移动开发与Web前端的发展趋势,也将会是未来的显示设备终端的开发技术趋势。大前端将做更多的终端开发、工程化等工作,而不仅仅只是开发Web页面。大前端工程师将能搞定所有端上的开发。与充满争议的全栈工程师相比,它更具可操作性。但同时对开发者而言,要会更多的技术栈,比如原生开发者要学习html、css、js等前端知识,前端开发人员也要学习Android或iOS的原生开发技术,然后了解一下常见的跨平台技术,只有这样才能更好的融入到大前端的这个大家庭中。

更多精彩请关注我的微信公众号。

作者:码出世界来自: