How to Super Charge your Dev Teams Using Component Libraries

Modern day front-end component systems are awesome. That’s a no-reservations, fully fledged, awesome. Sure, some may argue for one system over the other, or that a framework is inherently better than a library – but at the end of the day, it doesn’t matter. Component systems like React from Facebook or Angular from Google supercharge modern development and have bootstrapped communities that make writing front-end apps a breeze. The architecture, documentation, and support for modern frameworks have progressed to the point where writing in an older style (looking at you, jQuery) makes sense neither financially, nor in terms of time-to-market. So, the modern developer is spoiled for choice, torn between a superpowered, enterprise-level framework, and a JavaScript library that does amazing things with the DOM. But this conversation is not about that choice. At the end of the day, the choice between frameworks is a decision based on time, resources, environment, and the scope of the project (more on that later). The focus here is on why you, yes you, need a front-end framework for your app. That’s a big concession from some, but rest assured, all will be explained.

A few years ago, when component systems were still relatively new, the idea of starting a new enterprise app with one of the new-fangled frameworks was a daunting one. Front-end devs were stuck in their world of CSS and html, never venturing far beyond jQuery and vanilla JavaScript for DOM manipulation and app functionality. The learning curve for the new frameworks was insurmountably steep for the typical enterprise project. Since then, the front-end world has evolved. Rich documentation sites, blogs and forums, and other experienced framework developers have all joined forces to take the learning curve from a mountain to more of a molehill. It just doesn’t make sense to develop in the old style anymore. Armed with a component library and a quick project bootstrap, a framework dev can do the work of three traditional front-enders in half the time, saving money and conserving resources. The central tenant to framework development is re-usability. The ability to re-use components, styles, configuration scripts, and API middleware gives devs superpowers that they never had before. Extrapolating on that, a direct line can be drawn between the decision to develop on a front-end framework and actual tangible savings in time and money.

One of the keystone advantages of modern component systems is the idea of reusability. As any developer will tell you, abstracting away commonly used code speeds development in a measurable way. Component systems bring this approach into the front end, allowing devs to take advantage of reusable components, modules, and configurations. Recently, frameworks have started adding configuration-less project tools to speed start up even more. Now, with a simple call to angular-cli, or create-react-app, a developer can have a fully functional, production ready, unit test enabled app stood up in less than five minutes. The time savings because of these tools is measurable in days, not hours.  This tangible benefit is yet another reason to consider front-end frameworks for new development.

In a discussion about reusability across a system, the next logical topic is component reusability. Across a company, system, or even an app, components like text fields, dialog boxes, and grid layouts are reused time and time again. When these components are common across an entire organization with multiple apps, it becomes prudent to develop a component library to unify those components. These component libraries can bring together DOM structure, design standards, and even css styles to give the organization a cohesive look with little or no rewriting of components. This also reduces the time to develop a production app in the organization’s look and feel. With a little investment in a custom component library, project development is supercharged with the power to create apps that look cohesive, work as expected, and are easy to stand up. This provides measurable benefits to organizations looking to increase developer productivity and speed time-to-market.

Modern component libraries aren’t as scary as they were a few years ago. With advancements in usability, configuration, and communities, front-end frameworks have gone from a luxury to a necessity. From decreasing stand up time to increasing reusability with component libraries, frameworks take all the downsides of traditional front-end development and turn them on their head.