Mobile App Prototypes with React-Native

K - Sep 2 '17 - - Dev Community

Coming from Web-development, I'm used to setting up front-end prototypes quick. Almost every computer has a browser that runs JavaScript, even most mobile devices have one. So getting a prototype up and try it with some users is no big task, so I feared that would all be lost if I started native app development.

React-Native and Expo to the rescue!

When I got my first inquiries to do native apps, I searched around and found React-Native, which allows me to use most of my JavaScript and React skills to write native apps. Contrary to some believe, React-Native apps don't render in a WebView. Yes, writing RN feels a bit like meddling around with DOM elements, especially because a huge portion of CSS is also available, but there is no DOM, just native views managed by React, seemingly for performance reasons, but I never tried solutions like Cordova/PhoneGap so I don't know their pains.

When writing React-Native apps you are controlling its native parts via JavaScriptCore on iOS or V8 on Android. This allows you to compile your native parts once and then just update the controlling JavaScript. Apple even explicitly allows you to update JavaScript running on JavaScriptCore on-the-fly, without going through the app-store approvement, if you only use it for bugfixes and there are services that allow you to do so.

As if this alone wasn't kinda cool already, there is Expo.

One part of Expo is a pre-composed React-Native app called Expo Client, some sane defaults and a bunch of native modules that you would normally have to compile yourself. This app is in the App Store and Play Store and can be installed like the omnipresent browsers I mentioned at the beginning. It uses the on-the-fly JavaScript update to get your code and run it, like a browser, but for native.

The other part is a cloud service that handles your new code and makes it available for their client. So you set up your local dev machine, write your app in JavaScript, push it to their service and pull it on the mobile client. You don't need a Mac for this.

The client brings a nice selection of native modules already and with the latest update it now has even more: vector-icons, GLView, Payment with Stripe, Facebook and Facebook Ads, Audio, Video, Camera, FileSystem, SQLite and much more.

You can even run this whole process without the cloud service in your LAN. Just use Create-React-Native-App instead. It runs a local server the Expo Client uses to pull your app.

The catch of Expo and Create-React-Native-App is, you can't use your own native modules, but you can detach from their client and do your own compilation.

I already build a few apps with it, detached with own compilation and using the Expo client and it feels a bit like Web. Some things are missing, like implicit text nodes. On the other hand it also allows much of ES-next features that aren't in browsers yet, like class properties or static properties and object spread and rest operators.

To help you getting started, I made a small video course on Skillshare.

If you need some help getting started with React, I also made a free React basics course on Github.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .