BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

Angular 2搭配React Native

| 作者 Abel Avram 关注 7 他的粉丝 ,译者 顾俊 关注 0 他的粉丝 发布于 2016年4月26日. 估计阅读时间: 4 分钟 | GMTC大前端的下一站,PWA、Web框架、Node等最新最热的大前端话题邀你一起共同探讨。

Angular 2的架构让它有可能使用多种渲染引擎来渲染应用,其中包括React Native。

为Angular 2的基础架构做出的决定中有一个是将框架分为两个层级:一层是核心,其处理组件,指令,过滤器,服务,路由,修改检查,DI和 I18n;另一层是渲染引擎,其处理DOM,CSS,动画,模板,web组件,自定义事件等等。核心可以在独立的进程中执行,这样就将其从界面中解耦出来,而且在核心有很多的任务要处理时,这样可以让界面的响应更快。关于这个决定的详细内容可以在Angular 2渲染架构文档中找到。

传统上渲染一个Angular.JS应用是通过DOM在浏览器中完成的,但是现在有可能通过其他的渲染引擎来渲染应用,包括桌面的或者移动端的原生渲染引擎,甚至还有服务器端。Angular 2渲染一文中更加仔细地解释了如何使用不同的渲染引擎来完成此工作。

从主应用中将渲染独立出来有多种益处。据Google的工程师主管Brad Green说,Angular 2应用可以运行在Node.js上,而且速度相当快。“你可以在此环境下运行Photoshop,所以为何不呢?”,Node.js提供了文件系统,进程和硬件所需的入口。而且,Angular 2可以通过Angular Electron运行在桌面上,或者在微软的UWP上

在移动设备端,Angular 2提供了一些选择项比如Ionic 2NativeScript或者React Native。对于最后一个,有个使得用React Native渲染Angular 2应用变得有可能。开发者可以调用所有React Native提供的API和polyfill来使用iOS和Android的原生功能,然后回调可以按需在Angular Zone中执行。据Marc Laval所说,原生移动开发和web开发很类似,除了是使用不同的组件而不是HTML和CSS提供的那些:

  • 通用组件:Image,Picker,RefreshControl,ScrollView,Switch,Text,TextInput,View,WebView

  • Android特定组件:DrawerLayout,PagerLayout,ProgressBar, Toolbar

  • iOS特定组件:ActivityIndicator,DatePicker,MapView,Navigator,ProgressView,SegmentedControl,Slider,TabBar

应用风格是按照React Native的风格,手势是由Hammer.js处理的。Laval在下图中详细说明了一个React Native + Angular 2应用的架构:

他解释说:

技术上来说,一个React Native应用运行了三个线程。主要的一个是JS线程,在这里所有的JS代码可以被执行;它控制了整个应用。其它两个线程运行着应用的原生的部分:标准主UI线程,和一个“shadow”线程用来测量和布局。

原生和JS这两块通过一个桥双向通信。这意味着有Bridge JS API来获取原生的功能特性(网络,地理位置,剪贴板等等)而且可以操作原生的元素,然后原生的事件被传回到JS模块。

在不久的将来,Angular 2的团队计划创建一个新的动画模块,而React Native的团队打算在原生端获得更优的性能,而且Facebook会支持UWP

查看英文原文Combining Angular 2 with React Native


感谢张龙对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ@丁晓昀),微信(微信号:InfoQChina)关注我们。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT