A CodeFlow blog

about live coding and more…

Live storyboards in CodeFlow 1.0


Live storyboards are a important feature of the upcoming CodeFlow 1.0. Mixing the power of Xcode storyboards with the flexibility of CodeFlow live coding, they are amazing for fast, fun and creative live app development.

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.

Post a Comment


Recent posts

Blog Post
Aug 1, 2016

CodeFlow 1.0.2

CodeFlow 1.0.2 is a minor release that focuses on improving the Live Application Developer's Experience.

Aug 1, 2016
Blog Post
Jun 16, 2016

CodeFlow 1.0.1 and WWDC 2016

The just-released CodeFlow 1.0.1 brings support for the new iOS 10, tvOS 10 and macOS 10.12 announced at WWDC 2016 this week.

Jun 16, 2016
Blog Post
Jun 9, 2016

CodeFlow turns 1.0

It has been some time since the last beta of CodeFlow, version 0.9.20 was released in January this year. And all this time, we have worked very hard to improve CodeFlow, and to turn it into an effective Application Development System that we love to…

Jun 9, 2016

Last tweets

Aug 9, 2017
🛠CodeFlow SDK Bindings for Xcode 9 beta 5 are available for download. Enjoy! 😊
celedev.com/en/download/
Aug 9, 2017
Jul 11, 2017
New APIs in Xcode 9 / iOS 11 beta 3? CodeFlow supports them from day 1. 😀
🛠 Download updated OS SDK bindings from celedev.com/en/download/
Jul 11, 2017
Jul 2, 2017
CodeFlow 1.1.1 is out, and supports real-time native app development for iOS 11 and macOS 10.13.
Check for update or celedev.com/en/download/
Jul 2, 2017
Dec 5, 2016
@JLJumpertz
"Programming iOS in Lua - A bridge story"
Slides of my talk at Lua Workshop 2016 are here: slideshare.net/jljumpertz/pro…
#lualang #iosdev
Dec 5, 2016
Oct 11, 2016
Little Lua red Panda is now on GitHub! github.com/celedev/LuaPan…
A SceneKit 3D game in #LuaLang with dynamic update of all 3D assets and code
Oct 11, 2016
Oct 3, 2016
CodeFlow 1.0.3 is out!
⚡️ Live SceneKit assets, Sierra support, and more…
celedev.com/en/download/#c…
#lualang #iosdev
Oct 3, 2016
Oct 1, 2016
@aligatr
@Javi @nicklockwood same and also sad they didn't mention Redux realm.io/news/benji-enc… nor @celedev for Live Reloading & Faster iterations
Oct 1, 2016
Sep 22, 2016
If you want to test in #LuaLang the (few) new APIs added in iOS 10.1, CodeFlow SDK Bindings for Xcode 8.1 are there
celedev.com/en/download/#s…
Sep 22, 2016
Sep 20, 2016
Live update of SceneKit assets will be available very soon in a new CodeFlow version (1.0.3). Stay tuned! 😊
Sep 20, 2016
Sep 20, 2016
@JLJumpertz
🎉 Live feedback of SceneKit assets in a running app with @celedev!
1. texture
2. scene editing
3. animation
Sep 20, 2016
Sep 8, 2016
Ready for shipping your app for iOS 10, tvOS 10 or macOS 10.12?
Our #LuaLang live-code SDK Bindings are ready too 😎
celedev.com/en/download/#s…
Sep 8, 2016
Sep 6, 2016
@JLJumpertz
Next step, add live SceneKit resources: when using Xcode's SceneKit editor, send the updated assets dynamically to the live application.
Sep 6, 2016
Sep 6, 2016
@JLJumpertz
Amazing how easier SceneKit becomes when using live application update, thks to instant feedback of 3D math! 😃
Sep 6, 2016
Aug 4, 2016
Minor update for CodeFlow 1.0.2 today, fixing a rare issue in dynamic resource updates.
Check for updates or celedev.com/en/download/#c…
Aug 4, 2016
Aug 3, 2016
If you use Xcode 8 beta 4 and CodeFlow, Lua Bindings for the latest iOS 10, tvOS 10 and macOS 10.12 SDKs are here:
celedev.com/en/download/#s…
Aug 3, 2016