{"action":"created","issue":{"url":"https://api.github.com/repos/tmallfe/tmallfe.github.io/issues/18","labels_url":"https://api.github.com/repos/tmallfe/tmallfe.github.io/issues/18/labels{/name}","comments_url":"https://api.github.com/repos/tmallfe/tmallfe.github.io/issues/18/comments","events_url":"https://api.github.com/repos/tmallfe/tmallfe.github.io/issues/18/events","html_url":"https://github.com/tmallfe/tmallfe.github.io/issues/18","id":66459127,"number":18,"title":"React Native概述：背景、规划和风险","user":{"login":"luics","id":1018815,"avatar_url":"https://avatars.githubusercontent.com/u/1018815?v=3","gravatar_id":"","url":"https://api.github.com/users/luics","html_url":"https://github.com/luics","followers_url":"https://api.github.com/users/luics/followers","following_url":"https://api.github.com/users/luics/following{/other_user}","gists_url":"https://api.github.com/users/luics/gists{/gist_id}","starred_url":"https://api.github.com/users/luics/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/luics/subscriptions","organizations_url":"https://api.github.com/users/luics/orgs","repos_url":"https://api.github.com/users/luics/repos","events_url":"https://api.github.com/users/luics/events{/privacy}","received_events_url":"https://api.github.com/users/luics/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":48,"created_at":"2015-04-05T16:55:25Z","updated_at":"2015-11-19T11:38:04Z","closed_at":null,"body":"[announce]:http://facebook.github.io/react/blog/2015/03/26/introducing-react-native.html\r\n[why-react]:http://facebook.github.io/react/blog/2013/06/05/why-react.html\r\n[bring]:https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/\r\n\r\n[Facebook在3.26 F8大会上开源了React Native](http://facebook.github.io/react/blog/2015/03/26/introducing-react-native.html)，本文是对React Native的技术背景、规划和风险的概述。看得比较仓促，问题处请直接回复。\r\n\r\n组里的同学于4.2完成了天猫iPad客户端“猜你喜欢”业务的React Native改造（4月中发版）。**本周开始陆续放出性能/体验、稳定性、扩展性、开发效率等评估结果**。\r\n\r\n![](http://gtms04.alicdn.com/tps/i4/TB1dX3wHpXXXXaXXpXX5ef1RVXX-618-468.png)\r\n图1 - 4.2已完成React Native改造的业务\r\n\r\n## 背景\r\n\r\n### 为什么需要 React Native\r\n\r\n> What we really want is the ***user experience*** of the ***native mobile*** platforms, combined with the ***developer experience*** we have when building with ***React*** on the web.\r\n\r\n摘自[3.26 React Native的发布稿][announce]，加粗的关键字传达了React Native的设计理念：***既拥有Native的用户体验、又保留[React](http://facebook.github.io/react/index.html)的开发效率***。这个理念似乎迎合了业界普片存在的痛点，开源不到1周github star破万，目前是11000+。\r\n\r\n![](http://gtms04.alicdn.com/tps/i4/TB14vkBHpXXXXc5XpXX7_PDOpXX-1260-102.png)\r\n图1 - [React Native github](https://github.com/facebook/react-native/)\r\n\r\nReact Native项目成员Tom Occhino发表的[React Native: Bringing modern web techniques to mobile][announce]（墙外）详细描述了React Native的设计理念。Occhino认为尽管Native开发成本更高，但现阶段Native仍然是必须的，因为Web的用户体验仍无法超越Native：\r\n\r\n1. Native的原生控件有更好的体验；\r\n2. Native有更好的手势识别；\r\n3. Native有更合适的线程模型，尽管Web Worker可以解决一部分问题，但如图像解码、文本渲染仍无法多线程渲染，这影响了Web的流畅性。\r\n\r\nOcchino没提到的还有Native能实现更丰富细腻的动画效果，归根结底是现阶段Native具有更好的人机交互体验。**笔者认为这些例子是有说服力的，也是React Native出现的直接原因**。\r\n\r\n![](http://gtms01.alicdn.com/tps/i1/TB1JE3DHpXXXXaVXXXX4nb1JpXX-1164-1062.png)\r\n图2 - Occhino在F8分享了React Native（Keynote）\r\n\r\n### “Learn once, write anywhere”\r\n\r\n“*Learn once, write anywhere*”同样出自Occhino的[文章][bring]。因为不同Native平台上的用户体验是不同的，React Native不强求一份原生代码支持多个平台，所以不提“Write once, run anywhere”（Java），提出了“Learn once, write anywhere”。\r\n\r\n![](http://gtms01.alicdn.com/tps/i1/TB1MOEBHpXXXXcWXpXXjG9vFFXX-1132-642.png)\r\n图3 - “Learn once, write anywhere”\r\n\r\n这张图是笔者根据理解画的一张示意图，自下而上依次是：\r\n\r\n0. **React**：不同平台上编写基于React的代码，“Learn once, write anywhere”。\r\n1. **Virtual DOM**：相对Browser环境下的DOM（文档对象模型）而言，Virtual DOM是DOM在内存中的一种轻量级表达方式（原话是[lightweight representation of the document][bring]），可以通过不同的渲染引擎生成不同平台下的UI，[JS和Native之间通过Bridge通信](http://blog.cnbang.net/tech/2698/?from=groupmessage&isappinstalled=1)。\r\n2. **Web/iOS/Android**：已实现了Web和iOS平台，[Android平台预计将于2015年10月实现](http://facebook.github.io/react/blog/#when-is-react-native-android-coming)。\r\n\r\n前文多处提到的React是Facebook 2013年开源的Web开发框架，笔者在翻阅其[2013年发布稿][why-react]时，发现这么一段：\r\n\r\n![](http://gtms02.alicdn.com/tps/i2/TB1fJACHpXXXXbcXpXXjeeZTVXX-1302-452.png)\r\n图4 - 摘自React发布稿（2013）\r\n\r\n0. 加亮文字显示2013年已经在开发React Native的原型，现在也算是厚积薄发了。\r\n1. 最近另一个比较火的项目是[Flipboard React Canvas](https://github.com/Flipboard/react-canvas)(详见 @rank)，渲染层使用了Web Canvas来提升交互流畅性，这和上图第一个尝试类似。\r\n\r\nReact本身也是个庞大的话题不再展开，详见[React wiki](https://github.com/facebook/react/wiki/Complementary-Tools)。\r\n\r\n笔者认为“Write once, run anywhere”对提升效率仍然是必要的，并且和“Learn once, write anywhere”也没有冲突，我们内部正在改造已有的组件库和HybridAPI，让其适配（补齐）React Native的组件，从而写一份代码可以运行在iOS和Web上，待成熟后开源出来。\r\n\r\n> 持续更新\r\n\r\n## 规划\r\n\r\n下图展示了业务和技术为React Native所做的改造：\r\n\r\n![](http://gtms03.alicdn.com/tps/i3/TB1WRUDHpXXXXa4XXXXa34RTVXX-1406-948.png)\r\n图5 - 业务和技术改造\r\n\r\n自下而上：\r\n\r\n0. React Node：React支持服务端渲染，通常用于首屏服务端渲染；典型场景是多页列表，首屏服务端渲染翻页客户端渲染，避免首次请求页面时发起2次http请求。\r\n1. React Native基础环境：\r\n    2. Framework集成：尽管React Native放出了[*Integration with Existing App*](http://facebook.github.io/react-native/docs/embedded-app.html#content)文档，集成到现有复杂App中仍然会遇到很多细节问题，比如集成到天猫iPad客户端就花了组里iOS同学2天的时间。\r\n    0. Networking改造：主要是重新建立session，而session通常存放于http header cookie中，React Native提供的网络IO [fetch](https://fetch.spec.whatwg.org/#forbidden-header-name)和XMLHttpRequest不支持改写cookie。所以要不在保证安全的条件下实现fetch的扩展，要么由native负责网络IO（已有session机制）再通过HybridAPI由JS调用，暂时选择了后者。\r\n    0. 缓存/打包方案：只要有资源从服务器端加载就避免不了这个话题，React Native也是如此，缓存用于解决资源二次访问时的加载性能，打包解决的是资源首次访问时的加载性能。\r\n0. MUI是一套组件库，目前会采用向React Native组件补齐的思路进行改造。\r\n1. HybridAPI是阿里一组Hybrid API，此前也在多个[公开场合](http://luics.com/demo/hybrid-api/hangjs/#/)分享过不再累述，[React Native建立了自己的通信机制](http://blog.cnbang.net/tech/2698/?from=groupmessage&isappinstalled=1)（@bang），看起来更高效（未验证），改造成本不大。\r\n2. 最快的一个业务将于4月中上线，通过最初几个业务改造推动整体系统的改造，如果效果如预期则会启动更大规模的业务改造。\r\n\r\n\r\n> 更多详细规划和进展，以及性能、稳定性、扩展性的数据随后放出。 \r\n\r\n## 风险\r\n\r\n1. 尽管Facebook有3款App(Groups、Ads Manager、F8)使用了React Native，随着React Native大规模应用，Appstore的政策是否有变不得而知，我们只能往前走一步。\r\n2. React Native Android 预计2015年10月才发布，这对希望三端（Web/iOS/Android）架构一致的用户而言也算个风险。\r\n0. [iOS6 JavascriptCore为私有API](http://stackoverflow.com/questions/23514579/javascriptcore-framework-availability-on-ios)，如在iOS6上使用有拒审风险。\r\n0. [ListView 性能问题需要持续关注](https://github.com/facebook/react-native/issues/499)（react-native github issue）\r\n\r\nReact Native相对于Webview和Native的优势和劣势 @berg 也给出了较详细的描述，可以相互参照。\r\n\r\n> 持续更新...\r\n\r\n鬼道  \r\n2015.4.6"},"comment":{"url":"https://api.github.com/repos/tmallfe/tmallfe.github.io/issues/comments/158031281","html_url":"https://github.com/tmallfe/tmallfe.github.io/issues/18#issuecomment-158031281","issue_url":"https://api.github.com/repos/tmallfe/tmallfe.github.io/issues/18","id":158031281,"user":{"login":"Creemli","id":5566981,"avatar_url":"https://avatars.githubusercontent.com/u/5566981?v=3","gravatar_id":"","url":"https://api.github.com/users/Creemli","html_url":"https://github.com/Creemli","followers_url":"https://api.github.com/users/Creemli/followers","following_url":"https://api.github.com/users/Creemli/following{/other_user}","gists_url":"https://api.github.com/users/Creemli/gists{/gist_id}","starred_url":"https://api.github.com/users/Creemli/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Creemli/subscriptions","organizations_url":"https://api.github.com/users/Creemli/orgs","repos_url":"https://api.github.com/users/Creemli/repos","events_url":"https://api.github.com/users/Creemli/events{/privacy}","received_events_url":"https://api.github.com/users/Creemli/received_events","type":"User","site_admin":false},"created_at":"2015-11-19T11:38:04Z","updated_at":"2015-11-19T11:38:04Z","body":"我竟然没找到猜你喜欢那个模块。。。"}}