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.
“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.
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.