Starting from this, we pushed the idea forward and are now pleased to share a library to build your own React Native applications with Angular 2 for iOS and Android:
The TodoMVC of the Kitchen Sink demo application in iOS (left) and Android (right)
It’s all about cross-platform apps
The strategy of Angular 2 is to provide a single platform that developers can use to target all channels and devices:
With a similar intent, React Native was created by the React team to provide a unified developer experience for web and mobile application development, with JS and React. Here, applications render native UI as they directly use actual UI components - i.e. there is no Cordova or WebView involved.
Integrating Angular 2 and React Native together is a great solution for the mobile application channel!
A React Native renderer for Angular 2
That’s exactly what the library really is - a renderer which glues Angular 2 and React Native together (see the technical details below). With it, developers can create applications where the best of both world can be used in terms of features and tools.
They key is that, in such applications, the Angular 2 part is just standard, with the usual directives, modules, dependency injection, change detection, etc.
So all the skills and code can be shared to do cross-platform development!
Well, to be honest, they are almost standard, because there is no such thing as HTML or CSS in a native application. Instead, in their templates, developers will take advantage of the provided ambient components as basic bricks to build applications:
- Image, Picker, RefreshControl, ScrollView, Switch, Text, TextInput, View, WebView - that are common to both Android and iOS
- Android specific: DrawerLayout, PagerLayout, ProgressBar, Toolbar
- iOS specific: ActivityIndicator, DatePicker, MapView, Navigator, ProgressView, SegmentedControl, Slider, TabBar
Moreover, to guarantee a great developer experience, the library ensures that all Angular 2 features are usable, including the router and http modules.
It also provides advanced gestures recognition based on Hammer.js. Reacting to a tap, a swipe or a pinch in an application is as easy as reacting to a click in a website.
Finally, it also integrates the APIs of React Native, making sure they all work seamlessly with zone.js, e.g. network, geolocation, async storage, clipboard, etc.
Try it today!
To start a new project quickly, you should have a look at the angular2-react-native-seed project on Github and read the documentation.
From the react-native-renderer itself, you can also build and play with demo applications for both Android and iOS. They showcase all components and features available.
How does it work?
Here is the full picture where the blue parts are from React Native, and the red ones from Angular 2:
Architecture of a React Native application with Angular 2
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.
Angular 2 fully decouples the rendering from the core of the application where live all the components, directives, dependency injection, change detection, etc. By default it renders to DOM, but makes it possible to create custom renderers. This is explained in depth in Rendering in Angular 2 by Matias Niemelä.
So, let’s take a step back and put all pieces together:
a React Native application…
...in which an Angular 2 application runs in the JS thread…
...with a custom renderer that uses the JS APIs to create a native UI.
That’s it!
What’s next?
We have just entered the alpha phase which is necessary to get first feedbacks, fix bugs and implement more features.
Then, as next steps, we will look at:
- Animations: Angular 2 will have a brand new animation module. At the same time, the React Native team is working hard to push animations on the native side to get more performance. These two need to work together to bring awesome animations.
- Extensibility: React Native provides a subset of the features and components that exist in the Native world. It can be extended and there is already an active community publishing packages. This has to be made available in the Angular 2 context as well.
- And performance: it is great today but we want to make it lightning-fast.
0 comments: