Could you introduce your app in a few sentences?
Investo is an application we developed for BNP Paribas, the French banking group.
The app was designed to reach mass audience, with the focus on people who want to discover and learn how financial investments work. In the app, you can read tutorials and guides about financial markets and investment funds with quizzes at the end to check your knowledge.
You can then choose funds and start simulations to see how your investment strategy is working!
A monthly competition is held where you can make virtual investment in funds and see how you compare with your friends and other users.
It's a great way for anyone wanting to learn about financial markets and investment to get started without any risk.
What made you decide to use/switch to React Native?
At BAM we're interested in the great advantages of using cross-platform frameworks to develop applications. We developed a few applications using Cordova. Even if good results can be achieved with great care, we were actively looking at React Native for the improved performance and the "native feeling" provided for the user by the usage of native components, while enabling us to keep one team for developing on both iOS and Android. When Facebook released the first versions of React Native with Android support, we decided to give it a go.
Even if there were rough corners, the quality of the experience of the resulting apps was much better. We compared it to other solutions (like Xamarin, Titanium or Native Script), actively looked at the community around RN, and followed the pace of React Native evolutions to make sure it is a good long-term solution.
At the time we started working on Investo, the app was built with Cordova and Ionic 1. We decided to switch and start again with React Native, mainly to address performance issues and benefit from a cleaner architecture thanks to React and Redux.
How did you transition to React Native?
We started the first version of the app using Ionic 1 and Cordova, but the app was suffering from poor performance, in particular when rendering large lists of funds. Transitions were also laggy, especially on Android, and the whole app felt a bit unresponsive. We tried a few optimization but without much success, and Angular.js wasn't adapted for handling screens with a lot of data: it's hard to fully control the lifecycle of what is displayed on screen and data flow is harder to reason about. We rebuilt a few components in React.js (using ngReact to integrate them in Angular.js) but this was still a pain to handle properly.
As all of our new projects were started with React Native and we were very satisfied with the result, we decide to start from scratch and rebuild the whole app using React Native. Most developers were even more used to React.js / React Native than Angular.js so this wasn't a problem for the development team.
The result was immediately better: we built a first version in a few weeks, and then decided to go with it and abandon the previous version. We were able to much more easily handle large lists (using FlatList), have a proper navigation and make the whole app feel snappy. Having native UI components brings a noticeably better user experience: buttons feedback, lists scrolling, and we could afford animations that weren't properly displayed in the old version.
Have your tried other cross platform technologies before using React Native?
At BAM we've always been advocates of cross-platform technologies and we've mainly used Cordova before switching to React Native when Facebook open-sourced the Android version of it.
Cordova/Phone Gap is a great framework and we're still interested in web technologies and seeing how things are evolving. At the time we were using Ionic 1 with Cordova, it was still difficult for us to create apps that had a "native feeling" for the users. This could be better now with Ionic 2 and components based UI libraries (Angular for Ionic 2), but we still prefer to keep working with React Native for most projects.
An interesting advantage of React Native is how quickly you can dig into the native code. In particular, it's really easy to add some Java/Objective-C (or even Kotlin/Swift) code and bridge it to Javascript methods. In my view this is a real improvement compared to Cordova were one had to create a module before being able to write native code - it's so much faster
with React Native.
React Native rendering native components is also a big advantage, because we are sure we can take advantage of almost anything that could be exposed by native SDKs.For a new mobile developer, you are able to both get started quickly with React Native and gradually learn about native development if you need it in your app.
Compared to other frameworks like NativeScript, one big advantage of React Native seems to be its popularity and larger community. It's nice to see other frameworks having this native rendering/JS engine architecture.
Progressive Web Apps might be the next big thing for cross-platform apps and we keep a close eye on it. We've used React Native For Web to port some parts of our React Native app to a PWA and have both versions available from the single codebase.
More generally, I'm personnally a big fan of cross-platform frameworks. Similar things exists in video game development, for example Cocos2d-JS which is doing native rendering with Cocos2d-x API and embedding a JS engine (Spidermonkey) to run the game logic. I also like how Electron is bringing web technologies to the desktop - and it's a perfect match with React.js. I've never tried React Native macOS or React Native Windows but it would be awesome to have React Native fully supporting these platforms - "Learn once, write anywhere".
What has your experience been working with React Native in terms of app performance, have you noticed any impacts?
The app performance is way better than the previous version. We've have experienced a few slow downs but most of the time it's due to large re-renderings of the component tree. React provides us with ways to improve this, for example with shouldComponentUpdate to avoid re-rendering components when we know that nothing has changed.
We're using Redux in the app, and sometimes connected components were taking too much time to render after a change in the store, so we worked to improve this (using shouldComponentUpdate or avoiding changing a large part of the state when it's not necessary). We're now satisfied with the performance!
These kind of optimization are quite usual with React Native and React.js apps, so it's not too hard to find help and documentation about this.
How has adopting React Native affected developer productivity?
Most developers are efficient in a few weeks, even the more junior ones, after learning the basis of React, the components specific to React Native and mobile development specificities in general.
Hot reloading is very handy when it comes to work on styling, and in general with React Native it's really simple to work on a component.
The most painful part is probably React Native upgrading for each version.
Having a new offical version each month makes it easier to stay on the latest version, compared to the time where there was a new version every 2 weeks (but this was a good thing at the time as React Native was less mature!).
It's still a pain when we have to upgrade native modules and update flow typing for example.
Concerning the latest point, we've even developed a step-by-step tutorial so that every developer at BAM can know how to properly upgrade React Native on an app.
Which tools, libraries and frameworks are part of your development process with React Native?
Most of our apps are based on Redux with middlewares like redux-saga. We've been using MobX for a few apps too, but our default choice is still Redux, and development and debugging is made easier with the devtools provided by React Native Debugger. Most of the apps, including Investo, are written using Flow too, which is mostly nice to improve the developer experience (auto-completion while developing, types are a simple but effective way to document objects/components).
For high quality animations, we've been using Lottie from Airbnb.
IDEs used may vary, but most developers are using Visual Studio Code.
We're relying on Hockeyapp and Code Push for non production deployments. We're using Fastlane to automate all deployment workflows and Bitrise on some projects to have a CI building the apps.
Our stack is also based on Jest + Enzyme for testing (we're fond of snapshot testing) and we're taking a look at Detox for end to end testing. We using Circle CI or Travis CI for running our tests. We've also being using Sentry on a few projects to get nice crash reporting!
For coding style and formatting, we're using eslint and newer projects have also adopted prettier.
What resources have you used to learn React Native? Books, tutorials, courses etc. Anything you can recommend?
Developers at BAM watch the React Native Fundamentals course by Tyler McGinnis on egghead.io. It provides a good introduction to React Native and the most used concepts of a mobile application. We also recommend watching Getting started with redux by Dan Abramov on egghead, which allow you to get a very good understanding of Redux!
For other tools and libraries, we rely on tutorials or our own public knowledge base. It's a collection of standards, articles and tutorials explaining how to achieve certain tasks. Some are very specific to React Native, like setting up project icons, other are more general, like setting up debuggers, deployment ...
This is a public repository so everyone is welcome to help us to gather more knowledge here about React Native and related mobile libraries/tools/technologies: PRs are welcome!
What are some things that you don’t like about React Native or that need to be improved?
React Native is still evolving a lot, at a fast pace, which is great but makes the whole ecosystem a bit unstable, so it can be hard to find rock solid foundations to use for an app. For example, there have been a lot of different navigation libraries (we're now mainly using
React Navigation).
It's also hard to find something that is production-ready when you want to have native navigation. We have being using native-navigation from Airbnb for one of our apps but we made a fork to implement tweaks and fixes.
Another pain point is that it can be hard to upgrade to a recent version of React Native. Breaking changes still occur from time to time, and the tooling also needs upgrades, for example, newer versions of Flow can introduce new errors that need to be fixed. For large changes, codemods are sometime available, which is rely nice and speeds up the upgrade a lot!
We made a few open-source packages, including react-native-image-resizer which is a native module. Here also, it's somewhat hard to keep track of the changes in React Native - you have to follow the release notes of RN to see if anything needs to be updated. Note that breaking changes are less frequent now and the few times we needed to make a change, someone from the community opened a Pull Request.
Anything else you would like to mention?
So far, we've been very satisfied with React Native! We started using it when Android support was released and became specialised in it since then. It was a real game changer for us compared to any other mobile cross platform framework that we've tried/used.
We're making Investo with BNP Paribas, but at our company BAM we're also working with other small or big companies to create apps using React Native. The whole team is focusing on how to quickly solve the business problem of our customers, with great care given to UX design and developers working daily with the Product Owners. Our work methodology is quite unique, based on Scrum with ultra short sprints of 1 week to keep iterating quickly and developers challenging the business with the PO.
We're based in Paris and if you are interested, feel free to get in touch with us! You can contact us on our website (in French) or send a message on Twitter: @bam_lab.
We're also involved in the React Native community and we have a bunch of open-source repositories. react-native-image-resizer is a React Native native module to resize images directly on the phone, generator-rn-toolbox is a generator that we use to quickly bootstrap our apps. You can find all of our repositories on github.com/bamlab.
Any contribution is more than welcome!
You might also look at github.com/bamlab/dev-standards, which is our public knowledge base, containing lots of information about how to solve specific problems with React Native, mobile development or development in general. Our blog, also contains React Native related articles and articles about various other subjects: backend, deployment etc. We also publish our reviews of conferences where we had speakers
like React Native EU or React Next.