Building out our frontend with React Native

I’m Jonathan aka Jonny, a frontend developer for ShareWis since July 2015 when I joined.
Previously I worked with various technologies from C#.NET, Unity3D, C++ and React for the web. However, since we were building a native app for our e-Learning platform which we wanted to release on both the App Store and Play Store with minimal development overhead we looked to React Native as a possible solution.

Facebook created React in 2011 around the time when other SPA frameworks such as Angular, Ember and Backbone were very popular but React differs in that its not a full Javascript framework with Models and Controllers but rather just provides the View layer part of MVC. React Native was created after the success of React in 2015 and basically is a way to write truly Native apps entirely in Javascript(or ES6 via Babel transpiler) which output iOS UI components when compiled for iOS or Android UI components when compiled for Android and all with one codebase. In reality parts of the code will need to be modified for Andriod/iOS specific functionality but the key idea with React and React Native is summed up in their slogan.

“Learn once, write everywhere”

Reacts main strengths

One-way data flow
Data is passed to components via props from the parent down to its children and actions flow up the tree causing the data at the root to be modified and as a result the entire UI is re-rendered on every change. This may seem very inefficient but React employs an intelligent diffing algorithm somewhat like how git source control diffing works and only re-renders the necessary DOM elements making React extremely fast.
Virtual DOM
The virtual DOM is an in-memory cache where React initially renders to and computes the differences that need to be rendered to the browsers DOM. This allows the developer to write code as if it will re-render the entire page on each change while behind the scenes React efficiently renders only the subcomponents that change.
JSX
Another key difference between React and other Javascript frameworks such as Angular, Ember and Backbone etc, is that React keeps all its markup and Javascript code in the same file. JSX is a Javascript syntax extension which allows developers to write markup for the views with functional Javascript features such as map and bind to dynamically generate the UI.

While building the ShareWis app for iOS it was very easy to prototype ideas very quickly due to the excellent development tools React Native provides such as the ability to debug the Javascript running in the native app from Chrome and even the ability to place breakpoints and inspect the state of the application. React Hot Loader allowed us to make a change to a file and immediately see it update in the iOS simulator. This allowed for a very efficient development workflow and increased programmer happiness 🙂
React lacked the Model and Controllers layers, only providing the View layer of the application however the community for React is extremely vibrant and are creating libraries to fill the gaps mostly around the data layer. One such library is Flux which is an application architecture helping to build out the client side application utilizing a unidirectional data flow. Flux is more of a pattern than a formal framework and there have been many implementations of it and all slightly different in their approach. The one that is getting most attention recently is called Redux.
We have plans to introduce this into our current architecture here at ShareWis.
Overall the experience building out our frontend with React Native has been very positive and it felt nice to be able to build native UI by just writing Javascript code and felt very similar to writing applications for the web. This is why Facebooks slogan for React makes so much sense, “Learn once, write everywhere”.

Digging Depper：