Libraries and frameworks for a budding front end developer
by Cameron Tebbenham-Small, Design Enterprise Studio Member, March 2022
A coding library is a collection of standard functionalities – pieces of reusable code that enable developers to skip a great many steps that have likely already been accomplished by developers before them. These could be maths functions, interactive web-forms or other that are then inserted into your code as a supplementary function. Think of it like adding an extra chair to your room – you’ve already done some decorating, but don’t want to build a full new Ikea chair so get something premade that fits the job.
If a library is like a piece of furniture, a framework is the entire room – if not the entire house. A framework sets the shape and layout of your website/webapp in a fundamental way. They are the scaffolding for your entire project, which more often than not may happen to also contain libraries inside of it. This is extremely useful if you intend to make things like single page applications with optimised UI rendering, want to neatly structure every aspect of your project or don’t want to code every single function from scratch.
CSS frameworks can be boiled down into two main categories – those that pre-style elements and those that don’t. The former is often easier to learn, while the latter offers more choice in how you style your elements. As such I will discuss one of each that I have personally used.
You cannot search for a CSS framework without seeing Bootstrap, and for good reason. Initially branded “Twitter Blueprint” and created by a couple of developers at Twitter to encourage styling consistency, it became often source and freely available in 2011. That is, essentially, the purpose of all CSS frameworks – consistency. The more consistent your styling within a website, the better the flow of navigation, information and efficiency for the end user.
“Bootstrap is highly desirable for its ease of use and responsive structure”
Bootstrap is also one of the easiest CSS frameworks to dive into as as many of the elements (such as buttons) come pre-styled. Documentation is extensive and Bootstrap has a vibrant community that is always coming up with new themes and styles.
However, with that ease of entry comes a few limitations. Firstly, there is a saying that once you’ve seen one Bootstrap site – you’ve seen them all. While not necessarily true, it is harder to make each site look and feel distinct. This is because of all that pre-styling previously discussed. Further, unless you use the minified version, you will end up with a much larger CSS file containing hundreds of classes that you will never use. While you can of course set up your own external CSS file and override some of Bootstrap’s presets, with or without the dreaded “!important” tag (such as changing danger/primary/secondary for main colours), developers who prefer granularity in their design might want to stay away.
This leads me to the second CSS framework and perhaps my new favourite…
Tailwind is all about efficiently writing vanilla CSS inline with your HTML in a way that gives freedom to the developer. In fact, Tailwind’s motto is that “Most CSS frameworks do too much”. This results in a lightweight framework that only gives you as much as you need to get the task done. CSS coding becomes mostly unnecessary, but you still need to know how CSS works. Tailwind is a framework that will grow with your understanding of CSS in way that is very rewarding for the active developer
Tailwind’s motto is “most CSS frameworks do too much.”
Tailwind differs from Bootstrap in that it doesn’t pre-style your content for you. Instead, it packages vanilla CSS into single line phrases and allows you to keep all your CSS inline without cluttering up your HTML files. What’s more, media breakpoints are easily incorporated by adding a prefix to whatever other class you want to use. For example, you could set the width to be 24 rem on a mobile device (w-24) and 48 on a medium sized screen (md:w-24). This also allows you to choose whether you want your project to be mobile or desktop first – unlike Bootstrap which is explicitly mobile-first.
This is a form of Atomic CSS, whereby an element’s classes denote how the element will look. If the element has a class list of “text-center text-white bg-black p-4” you can expect to see centred white text on a black background, with a padding of 4 rem. I particularly love the use of rem for sizing because it is tied to the root font size. This ensures that all your elements are scaled proportionate to each other. All these Tailwind Classes can be found in a handy, searchable cheat sheet: https://tailwindcomponents.com/cheatsheet/
As previously mentioned, strong CSS knowledge is required to make the most use out of Tailwind, unless you make heavy use out of community pre-styled assets. Further, in my experience, Tailwind is harder to initially set up than Bootstrap for a few reasons.
Firstly, you’ll want to use PostCSS or Sass to make the most use out of all Tailwind’s features. In Visual Studio Code, this can be done by installing the PostCSS Language Support extension and installing postcss-cli via npm. You will also likely want to install Tailwind CSS IntelliSense at the same time as it autocompletes Tailwind classes similar to how Emmet functions.
Next, you’ll need to follow the Tailwind installation instructions and set up a config file which tells Tailwind which files to scan for its classes, and finally run the build/watch command to auto-generate the necessary CSS. It may sound complicated, but once you’ve done it the first time, you’ll be set.
At its core, front end development is all about portraying information and allowing for easy navigation between said information. React JS does this better than most and is highly in demand. As of 2021 React is the most used web framework/library among developers and is also the most desired by developers according to Statista and the 2021 Stackoverflow Developer Survey.
The Virtual DOM
It is specialized in the creation of sophisticated user interfaces and just as its name suggests, React reacts to changes in the Virtual DOM (Document Object Model) in a way that boosts performance and load times.
Community and Plugins
Lastly, React is constantly being updated and has a plethora of plugins and extra resources such as React Router, which enables powerful page routing despite the single page nature of React applications. This means that you can have a single index.html file that is dynamically updated with whatever content you need to show according to your JS files. If you liked the sound of Bootstrap for CSS, there is also a React specific variant called Reactstrap to sink your teeth into. More of a mobile fan? React Native has you covered, allowing you to convert your web-centric code into a fully usable mobile application.
That concludes my brief introduction to a handful of the most notable frameworks being used in the industry today. There are new solutions coming out all the time, which also pushes the leading frameworks to innovate and continue developing their tools. CSS frameworks can drastically speed up the development process when custom code isn’t required on a large scale, while a library such as React opens up doors to all sorts of new ways to develop for the web. Enjoy!