1.
Building our App with
React Native
October 2016

2.
Nuxeo Platform
An Open Source platform to develop your own content apps
Provides a REST API
Multiple clients
● Web Application
● Desktop Synchronization
● Mobile Application

3.
Nuxeo Mobile for Browsing Assets

4.
Why React Native?

5.
What we tried?
2011: First android SDK
2012: Old jQuery Mobile app using Apache Cordova
2013: iOS SDK
2015: Tests using RoboVM / j2objc
2016: React Native

6.
JavaScript to Build a Native App
Real native app, not a responsive web UI
No real native developers @ Nuxeo
Leverage our own JavaScript client
Powerful way to build a native app for both iOS and Android
Supported by Facebook

7.
Our feedback

8.
React Native
Bootstrap an app on iOS and Android in 10 minutes!
Active GitHub community
Short release cycle

9.
External Modules
Large set of modules available in the npm registry
● Navigation: react-native-router-flux
● Internationalization: react-native-i18n
● File access: react-native-fetch-blob
○ Manage easily blob on local FS

10.
For Developers (us!)
Code in ES6!
Easy layout with Flexbox
Productivity and debugging tools
● Live / Hot reload
● Inspector
● Remote debugging with Chrome

11.
For Developers (us!)
Easy creation of reusable UI components
Easy use of the native bridge
● Sharing actions on iOS
● Download manager on Android
Same code base for both platform (+90% of shared code)

12.
Issues / Limitations
Slight style differences between iOS and Android
Different set of props depending on the platform
Frequent React Native upgrades

13.
Build, Release and Delivery
React Native app well integrated with a bunch of tools
● npm
● CocoaPods
● Gradle
● Fastlane
● Jenkins

14.
Delivery Workflow

15.
Final Step: Slack Notification

16.
Next Steps
Automated Android delivery
Functional testing
Automated Screenshots for releases

17.
Next Steps
Refactoring by extracting more components
Provide an Open Source Nuxeo library with reusable components

18.
Questions?

19.
Thanks!

20.
For Developers (us!)
Easy creation of reusable UI components
(TODO EXAMPLE?)
PageProviderListView code sample
Usage + content of PageProviderListView#render
Une slide : screenshot de la liste Search
Une slide : code sample