React Nativity

Appropriately enough for 2015, there’s a bit of a “Back to the Future” vibe about the latest excitement in the app development world:

React Native: Bringing modern web techniques to mobile

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere…

This is very exciting indeed, we are breathlessly assured. Seems to strike some chord though … can’t quite place it …

Introducing React Native

… and there’s always something to learn from other frameworks. But if there’s one thing Appcelerator and we as community should learn is that it looks like we have to do a better job at getting the word out. The word that Appcelerator has been doing this for years!

Yes, that was it. And while we’re delighting in curmudgeonry:

React.native isn’t

While we’re on the subject of terminological disasters, Facebook’s react.native seems to be doing a good job of muddling the waters.

While some parts make use of native infrastructure, a lot do not:

  1. uses views as drawing results, rather than as drawing sources, has a
  2. parallel component hierarchy,
  3. ListView isn’t UITableView (and from what I read, can’t be),
  4. even buttons aren’t UIButton instances,
  5. doesn’t use responder chain, but implements something “similar”, and finally,
  6. oh yes, JavaScript

None of this is necessarily bad, but whatever it is, it sure ain’t “native”.

Perhaps despite all this, there is indeed some reason that React Native will displace SDK Native for development in the same fashion that Titanium has not; but we’d bet against it, personally. However, there is significant contrary opinion; here’s some of the more interesting ones, along with some resource links:

Diary of Building an iOS App with React Native

Retrospective on Developing an Application with React Native for the obligatory Wenderlich tutorial

React Native For Beginners – The Next Big Thing?

ReactNative.com has a good spread of news and resource links

React.parts: “A catalog of React components”

Custom Native iOS Views with React Native

React Native Fundamentals

Now, one assertion in the above that is worthy of consideration is that the more functional model of React has its design advantages. But as it happens, there’s a way to experiment with React design that is actually native:

Introducing ComponentKit: Functional and declarative UI on iOS

Building user interfaces for iOS requires lots of imperative code. As a developer, you create views, configure them, and add them to the hierarchy. You then have to implement callbacks to controllers, which in turn must change the state of your views. Implementing this two-way data flow, even for a simple UI, can be tedious and error prone … To tackle this challenge, we wanted a better abstraction. We drew inspiration from React and its functional reactive programming model for building UI and made a native, Objective-C++ library called ComponentKit which is now used to render News Feed in the Facebook iOS app…

And how did that work out?

ComponentKit gave us performance and reliability gains in News Feed UI Rendering and made the system easier to reason about. It allowed us to:

  • Reduce the size of our rendering code by 70%. Manual and intricate layout code was completely removed as it was no longer needed.
  • Significantly improve scroll performance. ComponentKit eliminated many superfluous container views and significantly flattened our view hierarchy. A flatter hierarchy means less time spent on the main thread to render UI.
  • Improve test coverage. ComponentKit made it easy to build modular UI for which each piece can then be tested in isolation. We now have almost all of News Feed UI under test coverage using snapshot tests.

Making News Feed nearly 50% faster on iOS

OK, now this, this intrigues us.

If you want to dive deeper into the details of how ComponentKit works you can check out this article from Adam Ernst or the second half of this @Scale talk by Ari Grant.

Why yes, yes we will give that some very serious consideration. Much more serious than switching to JavaScript!

UPDATES:

Wait, now apps using JavaScriptCore have Apple’s blessing to update themselves without review? Maybe there is A Dynamic, Crazy, Native Mobile Future—Powered by JavaScript after all. We’d noted that possibility way back in 2011, and got a little more interested in 2013, so maybe 2015 is finally the right year for it!

Caravel: “A Swift event bus for UIWebView and JS.”

An iOS Developer on React Native

An iOS Dev’s Experience with React Native

In-Depth Tutorial Series On Building A Mobile App With React Native

Why I’m not a React Native Developer

What we learned after using React Native for a year

React Native, Flutter, Xamarin: a comparison

Alex | April 23, 2015

Leave a Reply