Building our App with React Native

Building our App withReact Native

October 2016

Nuxeo Platform

An Open Source platform to develop your own content apps

Provides a REST API

Multiple clients

● Web Application● Desktop Synchronization● Mobile Application

Nuxeo Mobile for Browsing Assets

Why React Native?

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

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

Our feedback

React Native

Bootstrap an app on iOS and Android in 10 minutes!

Active GitHub community

Short release cycle

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

For Developers (us!)

Code in ES6!

Easy layout with Flexbox

Productivity and debugging tools

● Live / Hot reload● Inspector● Remote debugging with Chrome

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)

Issues / Limitations

Slight style differences between iOS and Android

Different set of props depending on the platform

Frequent React Native upgrades

Build, Release and Delivery

React Native app well integrated with a bunch of tools

● npm● CocoaPods● Gradle● Fastlane● Jenkins

Delivery Workflow

Final Step: Slack Notification

Next Steps

Automated Android delivery

Functional testing

Automated Screenshots for releases

Next Steps

Refactoring by extracting more components

Provide an Open Source Nuxeo library with reusable components

Questions?

Thanks!

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