React-Native-* a platform approach to UI

Alan Hietala
Jan 27, 2018 · 3 min read

The React ecosystem is powerful in its own right. Abstracting away many common pitfalls in traditional web development, it made building Single Page Apps (SPAs) at scale both manageable and maintainable. By solidifying component based architecture, one way data flow, immutability and reactive programming, it allowed engineers to build bits of a much greater whole in complete isolation. This is in contrast to the previous generation approach which relied on mutable 2 way bound models that often ended up overly coupled with odd update dependencies.

On the styling side we saw css-in-js tackle the problem of styling at scale, treating styles as an integral part of each component, rather than having its own mental model and hierarchy. This allowed for a single application hierarchy to exist, the single source of truth was the .js file itself.

React’s approach to functionally composing components via declarative jsx was also a direct mirror of the DOM, a tree of nodes. Transforming one tree into another is something functional programming excels at.

This toolkit is a fantastic way to build UIs. So good that Facebook started to look at how to leverage this very web centric approach to build native iOS and Android apps.

React has a really minimal API. There are very few lifecycle methods and other hooks to learn. What if the same concepts of finding a minimal API was applied to the DOM, removing all of the bloated legacy, distilling it down to just what was needed for a great developer experience. This distillation process became what we know as React Native. A re-imagining of the DOM, minus all the parts that suck. Instead of targeting the browser it targeted Android and iOS instead.

This abstraction on top of Android and iOS provided a really clean api for building UIs but also accessibility, automation testing hooks, and a way to simply express variations between target systems.

Now with a great development model, a expressive minimal set of primitive components and a proven track record for building great native apps, React Native is moving onwards to other platforms.

One of the most exciting platforms is in fact the web. By building a browser DOM abstraction on top of React Native primitives now we’ve abstracted away a large chunk of problems that developers needed to solve in React apps. Now using React-Native-Web we don’t have to work with the bloated legacy DOM, but only the minimal clean subset of react primitives, letting the abstraction handle things consistently under the hood. Styling is consistent as we limit CSS layout to flexbox only, Accessibility is baked into every primitive. TouchableOpacity, Button, Checkbox and all other primitives are accessible out of the box.

The other advantage is our primitive based React-Native-Web components will work seamlessly on any other react native platform. Android, iOS, you name it, they just work, the primitives are translated into their native platform equivalent.

React-Native-* is enabling an exciting future of react components being able to target an infinite number of platforms. As someone who builds UIs this is an incredibility exciting prospect. One set of tests, one set of components with consistent rendering across all of the things. If you are building in react, I highly suggest giving React-Native-Web a try. It is a glimpse of a future that I strongly believe in.


Software Development at Ecobee

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store