React Native as an extension of hybrid

Written by Bertrand Karerangabo

alt

While much has been made of React Native's native capabilities0, there has been relatively little attention paid to its web nature. It is the latter quality, however, that makes React Native such a great development platform. React Native brings modern web techniques to mobile development 1. This means that teams get to leverage common tooling and workflows, the best of CSS (including Flexbox), familiar Web APIs, a rich and vibrant 3rd party ecosystem and, of course, their existing JavaScript libraries. React Native is, in a sense, a polyfill for the web – built atop vendor-specific and disjointed mobile platforms.

Common tooling and workflow

The first thing that teams accustomed to web development will notice is that working in React Native feels very familiar. The similarities are everywhere:

  • NPM-based scripting with the typical npm install and npm start workflows.

  • A packager, similar in scope to webpack2, that is responsible for building and serving your code, providing ES6 module support, compiling JavaScript through Babel, bundling and asset loading.

  • The same coding environment within your favourite editor/IDE, making use of your existing settings and configurations(e.g. linted by the same .eslintrc3 used in all your web projects).

  • Your tests, most of which can be written in JavaScript, executed by the same test framework and assertion library you're accustomed to.

  • Reloading of your application (ctrl+r in the device emulator or reload from the in-app menu) to see your changes nearly instantaneously. To reduce the feedback cycle even further, you can enable live reload4 and hot reloading5.

  • Debugging by placing a debugger statement in your code and stepping through your code using the Chrome debugger6.

While this story might seem unimpressive to seasoned web developers, it's miles above the standard native development experience.

CSS and Flexbox

React Native also relies heavily upon CSS properties to allow styling of applications. While React Native doesn't actually implement CSS, in the canonical sense6, applications are styled using a similar abstraction. React Native components accept style objects and apply them in much the same way that inline styles work on HTML elements. These style objects support a large subset of CSS including transform and Flexbox properties. This approach has proven remarkably versatile, allowing for a powerful animation system, without sacrificing much of the comfort and ease-of-use of standard CSS.

Web APIs

CSS is not the only web technology that makes an appearance in React Native. Three categories of Web APIs are also reimplemented to give developer a better experience: geolocation, network and timers. The geolocation API retrieves the latest location info from the phone's hardware and its interface matches that of the web specification exactly. This philosophy, of being as faithful as possible to the browser APIs, can also be seen in the networking stack available. XMLHttpRequest7 , WebSocket and the upcoming Fetch specification are all supported and emulate their web counterparts. As for timers, the usual suspects – these are setTimeout, clearTimeout, setInterval, clearInterval, setImmediate, clearImmediate, requestAnimationFrame and cancelAnimationFrame – are available and behave as expected. This symmetry with the web results in a profound boost in developer productivity.

3rd-party library ecosystem

The JavaScript community is large and the pace of improvement and innovation is fast. With React Native, you get to leverage all that work in much the same fashion as you do today during web development. As long as the library you want to use doesn't rely on the DOM (e.g. D3, jQuery, etc...), you can just install it and import it as you normally would. Even libraries that rely on the web browser's networking stack (e.g. Firebase, axios, etc...), thanks to aforementioned Web APIs polyfills, work just as expected. It's also worth noting that the community has produced a large collection8 of native packages for React Native. This access to both JavaScript and native libraries truly gives developers the best of both worlds.

React + JavaScript + CSS, everywhere

React Native not only allows teams and organizations to reuse their existing knowledge but also allows them to directly leverage their technical investments. They get to learn these technologies once and apply them on the web, iOS and Android – often times reusing their previous work as-is. It is now even possible to reuse React Native components directly on the web9. Looking at React Native, it's clear to see that it's is definitely an extension of current hybrid approaches.

You can also check out some of our other React content, like this React Native webinar video and React resource page.


0 It's right in the name after all.

1 Don't just take our word for it. Facebook itself has published a blog and a talk by roughly that same title.

2 You can actually use webpack itself if you wish, but it requires some doing. Fortunately, others have done the work for you. Using your own packager, asset pipeline and infrastructure should become easier in the future.

3 ESLint here is used for illustrative purposes. You can, of course, use any linter you wish.

4 Live Reload triggers automatic reloads of emulators and connected devices when any file in the codebase changes.

5 Hot Reloading takes live reload even further. It not only tries to reload your application automatically based on source code changes but it also tries to maintain the state of the application as a whole.

6 Unsurprisingly, this decision has not been without its detractors. The full rationale is provided in this talk. Feel free to judge for yourself but the evidence so far seems to overwhelmingly support this particular choice.

7 There is a caveat, however. The implementation doesn't take from the web's security model and has no concept of CORS.

8 See: https://js.coach/react-native

9 With Server rendering support included.