Common tooling and workflow
The first thing that teams accustomed to web app 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.
- The same coding environment within your favourite editor/IDE, making use of your existing settings and configurations(e.g. linted by the same .eslintrc(3) used in all your web projects).
- 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 reload (4) and hot reloading (5) .
- Debugging by placing a debugger statement in your code and stepping through your code using the Chrome debugger (6) .
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 mobile and web applications. While React Native doesn't actually implement CSS, in the canonical sense(6), 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.
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. XMLHttpRequest(7), 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
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 web(9). 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.
(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.↩
(9)With Server rendering support included.↩