Jamon Holmgren

"Todd. How's it going?" I could hardly contain my excitement.

"Hi Jamon. Not bad, just finishing up some stuff." Todd Werth said, coming in clear over the ScreenHero voice session.

"I have something to show you."

I shared my screen and pulled up a basic RedPotion RubyMotion app in the iOS simulator.

Todd was unimpressed.

"Check this out," I said. I pulled up the main stylesheet in Sublime Text and changed a line of code, switching a color from "white" to "red". When I saved the file, the simulator instantly updated to a red background.

Now I had his attention.

"How'd you do that?!" he demanded.

"I was screen sharing with Gant Laborde when I discovered it. He thinks it's a big deal." I was grinning.

"Uh-huh. How'd you do it?"

I went through the steps. Pretty straightforward, really. Just poll the stylesheet for changes, load the code into the REPL, and then kick off reapply_styles on the relevant stylesheet.

We played around with it for a while, fascinated by how effortless it was to manipulate the UI. I had to go to a meeting in Portland, so Todd said he'd integrate it into RedPotion. When I got back a couple hours later, he had a functioning setup. We worked it through its paces and had a RedPotion release ready within another hour.

In Action

It's hard to describe just how much this changes our workflows at ClearSight and InfiniteRed. Before, the process to tweak and test a UI change was laborious:

Old way

1. Make the change.
2. Save the file.
3. Kill the app running in the simulator.
4. Compile the app again (30 seconds or more).
5. Tap through to find the right screen.
6. Check the change to make sure it's right.
7. Repeat.

With this feature, you can see the changes immediately as you make them in code. It shortens the feedback loop to nearly instantaneous.

1. Make the change.
2. Save the file.
3. Check the change to make sure it's right.
4. Repeat.

Waiting for the app to build and launch in the simulator is tedious and distraction-prone. With this tight of a feedback loop, I can stay focused and productive.

How To

You'll need the latest versions of RedPotion and RMQ for this.

$ gem update redpotion $ potion create foo $ cd foo ; bundle ; rake pod:install ; rake > live => "Live reloading of RMQ stylesheets is now on."

NOTE: An earlier version of this post had live_stylesheets as the REPL command to initiate the live reloading. This has now been shortened to just live in RedPotion.

Next

This is just the beginning. We are working on techniques for building out layouts and appending new objects safely are particularly interesting here). We also have plans to explore live reloading for screens and potentially other objects, such as CDQ models. It's not a simple task, but the more we can bring this live updating model to RubyMotion, the more productive and enjoyable it'll be. And RedPotion, as an opinionated full stack, is positioned well as a subject for this.

I can still barely contain my excitement.

Many thanks to Todd Werth for making this happen in RedPotion and RMQ, and to Gant Laborde for helping to spark the idea.