BT

Combining Angular 2 with React Native

| by Abel Avram Follow 11 Followers on Apr 20, 2016. Estimated reading time: 2 minutes |

Angular 2’s architecture makes it possible to render an application with various renderers including React Native.

One of the fundamental architectural decisions made for Angular 2 was the separation of the framework in two layers: the core, dealing with components, directives, filters, services, router, change detection, DI, I18n –, and the renderer, dealing with DOM, CSS, animation, templates, web components, custom events, etc. The core can be executed in a separate process, decoupling it from the interface and making the later more responsive when the core has lots of processing to do. More about this decision can be found in the Angular 2 Rendering Architecture document.

Traditionally, rendering an Angular.JS application was done via the DOM inside the browser, but now it is possible to draw the application through other renderers, including native ones on the desktop or mobile devices or even on the server. Rendering in Angular2 explains in more detail how Angular 2 can use different renderers to do its job.

This separation of rendering from the main app has multiple benefits. An Angular 2 application can run on Node.js, being very fast, according to Brad Green, Engineering Director at Google. “You can run Photoshop in this environment, why not?” And Node.js provides the needed access to the file system, processes and hardware. Also, Angular 2 can run on the desktop via Angular Electron or on Microsoft’s UWP.

On mobile devices, some of the options for Angular 2 are Ionic 2NativeScript or React Native. Regarding the later, a library makes it possible to render an Angular 2 application with React Native. Developers can call all the APIs and polyfills that React Native provides for accessing native functionality on iOS and Android, and callbacks can be executed in an Angular Zone where necessary. Native mobile development is similar to the web one, but with different components instead of those provided by HTML and CSS, according to Marc Laval:

  • Common components: Image, Picker, RefreshControl, ScrollView, Switch, Text, TextInput, View, WebView

  • Android specific: DrawerLayout, PagerLayout, ProgressBar, Toolbar

  • iOS specific: ActivityIndicator, DatePicker, MapView, Navigator, ProgressView, SegmentedControl, Slider, TabBar

Application styling is applied with React Native Style and gestures are handled with Hammer.js. Laval detailed the architecture of a React Native + Angular 2 application in the following graphic:

ang2-react-native

He explained:

Technically, a React Native application runs 3 threads. The main one is a JS thread where any JS code can be executed; it controls the full application. The other two run the native part of the application: the standard main UI thread, and a “shadow” thread where measuring and layout occur.

The native and JS sides communicate in both directions through a bridge. This means that there are Bridge JS APIs to access native features (network, geolocation, clipboard, etc) and  manipulate native elements, and that native events are sent back to the JS side.

For the near future, the Angular 2 team plans to create a new animation module while the React Native team intends to get more performance on the native side, and Facebook will add support for the UWP.

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT