Celedev Blog Archive

Storyboards and Interface Builder (IB) are promoted by Apple as a (the?) recommended way of creating user interfaces for iOS/tvOS/MacOS. Actually IB has seen significant improvements in recent Xcode versions, especially since Xcode 6 with its finally-usable layout constraints editor, and in Xcode 7 where storyboards have become more modular, making them usable by small development teams. And it seems that now, most (non-game) iOS/tvOS/MacOS developers use IB storyboards or nib files as part as their app development process.

However, IB still presents a quite abstract and static view of your app interface, and often it is not easy to figure out how this interface will actually feel and behave in the real app, until you run it in the simulator, or (better) on an actual device. And more often than not, the result is not exactly what you expected, so you have to iterate again and again the process: edit stuff in IB, rebuild and restart your app, check the result. Boring and time-consuming.

This is the reason why I'm happy to present in this post a great new feature of CodeFlow 1.0: live storyboards.

You can get a first idea of what live storyboards are, by seeing it in action in this Hello World short video tutorial:

In the above video, the Hello World app runs on my iPhone (whose screen has been recorded with Reflector and then added to the Mac screen capture); the app is started only once, right after the CodeFlow project is created, and all subsequent changes occur in live coding mode, while the app is running.

And now, time to describe in more details the live storyboards feature.

CodeFlow Project Templates

First, a few words about another CodeFlow 1.0 new feature: project templates.

CodeFlow 1.0 includes project templates. CodeFlow project templates provide a way to easily create a ready-to-run app consisting of a CodeFlow project and an associated Xcode project. The application in the Xcode project creates a Lua Context and makes it available for connection from CodeFlow. The Xcode project usually includes additional app-specific code and resources, and notably storyboards. The CodeFlow project contains all necessary Lua code and resources, making the newly-created application ready for live-coding.

Project templates remove the need for writing boilerplate code, both on the Swift/ObjC side in Xcode, and on the Lua side in CodeFlow, making it much easier and faster to start a new project. In addition, project templates can include quite complex live-update patterns in the application, in a totally transparent way for the app developer. As such, they are a key enabler of the live storyboards feature.

Live storyboards

As you might have guessed from the video, what we mean by live storyboards is the capacity to display right away in the running target application, any change made on a storyboard in Xcode. Combined with application live-coding, live storyboards brings the usefulness and power of Xcode storyboards to the next level, by making you see your actual app interface take shape interactively, while you design it.

So, how do live storyboards work in practice?

Storyboards as CodeFlow resources

At a first level, a storyboard behave like any other resource in CodeFlow. When you add a storyboard to a CodeFlow project, every new version of the storyboard file gets reloaded in the target application, where a registered resource handler takes care of updating the referenced View Controllers, making them match the new storyboard version.

To keep things simple and easy for the developer, a storyboard resource handler is included as a separate Lua module in every CodeFlow project template. This storyboard resource handler is capable of dynamically updating many common patterns of View Controllers hierarchy, and is easy to customize if your specific case is not supported.

With the provided storyboard resource handler, all you have to do is to add ViewController-specific configuration code in a few optional methods, used for configuring the ViewController's view when loaded, refreshing this view in case of code update, or preserving the ViewController's state in case of storyboard update.

In summary, as you can see in the video, when a storyboard referenced by a CodeFlow project is saved in Xcode, its View Controllers are updated in the target application, and the new storyboard becomes immediately visible on your device screen.

Live outlets and actions

This storyboard resource update feature is good, but it was not sufficient for a true live-coding experience. Actually, IB storyboards and nibs are useful for designing screen layouts, but they also have the very key function of declaring relationships between interface elements and application code, in the form of IBOutlets (a reference to an interface element from an object in the code) and IBActions (a method triggered by an interface element).

Therefore, dynamicity in storyboards implies that you will want to create and connect outlets and actions on the fly, without having to rebuild and restart the target application. For example, in the above Hello World video, after adding the label to the view, we had the need to set its (non-static) text from the ViewController's code, and the tap gesture recognizer would have been useless if we couldn't implement its action method dynamically in CodeFlow.

CodeFlow 1.0 handles this transparently: any property you add in the Xcode project's Swift or ObjC header files is dynamically created in the corresponding class of the running target application. And any action method declared in Swift or ObjC can be live-coded right away in Lua in the CodeFlow project. As a consequence, when the storyboard is updated in the target app, the storyboard instanciation code is capable of connecting the contained interface element to their corresponding outlets or actions, even if those were not defined at the time the application was compiled and run.

To recap, with CodeFlow 1.0, you can add properties and methods at the Xcode project level, and then use them immediately in both the app storyboard(s) and in your project's Lua code, with the insurance that it won't cause an error nor crash the app. And as a nice goodie, the Lua code editor in CodeFlow even shows auto-complete suggestions for the newly added properties and functions, making the code easy to write!

Live class creation

Live class creation is the last rocket stage of CodeFlow live storyboards feature. It turns out that a common need, when designing UI with storyboards, is to add to the storyboard a new custom View Controller or View, and to create a specific class for it at the same time.

CodeFlow 1.0 supports this use case without leaving the live coding mode, by implementing live class creation. When a class (Swift or ObjC) is added to the associated Xcode project, CodeFlow dynamically creates this class in the target application. So when a storyboard update is received, all referenced Views or ViewControllers can be correctly instanciated with their expected class by the storyboard, as this class already exists in the target application.

As a consequence, CodeFlow gives you the freedom to create a new class in the Xcode project, to add objects of this class to the storyboard, to see these objects in the target application immediately, and to write the code for the new class in live coding mode, all this without interrupting the execution of the target application.

What you can do with live storyboards

So. If you have read the technical descriptions above, you should have a pretty good idea of what this live storyboards feature does, but you may wonder: "What can I do with it?"

Here are a 3 typical use cases of live storyboards:

Interactive app design

This is the simplest use case, the one demoed in the hello World video, where you see the running app take shape interactively while you work on its storyboard.

The advantages of live app creation are obvious in all cases, except maybe the simplest ones. For example if you create a complex layout with lots of constraints, the fact of testing them directly and interactively on a device, in portrait and landscape mode, allows to debug and adjust the design much faster and easier than with the traditional cycle: edit in IB, then build, then run.

And if you need to handle some of your layout constraints in code, or animate part of the layout, the benefits are still higher, as you can simultaneously adjust the constraints in IB, define constraint outlets and play with these outlets in the CodeFlow project live code!

Multi-device app design

This is a variant of the previous use case, that takes advantage of CodeFlow multi-device live coding capabilities.

With CodeFlow live storyboards, if you run the target application simultaneously on several devices with different screen sizes (like an iPhone 4s, a 6 Plus, and an iPad), you will see how your interface looks and behaves on these devices, and this will allow you to interactively adjust the app design and size classes, so that your app makes the best use of every device screen size.

[Hey @twitter, this is for you! No more excuse to treat my iPad like a big iPhone!]

You can see an example of multi-device app design, using live storyboards and size classes in this short video:

Team live app design

Another great use case for CodeFlow live storyboards and live coding in general, is when you work on the app interface design with your coworkers, your boss, or your client. Everyone in the meeting can have the app running on his/her own iPhone or iPad, see in real time the changes done to the design, and give their personal feedback about them to the group, or suggest other adjustments.

The immediately visible feedback provided by live app design increase the group's creativity and helps to make the various design option easy to understand by non-tech people.