Pages

Tuesday, September 15, 2015

What I learned from building a React Native app

React Native is Facebook's open-source framework for building native mobile apps using JavaScript. Unlike PhoneGap/Cordova, React Native provides bindings for native UI controls which totally outclass HTML-based hybrid solutions. After playing with the sample app for a while, I decided to jettison my Cordova codebase and rewrite the Circadi app using this new framework. It took me about 96 working hours to finish an MVP, now published on the App Store. My overall experience with React Native is positive. I'm going to give an account of my key findings below for people who're considering to adopt the framework.

Advantages


Developer productivity


React Native enables developers to write native apps in JavaScript with ECMAScript 5/6 features and optional type checking using Flow. This alone is a huge boon to my productivity even if cross-platform code reuse were never promised. Having written Objective-C and Java at my former employer, I much prefer writing apps in a more terse language like JavaScript despite its many foibles.

The interpretive nature of JavaScript also significantly shortens the RN app dev cycle, making it as easy as developing web pages. Reloading a RN app in a second by pressing ⌘+R turns out to be a truly refreshing experience. (You do need to recompile the XCode project when you switch between build targets, link in a new native module, add a resource file, patch an Objective-C implementation, or resolve the occasional red-screen-of-death.)

Another design choice that facilitates quick UI iteration is React Native's flexbox and styling abstraction, modeled after a carefully chosen subset of CSS features. Layout tweaking using the flexbox model rarely gives me any unpleasant surprises, unlike my traumatic experience grappling with Interface Builder's constraint editor.

App performance


React Native app's UI components feel native because they are native controls exposed to JavaScript via a JS/Obj-C bridge. Achieving the same level of look-and-feel in HTML is a sisyphean task — eventually you'll have to either compromise on fidelity or resort to a non-standard UI theme.

React Native borrows the virtual DOM diff idea from React and makes it conceptually simple to write high-performance UI. If you try to repaint a full-screen background 60 times per second, RN will stutter; but for most non-game apps with few moving parts, it's not hard to create a smooth experience.

Caveats


Cross-platform support


Facebook finally unveiled React Native for Android yesterday, almost six months after the iOS release. However, porting my RN app to Android is non-trivial. First of all, some of the UI controls such as SwitchIOS need to be replaced with Android counterparts; some (e.g. ActionSheetIOS) must be scratched and redesigned for the targeting platform. A more pressing issue is porting all of the native libraries my app depends on. I'll end up writing Java extensions or waiting for others to do it.

There's also no obvious way to write Apple Watch apps in RN yet.

Library support


React Native has fewer than 30 built-in components so far, iOS and Android combined. Chances are good that you'll need to find (or write your own) extensions to implement some basic features, for example, accessing SQLite databases or supporting in-app-purchase items. You'll be hurled back to the Dark Ages of app development, so be prepared with some knowledge of Objective-C and Java. Fluency in native code will be useful anyway even if you don't write RN extensions because: (1) React Native's documentation isn't on par with Apple's yet. You'll sometimes need to dive into the .m files to ferret out implementation details. (2) React Native is still a young framework, fraught with bugs on the other side across the JS bridge.

ES6 language support


Although you can use ECMAScript 6 features in your RN app, be aware that when you run react-native bundle --minify for release build, RN transpiles JavaScript into ES5 using Babel before calling UglifyJS2 for minification. However, not all ES6/7 syntax get transformed, and UglifyJS will choke on statements like for (... of ...), yield, etc. This is not technically a RN issue, but it will bite you during the release phase if you go too fancy with ES6 goodies.

Conclusion


I find React Native a good fit for JavaScript programmers to develop decent native apps with mostly standard UI. This fledgling framework has shown great promise to reduce app development cost, posing a real threat to Cordova and Appcelerator's Titanium.

Update: I published a game using React Native.

