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

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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