Libraries, Components, Boilerplates, Frameworks, and Kitchen Sink: How Do They Differ?

Let’s get rid of the confusion

Definition

Libraries

A library is a collection of precompiled routines that a program can use. — Webopedia

Components

Web Components allow us to bundle markup and styles into custom HTML elements. What’s truly amazing about these new elements is that they fully encapsulate all of their HTML and CSS. That means the styles that you write always render as you intended, and your HTML is safe from the prying eyes of external JavaScript. — CSS-Tricks

Boilerplates

An HTML boilerplate is a set of files that you can download, which provide a foundation for any website you care to create. Typically, they have been built by industry professionals but freely released to the community, so you can use them as the basis for your own projects. Not only does this speed things up, but you get the security of knowing that the basics of your site are sound. — CreativeBloq

Frameworks

A framework is a standardized set of concepts, practices and criteria for dealing with a common type of problem, which can be used as a reference to help us approach and resolve new problems of a similar nature.— Awwward.com

Kitchen Sink

It is used for demo applications which showcase all (or almost all) of the features of an API, generally for use by developers who’re learning about the platform. — Simon McKenzie


Great, How Do They Exactly Differ?

We can’t really compare all of them since some are entirely different. However, a great way to distinguish is to provide concrete examples of how and when they are used on your project.

Polymer Library is a perfect example of a library. Basically, Polymer is a library of components — a collection that provides a set of features for creating custom elements to component-ize your apps. These components are blocks of code that we can copy and paste right ahead to produce for say, a badge or an action button.

Badge, Paper Element, Polymer

BEM is a methodology that helps you to create reusable components and code sharing in front-end development. It encourages developers to code websites in a modular way, meaning that we look at our site as an art board of components put together.

Here’s an example of a component:

Author Quote Card by Neel Raj

Libraries are not limited to just a collection of components. It can be a collection of anything: web components, javascript, plugins, code snippets, etc. Another example of it is JQuery. According to their site, Jquery is a fast, small, and feature-rich JavaScript library that contains functions that developers can use. Usually, these libraries are made by developers for other developers to use.

JQuery Library

Now let’s move forward to the tricky part: Boilerplate, framework, and kitchen sink. The term boilerplate was derived from the steel industry in the early 1900s. In the dev world, boilerplate is used as a starting point of a project where you can skip the nitty gritty part and jumpstart to actual coding. Boilerplate usually consists of a package made up of a structure of essential files and folders of minimal and standardized code (HTML, CSS, JS documents etc.) Examples are HTML5 Boilerplate and Skeleton.

HTML5 Boilerplate v5.3.0
Index.html of HTML5 Boilerplate

On the other hand, framework is the complete and styled version of a boilerplate as it contains all the UI components you’ll need: Styled forms, navigations, buttons, grids, etc. If you have heard of Bootstrap, (if you haven’t, then what kind of dev are you? Just kidding) you’re all familiar of how hella useful and commonly used it is. Every developer, in some point of her life, have used this cliché framework. Frameworks are convenient for backend developers as they’d like to avoid CSS as much as possible. There are a lot of frameworks sprouting here and there: Zurb Foundation, Semantic UI, Materialize are just some of the widely used.

Application theme of Bootstrap. Look at those styled (reusable) components.

Kitchen sink is a new term (to me) that is synonymous to documentation or design system (as my friend Sam would call it). It is the complete list of all the UI components and their code snippets.

Semantic UI’s Kitchen Sink
Code Snippets

The Shortest Summary

  • Library is a collection of components, codes, and what not. Components are reusable and styled elements.
  • Boilerplate consists of a package made up of a structure of essential files and folders of minimal and standardized code.
  • Frameworks are similar to boilerplate but are more complex since they are comprised of styled components that you can copy and paste.
  • Kitchen sink is the documentation of all the components and their respective code snippet.

Hope this article helped you in some way. Give me a ♡ if you find this useful :)