React Native first impressions

There’s a lot of hype currently around React Native, so I recently decided to sink a good amount of time into it to give it a shot, and report back with my impressions. Admittedly, these are only a week’s worth of impressions so keep that in mind.

I spent a couple week’s worth of evenings developing a prototype for an app a friend and I wanted to run by a few businesses, see if there was any interesting in a full build-out. Long story short, we got market validation that the idea wasn’t what the industry wanted. But i did learn a lot about React Native in the meantime which I’ll now share.

Potential

There seems to be a lot of potential with React Native. It is an extraction rather than a framework. DHH, of rails fame, made this distinction years ago: good frameworks are extracted from things that are required to work, because many people’s paycheques/families/mortgages depend upon it. I’ll clarify: I assume it’s an extraction - we can’t know Facebook’s internal strategy specifically, but it certainly points that way (eg they use it for their Groups app and now the core Facebook app). My point here is that React Native is battle-hardened and production-ready, unlike say other write-once-deploy-on-ios-and-android frameworks which decidedly weren’t.

Working with Swift at scale is an exercise in frustration common to many teams - see Uber. Xcode cannot index, and compiles blow out exponentially once you hit ~20KLOC, depending largely on if you have many small files or fewer large ones. So the opportunity to change properties and see updates in an iOS simulator and an Android simulator on your computer within seconds is compelling. I can confirm that this aspect of React Native is productive.

Don’t be scared off because it’s Javascript. JS has come a long way since the 90s - ES6 really shines, with elegant syntax for classes, inheritance, avoiding var hoisting, and so on. Take full advantage of all this, because RN uses Babel to transpile your newest-style JS into whatever is necessary for iOS and Android’s runtimes.

And, in short: it’s not, well, terrible. Most other cross-mobile-platform JS frameworks like Titanium / Sencha Touch / PhoneGap / Cordova / Ionic, well, are. I think it’s on par with Xamarin in terms of production-readiness, however its live updates make React Native more productive.

Thoughts

Here’s a grab-bag of perspectives gained from my two weeks, in no particular order:

• Watch a lot of screencasts. There are a few at egghead.io. You’ll notice that there are a few different styles for coding in RN, which appears to be a bit in flux. Hopefully this coalesces to one style in future.
• Watch the Youtube videos by Tal Kol, Wix is really doing well with RN.
• Check out Ignite and watch their Youtube videos. I think Ignite is like Rails scaffolding for RN, and pushes you in the direction of best practices - highly recommended.
• FlexBox (their CSS-based layout alternative to AutoLayout) is a bit limited. You’ll often have to wrap things in a (few) view(s) to get the layout you want.
• The RN ‘packager’ is buggy, so get used to restarting it.
• I’ve seen layouts acting buggy, things positioning where the code clearly shouldn’t allow, at which point I close and re-open the packager/simulator. There seem to be some kinks here.
• It’s hard to find ‘best practices’ for some things, eg what do I do for a navigation controller? I find Wix or Ignite have great solutions for this particular case. It appears some things like this aren’t ‘batteries included’ by Facebook so you often have to find a good library for things that really should be included.
• Learn the differences between Props and State. Roughly: props are for things passed into your components; state is for things your component changes about itself.
• Flexbox basic stuff here: facebook.github.io/react-native/docs/flexbox.html
• Flexbox advanced stuff here: facebook.github.io/yoga/docs/flex-direction
• TouchableHighlight must have only one child, but that child can have lots of children, so get used to grouping everything in a wrapper view.
• Logging is simple: console.log('foo'), then in the iOS sim, do Menu > Debug > Open system log.
• No type safety is hard to let go of after Swift: I sometimes call a prop ‘isSelected’ and in some places refer to it as ‘selected’ and get confused. Flow might help with this - I haven’t tried. Also you can strong-ish-ly type your props like this: MyComponent.propTypes = { isSelected: React.PropTypes.bool, etc };
• You have to update a datasource instead of another state property if you want a list to rerender - this got me stuck a few hours.
• To make a button where the text dims on tap but the background stays the same, have a view (with background), containing a TouchableOpacity (no bg), containing a Text.
• Many of the builtin components are iOS only eg the action sheet, so watch out for that. Wix provide cross-platform solutions for most of these.
• When choosing components, choose the one with the most github stars, least github issues, and simplest example usage.
• Don’t use var anymore, use ‘let’ instead. (let is like swift’s ‘var’; const is like swift’s ‘let’; var is js-hoisting-madness)
• There are lots of syntax changes re ES6 v ES5 vs classic JS to be aware of, eg use for of instead of for in.

Summary

I recommend at least becoming familiar with React Native. As our industry matures and rates begin to drop, I think it’ll become increasingly compelling at job interviews to be able to say: I can deliver iOS and Android apps to the business for the price of one developer.

And here’s the prototype that was the result of, say, 10 hours work:

Chris Hulbert

(Comp Sci, Hons - UTS)

Software Developer (Freelancer / Contractor) in Australia.

I have worked at places such as Google, Cochlear, Assembly Payments, News Corp, Fox Sports, NineMSN, FetchTV, Coles, Woolworths, Trust Bank, and Westpac, among others. If you're looking for help developing an iOS app, drop me a line!

Get in touch:
[email protected]
github.com/chrishulbert
linkedin

---

Please subscribe to my mailing list:

 Subscribe via RSS