Three Useful UI Development Patterns

During this difficult time of isolation and quarantine across the United States, I hope you and yours are staying safe. In a time of reflection and as I think about the development patterns that have been serving me well, I thought I’d share them here with you.

Component Explorers

It’s been almost a year since I started evaluating and using Storybook and it allows for rapid development and sharing across a team. It gives you the ability to develop components in isolation and with HMR, it’s a real pleasure to work in.

What I especially enjoy about developing in Storybook, is that I can start out by creating a core component and later on, look at using the addon-knobs, allowing users to edit the props dynamically. With code examples of how to use each component, these examples and demos are a great way to share best-practices or design patterns across a team.

If you are working on a smaller project, I still think it’s valuable to setup a component explorer. Here’s another project I think that is also worth a look called Docz. If you enjoy using markdown (MDX) and want the benefits of having a component explorer, then this tool might be a good fit.

Lastly, I found the service to be another great way to publish a component library and allowing you to share these with other developers. The pricing plans are generous if you are only wanting a few private libraries and collaborators and affordable if you want to expand on that.

How to Manage reusable UI Components – Article about the open source component libraries used to create the platform.

Component Driven Development

When I started working on a redesigned React application, I found myself wanting to get started right away on a few of the reusable components. Realizing the new component designs introduced an opportunity to expand on the core component library.

By starting at the lowest level of components, it’s more of a “bottom up” mentality of development. I found that this approach allows for a focus of reusability and developing modular components that can be expanded on later in the development process. This also allows for design conversations earlier on in the development cycle which can save valuable time when you get to integration and testing.

Component Driven Development in React – A good article that also talks about Atomic design principles.

Documentation First

For a while, I was using textEdit to stash away development notes as I’d work on projects and merge them into Jira or Azure workflows, as needed. Recently, I decided to give Notion a try to help with organizing the specifics around my day-to-day tasks.

I often come across project dependencies or questions as I go and those specifics can be easily overlooked unless they are documented. This includes specifics around integration of applications or testing notes.

One of the patterns I’ve been using is to start out a new task document that outlines the specific task and the acceptance criteria. This document also leaves room for me to create to-do lists or add questions. I’ve also been adding my testing notes to these documents as well which has been useful to have in a central place.

Which ever note taking app you decide on, I recommend finding one that allows you to easily share with your team. One last recommendation, I’ve also really enjoyed using Evernote which allows me to organize collections of notes with tagging capabilities.

Those are my three tips for UI workflows which I find have been working well for developing complex applications or React components.