Why I tried React Native and how did it go… — Pilot story 1x01

This story is part of a series where I am sharing my experiences on React Native: how I approached and worked with RN Components, APIs, external packages and all sorts of issues. I hope that this series of posts will prove useful to the React Native community and provide helpful insights.

What is this Pilot story?

Hopefully, this is just the beginning of a series of helpful posts, where I’ll try to provide as much insight as possible to why my team and I eventually headed towards React Native and how we evaluated if RN is for us or not. Think of it like the pilot episode of a new TV show, where people watch the 1st episode when it’s released and then, depending on the results, the TV network decides if it will stay on the air or not.

Image 1: The Pilot Story

Why React Native?

Let’s fast forward a few years in the past! We are a team of web developers that wanted to experiment with mobile apps as side projects. We started by trying out the WebView solution and built our first application: a currency converter for Android coded with AngularJS 1.x and material design. We discovered the hard way that WebView as a solution comes with lots of limitations and especially the sub-par performance issue. Thus and after a few months of hard work the result was not satisfying — app sized about 30MBs for older Android versions and was glitching in terms of performance. At that moment, we realized that we needed a better approach if we wanted to continue coding mobile apps with the use of web technologies (and without having to write different native code for each platform).

Image 2: Android Webview example

Then we took a break for a few months and when we came back new technologies had started to become popular; technologies where you can code in Web and then transform your code to native automatically! I still remember myself thinking:

“WOW! Could this be what we were looking for all along?!”

There were 2 candidates: ReactNative and NativeScript. React existed for a few years already as a front end library that was becoming more and more popular under Facebook’s driving — while NativeScript was a new product from Telerik. At this point I had never worked with React before but had worked with other Telerik’s product in the past and another team member had just started working with React. Personally I was not very happy with the Telerik library I was using, and GitHub stars were indicating that ReactNative was being favored against NativeScript by users. So we made a decision to try out RN.

Image 3: React Native app caricature

Let’s create our Pilot app!

We decided to create an initial prototype in order to see first hand how it is to develop with RN and how our application will feel after building. That being said, we set a target and decided to make a proof of concept for our new app, a 1vs1 real time math game.

We put down some tasks that we completed in a month. At the end of it we had a working app that we were amazed by its performance and the small effort needed to make the technology work. The experience revealed that React Native is a game changer and we decided to go with it. It was a decision that our team is still very happy with!

Transitioning to React Native

Transitioning to RN was pretty smoothly and easier than expected!

When I initially read about React’s concept, that you code HTML inside JavaScript… it looked weird. Personally I was coding with AngularJS 1.x at that time and was doing the exact opposite thing, putting JavaScript functionality in HTML, by writing Angular directives. And we were still using both HTML and JS files. Turns out though that after you grasp the React concept (React has a learning curve at the beginning) your new development paradigm feels easier to write, read and maintain as well. You develop a single component that contains both UI code in JSX (JavaScript syntax extension of HTML in React) and functional code in vanilla JS with a clear separation of these 2 at the same time! Only in 1 file! That is awesome!

Now, regarding React Native particularly there are a few features that feel counter intuitive for a web developer at the beginning but it’s not a discouraging thing for sure. Just to mention a couple of examples:
Not all CSS properties or values of properties are supported yet. More and more are being added as the framework evolves though.
Showing simple text is not as simple as in React/Web. In React Native we need a combination of 2 components to achieve that: a Text & a View.

Finally, official documentation is pretty decent (that was a pleasant surprise from Facebook) and additions are made constantly by the RN team, as the framework adds more features and becomes more mature. The community is also pretty supportive and a lot of handy packages are developed and contributed by developers and companies as well.

What do you think?

What do you think about React Native? Share your feedback! Or talk to me directly either with email tasos.maroudas@wizope.com or in Twitter.

Image 4: We want your feedback

If you enjoyed this article, feel free to hit that clap button 👏 to help others find it.

About me

Hi, I’m Tasos, a software engineer that loves web and currently works a lot with React Native and React. I take over project contracts and do consulting. You can have a look over my portfolio here. If you want to work with me or just say hi, contact me an email: tasos.maroudas@codedlines.com