Week 6: Popular libraries and frameworks

By Celestine Auburger

Celestine is currently taking an apprenticeship at Peerigon to become a professional web developer. As part of her weekly routine, she publishes a blog post each week about what she has been doing and what she has learned.

Problem to solve

Writing every little function by hand, especially when you need it in numerous projects, is a waste of time. No wonder you’re thinking, there must be something else. Like, code you can always include in your projects and have these functions ready to use. There’s exactly something like that! They are called libraries and frameworks. But what’s the difference? It’s hard to tell and doesn’t matter so much, as they are solving the same problem in a similar way.

Photo by Janko Ferlič on Unsplash

But for those who are still curious:

• A library is a collection of functions. You call these functions and do something with them. So, you have the power! But there are some rules, e.g. the shape of parameters that are passed to the function.
• A framework is usually a bigger collection of functions or even libraries and is calling your code and does stuff with it (this is also called the inversion of control). So, you don’t have the power and obviously have more rules.

But which libraries and frameworks are out there? I’ll give you an overview and some examples sorted by functionality.

Solution

Building single page apps:

• Angular: good for large apps; offers a lot of structure; quite big in terms of download size
• React: good for all sizes of apps; offers great flexibility
• Vue: good for smaller apps; lightweight and easy to learn; a lot of updates because it’s quite new

State Management:

• Redux: Usually one global store and immutable states
• MobX: Multiple stores and mutable states

Testing:

• Jest: works out of the box because it comes with an assertion library and mocking support; supports snapshot testing; quite new
• Mocha: very flexible by choosing individual helper libraries/frameworks; older and widespread;
• Ava: minimal testing library; runs tests parallel;
• Assertion-Libraries:
• Chai: BDD & TDD
• Expect.js: BDD based on should.js

Bundler:

• Webpack: needs configuration, widespread
• Browserify
• Parcel: works out of the box, very fast

CSS preprocessor:

Provides variables, loops, functions and mixins for CSS.

• Sass
• Less

CSS postprocessor:

Extends your written CSS automatically by extending class selectors, or apply prefixes.

• PostCSS
• Autoprefixer (part of PostCSS)

Write CSS in JS:

• Styled components

Server-side Web Frameworks:

Creating servers, handle routing and render templates.

• Express
• Koa

Server-rendered JavaScript:

• Nuxt: combines Vue, Webpack and Babel
• Next.js: combines React, Webpack and Babel

Static typing:

• Flow: Not a standalone language, often combined with Babel
• TypeScript: Own language, generally a superset of JS

Transpiler:

• Babel: compiler for JS to convert ES6+ code into backwards compatible JS

Linter:

• ESLint: Linter (a tool to find problematic patterns or code that does not follow certain style guidelines), which can be configured

DOM Utility:

• jQuery: makes DOM traversal and manipulation, event handling, animation, and Ajax much simpler

What I learned

• It is useful to have an overview which libraries and frameworks do exist and what they are doing, so you can google for them when you think you could need them.
• You don’t have to know what each framework does and how it works in detail, because when you worked with a few you’ll get used to a new one pretty easy.