A programmatic UI component API

I gave my second-ever tech talk recently, only two days after my first. This one was more pointedly about some of the work that I've been doing recently trying to add more power to our styleguide/pattern library and create more tools for our developers to use.

The most important of these new tools is the ui_component view helper which provides a way to quickly insert UI components into a given view. I've coded out close to a hundred view templates so far, including a view model for each one in rails and a test for each view model. All that's left is documenting the API for each of the models.

It's super cool work because it's going to fundamentally alter the way that our developers code their views and dramatically reduce the amount of duplicated, redundant and bug-prone code that we maintain. Moving our views to use this helper globally will also allow us to make big changes to UI patterns across all our applications by just updating one file and running a bundle update on each Rails app that consumes the pattern library. We used logicless templates in the first place so that they can be shared across all applications regardless of language/framework but so far the only abstraction layer that's been build is for Rails. I'm looking forward to digging into a javascript/possibly-backbone-specific abstraction layer in the coming months.

Following are the slides from my internal presentation on this work. It's pretty concise. Just an introduction to the new tool and an overview of how it works and how to use it. The 'SDD' in the last slide refers to the concept of Styleguide-Driven Development. This is the idea that everything developers make should be out of the tools and components from the styleguide and that designers should work on building a library of components instead of a series of mocks. When development is styleguide-driven, a team builds up architecture and tools instead of just tons of code. It's the next step in the evolution of the web development workflow and I'm really excited about it.

UI Component Talk UI Component Talk UI Component Talk UI Component Talk UI Component Talk UI Component Talk UI Component Talk UI Component Talk UI Component Talk