Learn once, write everywhere with REACT NATIVE

Author: Erk EKİN, IOS SW Engineer – UX & Mobile Applications

 

With React Native, an experienced web developer can write Android or iOS apps at a much faster pace. This is a major win as it not only allows developers to leverage the same skill set for both platforms, but it makes porting from one to another a much simpler affair. In this post, I’ll be trying to share some of my non-technical insights on React Native of Facebook.

Once Facebook open-sourced React Native, developers questioned if it’s possible to build native feeling mobile apps with pure JavaScript. Most of the mobile development community was cautious regarding using web technologies to build mobile apps. The main reason for this, I guess, was the bad reputation of hybrid applications. I say this mostly due to the fact that many are not familiar with the mobile use experience, thus they aren’t regarded well within the community.

So why need a native solution to app development? I mean, why are hybrid apps so cheesy (does the exception proves the rule)?

Well, if you use smart phones on a regular basis, you get used to the flawless, fast user experience while using your smart phones’ built-in apps such as mail, phone, messages, photos etc. The built-in apps are all native, in other words they are developed essentially for one particular mobile device and is installed directly onto the device itself. Accordingly, the built-in apps are well-optimized for the device that is in your hand. These are first-party apps and are all developed by the same company that manufactured the phone itself. Since manufacturers want you to buy their device, these apps should be fast, responsive and reliable.

That is all to say, once user gets accustomed to the smooth experience of built-in apps, the same expectation rises up towards the third-parties as well. We expect the same speed as well as the same design from other apps on mobile application markets. However, hybrid apps are inherently web pages in a browser, therefore they behave like a web page, not an app. A regular user will agree that even one tap on a button feels like a button click on a web browser. Even though, an experienced developer can make it ‘feel like’ a native app button, essentially it is not hard to distinguish a native experience and a web based one. We have economic, technical and security reasons to go native as stated here as well.

There are tons of start-ups or even big names of the software world that dive into hybrid app realm. Some are successful and some are not. The reason hybrid apps are popular is that software companies can make use of their web development skills to quickly build rich, fully native mobile apps and leverage any native platform API with ease. But as I stated above, those are web pages behaving like native apps, which should be considered separately. Native apps on the other hand, are quite powerful since they can access device sensors like the accelerometer, camera, gyroscope and microphone. Hybrid and web apps can also access these but in quite limited ways.

React Native is neither a hybrid solution nor a truly native one. It’s something in between. Once you compile your code, it renders native UI elements so that your users see and experience it pretty much the same as a native app. There is no web browser embedded inside the app, which renders JavaScript and CSS as it would with hybrid applications. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You write in JavaScript (or JSX) and it maps to native UI components like UIView for iOS and View for Android. So, it becomes indistinguishable from an app written in Objective-C or Java. When first announced, React Native was only supporting iOS but a few months later Android support was announced as well. Back then, there was a strong holdout; however, now Airbnb, Instagram, Artsy and Baidu fully or partly uses React Native in their mobile apps. Facebook also built its Ads Manager iOS app with React Native without having to learn iOS or Android (even though I’m sure they already know how).

We used React Native in an internal project and finished it in a period shorter than expected. The result was impressive. We had one code base but two different mobile apps connecting to a server and consuming the same resource. We didn’t face any challenges during the implementation, it just worked. We’re now considering to use it partly, in our next apps.

However, during my own experience, I wanted to support some state of the art UX patterns and I struggled with implementing them in the React Native environment. With some quick googling, I noticed that, it was even possible to build part of the app in the React Native and part of the app using native code directly. So, you are not limited to JavaScript while you write your code and you can drop down to native code if you need.

The coolest feature that I particularly appreciated was rapid iteration, as opposed to change file → compile → run for typical native development. This is called hot reloading in React Native realm. The idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. This way, you don’t lose any of your state which is especially useful if you are tweaking the UI. Please see this video that is worth a thousand words.

I, personally, recommend developers who feel comfortable with a native language to take a look at React Native, get your hands dirty a little bit and you will see where you can get benefit from it in your regular development process; however, if you are a newbie, go and learn a dedicated platform first. React Native is not a silver bullet, it has advantages and disadvantages compared to a truly native coding. Especially those red error messages. This is my shout out to the FB team: Please make error messages more understandable.

As my closing words, I believe React and the philosophy behind it is worth exploring. Mobile software community should be aware of what Facebook team has been creating with cross-platform mobile development and with the React itself, which is a brand new functional and declarative aspect of JavaScript.

Get ready to see job titles like “cross-stack engineer” soon.

References
http://blog.stablekernel.com/native-vs-hybrid-mobile-app-development-5-reasons-you-should-go-native
https://www.infoq.com/articles/mobile-cross-platform-app-development
https://facebook.github.io/react-native/
https://www.lifewire.com/native-apps-vs-web-apps-2373133
https://www.raywenderlich.com/126063/react-native-tutorial
http://devnacho.com/2016/03/20/how-airbnb-uses-react/
https://discord.engineering/using-react-native-one-year-later-91fd5e949933#.klqfntc7r
http://blog.differential.com/wait-what-is-react-native-again/
http://thenewstack.io/react-native-learn-write-anywhere/

Leave a Reply

Your email address will not be published.