5 Javascript Libraries That Are a Great Fit for Any Front-End Project
As a developer you’re constantly looking for ways to improve your way of work and whenever it’s possible you try to make your life a little bit easier. One way you could do this is by using the right tools in your projects. Since there are so many tools out there it’s nearly impossible to check them all out or give them a try.
That’s exactly why we’ll go over five JavaScript libraries that are a great fit for any front-end project in this article. It doesn’t matter whether you’re using React, Vue, Angular, or no framework at all. This list of libraries is handpicked by me and I’ve used all of them across projects that I’ve worked on.
1. Immer
Immer, which means always in German, is a tiny package that allows you to work with immutable state in a more convenient way. Immer is based on the copy-on-write mechanism.
According to the docs this is what Immer does:
The basic idea is that you will apply all your changes to a temporary draftState, which is a proxy of the currentState. Once all your mutations are completed, Immer will produce the nextState based on the mutations to the draft state. This means that you can interact with your data by simply modifying it while keeping all the benefits of immutable data.
The power of Immer is that it allows you to create the next immutable state tree by simply modifying the current tree. Handling state can be somewhat of a pain and mess sometimes. Immer makes this a lot easier.
When using Immer you don’t need to learn any new APIs — you can create immutability with JavaScript objects, arrays, Sets, and Maps that you’re already familiar with.
Although Immer has a little bit of a learning curve it’s really worth checking it out since it makes handling state a breeze.
2. Lodash
Lodash makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, and strings. With over 40k stars on GitHub, Lodash is a popular library. According to its website, Lodash is a modern JavaScript utility library that delivers modularity, performance, and extras.
Lodash can be easily integrated into any JavaScript project and is one of my personal favorite libraries to use because of how elegant it is. With Lodash your code will get much more readable and easier to maintain. I’d highly recommend you checking out Lodash.
3. Jest
Testing is an absolute must when writing code. That’s exactly why Jest has to be on this list. Jest is a JavaScript testing framework with a focus on simplicity. Jest comes with all the features you’d expect from a testing framework like code coverage, mocking, and very thorough documentation.
Jest allows you to write unit tests for your code which has a very easy to understand and intuitive API. If you’ve ever written unit tests before this should be fairly easy to get started with.
On top of that, Jest comes with another form of tests: snapshot tests. Snapshot tests are great when you’re using components — for example when you’re working with React, Vue, or Angular.
But what is a snapshot test? This is what the docs tell about snapshot tests:
A typical snapshot test case renders a UI component, takes a snapshot, then compares it to a reference snapshot file stored alongside the test. The test will fail if the two snapshots do not match: either the change is unexpected, or the reference snapshot needs to be updated to the new version of the UI component.
Jest is created by Facebook and has over 30K stars on GitHub which is quite a lot for a testing framework.
4. Storybook
Storybook is an amazing tool when you want to develop UI components in isolation. This allows you to work on one component at a time. You don’t need to spin up a complex dev stack in order to work on your components. All you need is one command that starts up storybook.
But what exactly is a story? This is what the docs tell us about stories:
A story captures the rendered state of a UI component. Developers write multiple stories per component that describe all the “interesting” states a component can support.
Each component has multiple stories, with each story describing a state that the component can be in. This means you’ll have stories that describe the happy path scenario as well as stories that cover more exceptional use cases.
What’s so great about storybook is that whenever you work on a component you’ll see the changes immediately due to hot reloading.
Storybook works particularly well in combination with Jest. Since Storybook isolates the development of your UI components it makes it really easy to write tests for these isolated components. Make sure to create snapshot tests for your components. Snapshot tests are a very useful tool whenever you want to make sure your UI doesn’t change unexpectedly.
Storybook has more than 50K stars on GitHub which makes it a highly respected tool among developers.
5. Moment.js
If you ever have to work dates or times you’ve probably struggled with formatting, validation, or handling different timezones. Not when using moment.js. This library is a one-stop solution for all the problems you’ve ever had with dates and times.
Out of the box, it comes with a dozen features, like support for internationalization. You can load multiple locales and easily switch between them.
With close to 45K stars on GitHub this is the most popular library when it comes to handling dates and times.
#web-development #javascript #front-end
