To develop for the web is, by nature and necessity, to be a problem-solver.
While my personal path to web development has taken many turns (including photography, 3D animation, and game design), none has been more foundational to my knowledge of good programming principles and problem-solving skills than Lego.
The comparisons between code and Lego are readily apparent: Lego is a system of discrete elements — bricks, plates, and many others — simple building blocks with infinite combination possibilities. Similarly, code is built out of many simple functions that combine to form ingenious solutions to innumerable problems. However, as someone who uses both seriously as creative mediums, I can tell you the similarities go deeper.
What’s the Big Deal About Components?
With Lego, I mainly design cars, trucks, and buses; I’ve designed over 60 digitally, most of which have found their way into real plastic. Something I’ve noticed is that no matter how different two vehicles may look, they share very similar architectural challenges, perhaps most notably the chassis. A strong chassis, with plenty of attachment points for the body that sits upon it, is key to a successful, stable build.
One of the most surprising things about the many varied vehicles I build: Most of them are built on one of just a handful of chassis designs, lightly modified and dressed differently from the waist up. Even automakers utilize this powerful componentized approach to bring varied vehicles to market for lower cost, with reliable quality, faster. Companies that don’t invest the time in componentizing their products suffer through production hell.
A component is the reusable chassis of web development. It’s part of a garage of refined, extensible elements that you can count on, because you’ve been improving them for months or years across projects, rather than re-solving the same problem in a vacuum every time. And in contrast to template-driven development, component-based development is more flexible. The time and energy you save by using components to jump-start your development frees up headspace for innovation and creativity — building the body panels, if you will, that give each project its own character.
Starting a Component Library
Starting a component library is actually pretty easy, not as time-consuming as you might think, and you can start with just one component! All it takes is commitment from your team to the idea, some time to get the ball rolling, and the dedication to continuous improvement.
The first step is as simple as asking, “What do we keep having to build over and over?” Several things probably came to mind right away; for me, footer bars were a logical place to start. Footer bars are a great candidate for componentization because, generally speaking, they’re all fairly similar in function and layout (even the extremely creative ones).
The next step is asking, “Do we have existing code from a past project that, with a little cleanup, can become an elegant scaffold for most of our footers going forward?” As long as you choose a good-enough specimen, you don’t need to worry about it being perfect. The beauty of a component library is that it’s full of living documents that you can improve over time.
You shouldn’t choose the most complex example as your component — rather, choose the most elegant and functional. While flashy effects are tempting to include, if you’ve only ever used them on one or two sites, they’re simply nice-to-have options, not core component functionality. These flourishes can be added on an as-needed basis to individual projects, and they can be built better with the time you save by reusing the component’s core.
The third step is genericizing your chosen example. It should contain functionality that is context-agnostic and useful on many sites. Stripping out superfluous code and relics, and setting up mixins, variables, and other time-saving options here is important; it’ll make the component a breeze to use and update.
How you store your components is up to your individual development situation, but they should be easy to pull into new projects, and preferably fully documented for new developers (or for your forgetful self, if you’re like me).
Building on the Success of Your Component Library
The last step is quite simply making time to add more components, maintain your existing ones, and iterate as you learn from using them. This ensures your component library will continue to serve you well, shaving precious minutes and hours off your development time and freeing you up to solve new problems, rather than the problems you’ve been solving over and over.
The component library is a powerful tool that disparate industries have begun to utilize to develop varied, reliable, and easy-to-use products while saving time, money, and sanity. There’s a reason that the image of an interlocking toy block has become a powerful icon in the technology world: It symbolizes modularity, flexibility, and the possibility for infinite creativity and innovation.