Image for post
Image for post

Build bulletproof UI components faster in iOS

Muukii (Hiroshi Kimura)
May 23 · 4 min read

The bulletproof UI, this word from Storybook.
Storybook is a library for developing UI components in web applications.
This gives us a place to create UI where is detached from the main application.
This is the main purpose of this library.

Today, we’ve created a library for iOS application development inspired by the original Storybook.

Making a place to create UI where is detached from the main application

Storybook-ios absolutely inherits the main purpose of the original Storybook

Making a place to create UI where is detached from the main application

Technically, we can get this with creates a new application beside of main application to launch Storybook. And then import the UI components code and displays with initializing. If the component has many dependencies with the domain model, initialization would be harder.

About how we import the source code of the component, we have about 2 ways:

  • Set both of the targets each the component file
  • Creates the module that contains the components only, and then link with Main app and Storybook application.

Basic usage of Storybook-ios

Let’s take a look at basic usage.
We use the component below for an example. It’s just a box filled with purple.

Book indicates the root of the Storybook.
It can have a name describes itself, and we can declare the contents inside trailing closure.

Technically, since that closure uses Function builders as well SwiftUI, so we can declare the contents without any commas.

Finally, initializes StorybookViewController as a viewer for Storybook.
Carefully, this view-controller is included from StorybookUI module.

Then we would see the screen below.

Image for post
Image for post
Overview Storybook-ios

The advantages exactly

As we touched in the above example, we are able to run the component that separated from the application.

This is the place to create UI where is detached from the main application.

It means we can get several advantages while building UI components:

1. Making an error state or loading state without creating that state in the application.

Lately, Front-end application’s responsibilities that provide excellent user-experience are getting higher. For example, displaying placeholder while loading and displays error screen if loading failed.

So the application needs to have many kinds of components or adding many states in the component, which means the complexity also would be increased.

If we create such as the component in the main application, we have to create the state what we want to check the UI. In this approach, we may be getting stressed and then put something mocking code, finally, that production code would be complicated with the code that actually does not need in production.

With Storybook, we can preview and modify independently each state.

Image for post
Image for post
Lists each the state in the component

2. No needs to wait to build the application

The time to build is a serious issue in a large application. Depends on the case, As a worst case, it takes around 2~3min to launch the application from modified few lines of code.

UI development absolutely needs many times to build to do fine-tuning the UI design and animation.
UIKit based animation does not support hot-reload function. we can’t avoid building each time unless using special techniques (e.g. code injection)
In SwiftUI, these issues might be solved partially. However, this won’t solve completely, because SwiftUI preview seems it does not work well on a separated module. This means we can’t use multiple modules in a large application. I don’t think it’s good to use single module in that case.

Regarding these reasons, I recommend creating a module that contains only UI components only, and then Storybook app and the main app link with that.
With this, we will wait for fewer seconds to modify UI and check it because it only needs to build UI components module.

Eureka Engineering

Learn about Eureka’s engineering efforts, product…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store