Push your React Native development workflow into the browser and be amazed at the speed and new possibiltiies.

I’ve been working with a group of high school students in East Oakland for a few years now. We started with Pacman and Python, and now we’re getting into React Native.

Thing is, these youths are not running Macbooks – two and a half G’s is a difficult proposition when you’ve got to pay rent and groceries. Or for anyone really … especially when you get a pretty awful new keyboard and poor battery performance. (Having used the fantastic Retina MBP’s for years, somehow Apple fell off the wagon with the new version. IMHO.)

Now a computer like the Asus UX series delivers decent performance, is reasonably priced, and weighs less than an Air – nice when your backpack is loaded with other gear for school. But can you get a decent mobile app development experience with a lightweight inexpensive laptop?

The answer is actually … yes!

You just the right toolkit. It’s called ruui.cool … and as we’ve found, it’s a great toolkit full stop, regardless of how powerful your dev computer is.

Hot reload and expanded development options

One of the great features of the React Web stack is the instant reload – as soon as we save a change to a file, the browser refreshes in fractions of a second. The same functionality for React Native, I’ve found it to be slower at times because the stack is more complicated.

Let’s consider what happens if we are able push our React Native code to a browser.

brower hot reload and debugging:

With RN code in the browser, we can now hot reload at browser speeds. We can also use the browser console for more convenient realtime interaction with the app.

set up automated testing with web tools

Now we can use browser automation tools like Selenium for one layer of testing. Browser tests generally run much faster than native app functional automated tests. And, if a passes in the browser but fails on the app, this helps greatly in isolating the root cause.

On mobile teams, most organizations have both fast API automation plus functional tests with an automation tool like Appium. Having a web version of your mobile app available, makes for a third option in the middle: fast browser tests after the API and before the heavyweight mobile stack.

If your organization is invested in testing, it’s a powerful third

fast prototypes to web pages for product + domain experts

If a customer wants to see a preview the latest changes, we don’t need to wait for the build process. Keep a website available running the web version of your React Native code.

React Native Web and React Universal

You may have heard of React Native Web. In digging around for my students, I found another opensource product called React Universal UI, or RUUI. RUUI leverages RN Web, and in my experience it’s a much smoother product – probably because they have the backing of a sponsoring company. Check out the RUUI website and Github.

So far, it’s been awesome. We’re iterating extremely quickly through the web interface, and time to time we push to android to check, and I push to ios with my Macbook.

There’s plenty of Javascript complexity in the mixture of React, mobile and web stacks. But given the benefits – fast mobile app development on a relatively inexpensive laptop – we’ll take the complexity. If you must have complexity, do it with intention!