Libraries, Components, Boilerplates, Frameworks, and Kitchen Sink: How Do They Differ?
Let’s get rid of the confusion
A library is a collection of precompiled routines that a program can use. — Webopedia
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
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
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.
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:
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.
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.
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.
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 :)