20 comments:

  1. > ES6 language support

    For ES6, we use babel in order to transpile ES6 code into ES5 that we then send to Uglify. You can look at all the transformations that are enabled here: http://facebook.github.io/react-native/docs/javascript-environment.html#javascript-syntax-transformers

    ReplyDelete
    Replies
    1. Thanks for the correction, Vjeux! I've updated the section with better ES6 examples.

      Delete
    2. Yeah, we have very poor error message for ES6 syntax that isn't supported. Chrome, JSC and Uglify support varied amount of ES6 and it will fatal in unexpected places. Sorry about that, we need to do better here.

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Really interesting, impressive that you were able to do this in less than 100 hours, I suppose you knew React already?

    If you look at http://facebook.github.io/react-native it's immediately obvious that this is not (yet) a "write once deploy many" tool: you'll be developing the UI of your app separately for Android and for iOS.

    Unless, that is, someone comes up with an abstraction layer.

    I wonder how this compares with other cross-platform "native Javascript" tools. An interesting one is Nativescript:

    https://www.nativescript.org/

    Backed by Telerik, architecture and documentation look really good.

    They have tackled the "Android/iOS abstraction" problem (you can create cross-platform UI components) and they have a very nice technique to enable your Javascript code to call into native libs.

    Also there's a layout module and there are styling options.

    There are many other tools, of course there's the tried and true Appcelerator Titanium, then there's Reapp (also based on React), Tabris.js and so on.

    Right now I'm using Ionic for my apps but I'm really interested in trying out some of these "native javascript" tools.

    ReplyDelete
    Replies
    1. NativeScript looks great! I'll evaluate it soon. Thanks for sharing the link.

      Delete
    2. IMO, while NativeScript is better for "write once run everywhere" apps, I feel the biggest plus side of React Native is React.

      Because of React, you are able to write and reason about your code in ways that you can't with everything else.

      The benefits that this brings to teams and speed of development is amazing. Please look into React if you don't know what I mean.

      Delete
  4. There are high performance SQLite3 React Native bindings available for both Android and iOS at this repo: https://github.com/andpor/react-native-sqlite-storage

    ReplyDelete
  5. Nice article - there are numerous difficulties getting started with React Native, especially if you want your code to run on both platforms. If you don't have experience with the actual native development tools for the two platforms, as is my case also, it's almost overwhelming. I know, 'cause I've been there myself, climbing that learning curve can be down right frustrating.

    To help other developers come up to speed with React Native I've shared a "starter app", Snowflake, which uses a single code base that runs on both platforms: https://github.com/bartonhammond/snowflake

    The application is fully Testable using Jest and has over 86% coverage. Snowflake demonstrates Hot Reloading and has a code walk through explaining the concepts. It also has Continuous Integration using Bitrise.io so the final apps are built in the cloud.

    If your readers have interest in seeing an example of what React Native's potential is, they might want to look at Snowflake. It's not a toy example yet it's small enough to wrap your head around.

    Note: I am the developer of Snowflake.

    ReplyDelete
    Replies
    1. Awesome starter app and the accompanying video tutorial!

      Delete
  6. I have learned a lot from this starter app. I must say that only expert Android App Developers can perform this kind of task when it comes to design and develop such apps.

    ReplyDelete
  7. This is an excellent approach. The gurus at logo design pros always make sure to follow these simple tips to deliver the best website.

    ReplyDelete
  8. People really love the quest possible way to do any job and native app does this exactly. For this you can hire iphone developers in dubai which helps you to make your own native apps

    ReplyDelete
  9. I really loved reading your blog. It was very well authored and easy to undertand. Unlike additional blogs I have read which are really not tht good. I also found your posts very interesting. In fact after reading, I had to go show it to my friend and he ejoyed it as well! UC News

    ReplyDelete
  10. بالبحث عن جميع شركات رش المبيدات ومكافحة الحشرات بالدمام واعداد قائمة بافضل وارخص الشركات هنا.
    شركة مكافحة حشرات بالدمام خدمة مميزة تقدمها لك شركة البيت المثالي بمدينة الدمام باعلي جودة وافضل الاسعار التي تناسب جميع العملاء نحرص على استخدام المواد الآمنة على صحة الإنسان في إعداد مواد و مبيدات مكافحة الحشرات بكافة أشكالها لإبادة الحشرات بشكل
    شركة مكافحة حشرات بالخبر وهناك المزيد من الاعمال المختلفة لمكافحة الحشرات والتى تقدمها بافضل الطرق الحديثة التى تضمن لعملائنا المكافحة الامنة والسريعة للحشرات مع ضمان


    شركة رش مبيدات بالجبيل
    شركة عزل اسطح بالجبيل

    ReplyDelete
  11. This article is very much helpful and i hope this will be an useful information for the needed one. Keep on updating these kinds of informative things...
    ios App Development Company
    Android App Development Company

    ReplyDelete
  12. Video and animated characters could speak to individuals (or human-like creatures) in a explainer video company uk, they can't supplant them with regards to displaying genuine and profound feelings, that could charge or move the watchers. Accordingly, the main passionate interest that especially runs well with animated video-communication method is amusingness.

    ReplyDelete
  13. This blog is so nice to me. I will continue to come here again and again. Visit my link as well. Good luck
    obat aborsi
    cara menggugurkan kandungan

    ReplyDelete