React Native, as a new way to develop mobile applications with little to no knowledge about native development, allowed us to go from nothing to a released mobile app in less than 3 months. This presentation will cover: Why did Nuxeo choose React Native for its new mobile application, what are the advantages for us and how did we work around: issues / limitations.
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
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
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
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