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 2, NativeScript 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:
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.