React vs React Native use and potential: A developer’s review

A powerful impression

After visiting an IT conference about JavaScript Frameworks, I was left with a strong positive impression toward React for web and React Native for development of cross-platform mobile applications. I won’t be at all surprised if ekreative winds up using them for this purpose at some stage in the future.

Happy with what we’ve got

Why is that? What do we have now? We have a lot of good experience in developing cross-platform mobile applications using Ionic which uses Cordova. Ionic is growing up fast and is now already a large service which integrates well with other services and makes our life much easier. Our favourite JS framework is AngularJS (on which Ionic framework is written) and really we’ve become very successful by becoming experts at using JS in the front-end for any web application.

If things are looking so good with Ionic, why are you checking out other options? If it’s not broke, don’t fix it! We’re not a small, fast growing company, desperate to be seen implementing every fashionable new trend in technology and it’s true that right now React and React Native could definitely be described as fashionable trends.

Hybrid vs Native

However, as our company has matured, our projects have tended to become more complicated, but the user should never feel that that’s the case; for the user the app should always remain fast and easy to use. We know that hybrid mobile apps always lose to native apps in terms of speed and responsiveness. React Native offers a solution to this problem. Using React Native, one developer could make a native app for multiple platforms (actually at the moment it just covers iOS and Android). React Native gives us an excellent new technology and the tools needed to create a native app controlled by JS.

Faster (if you know how)

React and React Native were created by some pretty smart guys at Facebook. They used this technology in their Facebook and Instagram applications. It’s a technology and approach which was invented specifically to make the web faster. React is already widely used by developers and you can use it with confidence. React Native on the other hand is a really young framework (first release on 26 March 2015) and if you don’t have a thorough understanding of it, you’re likely to encounter problems with some parts of your functionality.

How I got started

At first I tried React Native, because we mostly use JavaScript frameworks for creating hybrid mobile apps and React Native is a framework for building native apps using JavaScript and React. Not a JS app in WebView, but an absolutely native app. Wow!

I set up everything on my MacOS X as advised in the React Native Documentation, installed the SDKs and command line tools, built the sample project and voila it worked. I can run the app at the same time in Android and IOS simulators, change mutual code and the apps reloaded live in the simulators. It’s so cool! Than I tried creating a simple page by following this tutorial and this is where I first encountered React.

React

React is a javascript library for building user interfaces. Supposedly, “people choose to think of React as the V in MVC architecture.” So we could use it as a view with another framework or in our custom created applications. What do we need to know about React? Basically it solves one specific problem in javascript: the building of large applications with data that changes over time. It uses a Virtual DOM, which is why it’s faster than other frameworks which work directly with the browser DOM. This allows it to implement a one-way reactive data flow. When the data changes, React rerenders our view and knows to only update the changed parts. Of course the guys who invented it and who use it claim that React does all of this really fast.

Other features

More features of React and React Native:
– our app builds from components, which we can create. Our app is a tree of components. So we should be thinking in this way when we’re developing, dividing out applications into many components which interact between themselves;
– React allows us to render code on a server and then send to the client to view rather than rendering on the client;
– we can share code (components) between React and React Native;
– React Native uses Flexbox for UI;
– we can write code on EcmaScript 6. You might say “but we can write on ES6 everywhere with Babel”, but React actively encourages it from the off;

Downsides:
– supports only two platforms: iOS and Android
– React Native is still really young and requires a deep understanding to produce results

Learning Curve

So, when using React Native, we should be able to write on React. When you look at it for the first time it seems like it’s generally not that complicated. But when you want to write a real app with logic and with many connections between components and screen (routing and data model), you should have the necessary skill to resolve all problems. The slogan of React Native “learn once, write anywhere” is true, but to make it a reality it’s necessary to really learn a lot.

Yes, perhaps you already know JavaScript, but it’s not enough. You also need to know how to build an app using components, ie. wrappers for native components and APIs. So to some extent you’ll need to understand how native language developers work.

Additional decision making

React is responsible only for view, so we also need to select solutions for data flow and routing ourselves. We also have to decide how to organize and structure the logic of our application. Facebook recommends that we use their solution, Flux and the open source community offers us many of their own libraries for resolving these problems, selecting the best option for our app is down to us.

Conclusion

Using React Native and React looks too complicated at first glance, but given the high potential they hold and the technological benefits they already deliver, learning how to understand and use them effectively seems like a worthwhile investment for the future. In the meantime though, we’ll continue to grow and develop with our existing, reliable Ionic expertise.