Boost 10x UI development productivity with SDD

Photo by Alvaro Reyes on Unsplash

This article is also published in my blog here

Building UI is tedious, it takes a long time and many steps to do little modifications and see what it looks like. Especially when there’s a view buried deeply behind many complicated manual steps. Have you ever wonder how to boost your productivity by 10x or more when building UI? Yes, there’s a way — Showcase Driven Development. Now I am going to tell you the secret how I did it.

In recent years, I’ve built many React Native mobile apps and React front-end apps. I like the idea of React component. It’s nice you have a clean interface for UI views and make them pretty predictable and reusable. Besides React, the most exciting thing I’ve learned from the community is Storybooks. I think it’s a game-changer, and we can apply the same idea to native iOS development and other UI-based apps, and it can boost development productivity significantly and also bring many other great benefits.

With the great experience of using Storybooks in mind, I started building a personal native iOS project Zero Inbox with the same idea and found it boosts the development productivity by orders of magnitude. Since it’s not using Storybooks, but just with a similar idea, so I come up with a name Showcase Driven Development.

What’s Storybooks and Showcase Driven Development?

What’s Storybooks you may ask, it’s a pretty popular open-source tool used in front-end web development community for UI view component showcasing and interacting. Here are an example Storybooks showcasing a date picker component by Airbnb

Airbnb date component storybook page

You can also try the component yourself out here

Showcase Driven development means, to build the app UI with view components first, make the intractable UI view listed in an app built for showcasing. Then, later on, integrate with business logic with these components into the real app. It’s not just using a showcase app, it’s more like a new kind of workflow, much more like Test-driven development or Behavior-driven development. Let’s call it SDD for short.