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.
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
- 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
- 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.
CSS postprocessor:
Extends your written CSS automatically by extending class selectors, or apply prefixes.
- PostCSS
- Autoprefixer (part of PostCSS)
Write CSS in JS:
Server-side Web Frameworks:
Creating servers, handle routing and render templates.
Server-rendered JavaScript:
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.