JavaScript libraries take the legwork out of building complex applications. Here are some of the most useful libraries to use in 2021/2022.
Once you’ve graduated from ‘Hello World!‘ and understand how JavaScript works, you’ll probably want to dive into building something more useful – a website, or a service, or a mobile app.
These all have many moving parts – Authentication so users can log in, database support for storing data, file uploads so users can store their cat pictures in the database – all of these are complex systems that take time and effort to develop.
They’re also all very similar, no matter what kind of application you’re building. The login system for a shopping site isn’t really different from the login system for a social media site. They ask for a username and password and log you in.
That’s where libraries come in. They provide the functionality for all of that boring stuff so you can spend your time actually building your project.
Here are some of the JavaScript Libraries we’ve been using in our projects in 2021 (and will continue using them into 2022). They’ve saved us hours of development time, so they’re worth checking out!
Node.js Authentication – Passport.js
Passport.js adds authentication to Node.js apps. Paired with the Express.js web framework, you can be up and running in no time with an authenticatable website or web service.
Node.js Database / ORM – Sequelize
Sequelize does more than connect your Node.js app to a database – it also provides ORM (Object Relational Mapping) functionality.
Put short; it makes dealing with database records super easy. Everything is abstracted away from raw SQL queries – instead, you define your models, link them to a table, and then deal with the models in your code. Create, update, and delete objects, and the changes will be reflected in the database.
Using an ORM is a must-have for complex applications.
Mapping – Leaflet.js
Leaflet.js integrates with several online mappings services. It can query these services for an address or coordinates and then display a map. Add points, buttons, or navigation using the simple API.
It’s lightweight and supports many plugins if extra functionality is required.
Commenting – Commento
Commento allows you to strap a comments system onto pretty much any web page. Host a comment server, drop in the JavaScript where you need your comment box to go, and you’re done.
Payments – Stripe
https://stripe.com/docs/libraries
Stripe makes taking payments online incredibly simple. They are developer-focused and provide all the tools required to integrate payments into your service or app.
The documentation is solid and covers usage for various platforms, including JavaScript (both client-side and server-side).
Helper Functions – Lodash & Underscore.js
Lodash and Underscore.js both provide a pile of extra functionality for Javascript.
They’re real time savers, or just plain useful – for example:
- Functions for searching and summarising arrays
- Debouncing input
- Generating random input and unique IDs
- Checking variable types
- Lots more
Both libraries do similar things, so you probably don’t need both – pick one depending on your needs.
Animation – anime.js
Anime.js is the library for making things move on screen. Animate anything – graphs, moving text, images – any on-screen element can be moved about, stretched, scaled, and rotated.
User Input – Cleave.js
https://nosir.github.io/cleave.js/
Users are unreliable. They mash keys, type words where there should be numbers. Mayhem.
Cleave.js enforces user input into HTML form inputs.
Don’t want a user typing letters into a number input? Cleave.js will ignore any input that isn’t a number.
Want to read an email address? Cleave.js will make sure the user has included the @ symbol.
Nifty.
Interface Building – Vue.js
Vue.js is a frontend library and framework for adding interactivity to pages using HTML, CSS, and JavaScript.
Basically, it allows you to change the content of an HTML page without reloading it. This can be used for loading content dynamically and is vital for building single-page apps – apps that endlessly scroll content or load images from thumbnails without navigating to a different URL or refreshing the page.
Vue.js is great because you can rely on it as little or as much as you like. Build your whole web app in Vue, or just use it here and there where you want to add some dynamic content.
Time and Date – Moment.js
Traditionally, dealing with dates, times, timezones, and handling regional date/time formatting was a nightmare.
Moment.js makes all of that easy. Transpose times across timezones, convert from one date format to another or display the time to users based on their location.
It’ll save you a few wrinkles.
Image Tiling/Masonry – macy.js
Fitting rows of pictures of different sizes on screen may seem like a simple task, but it’s not.
Different screen sizes, resizing windows, changing screen orientations – all throw up challenges when trying to get images displaying in a tidy grid.
macy.js solves this elegantly. There are other options, but I’ve found this one to be the most hassle-free.
Image Carousel – Slick
https://kenwheeler.github.io/slick/
‘The last carousel you’ll ever need’ – agreed.
Image FullScreen Viewer
https://dimsemenov.com/plugins/magnific-popup/
Display images in a full-screen popup, with zooming and gallery navigation. There are a lot of libraries that do this, and I think this one is the best.
Popups – SweetAlert2
https://sweetalert2.github.io/
Get rid of those ugly native JavaScript browser popups/alerts and use Sweetalert2 instead.
(By popups, I don’t mean annoying ads – I mean modals for displaying notifications, success messages, and alerts)
WYSIQWYG User Input – Summernote
You might want your users to be able to input more than just plain text. Blog posts would be pretty boring, otherwise.
Summernote provides a full what-you-see-is-what-you-get rich text editor – outputting HTML to be saved in the backend.
The full gamut of HTML text formatting is available – from bold/italic/underlined text to using different fonts, superscript, subscript, etc.
Embedded youtube and Vimeo videos, images, tables, and other elements make this the best option for letting your users submit rich content.
User Input – Dropdowns – Select2
Dropdowns are great, but they’re not really useful once the list of options grows over more than a dozen or so. Something as simple as a dropdown for the user to select their country is an inconvenience – there’s a lot to scroll through.
Select2 resolves this by providing searchable, customizable select boxes which can even retrieve the list of options from a remote server based on what the user is typing. Neat!
Date and Time INput – Flatpickr
Allow your users to select a date/time from a calendar interface. Looks professional and negates users unintentionally picking the wrong date or time due to regional differences.
The format of the selected date/time can be specified to match your back-end, making your life easier, too.
Layout – Bootstrap
Bootstrap is primarily a CSS library – it contains elements like buttons and borders, as well as grid-layouts and text formatting – but it also has a JavaScript component that adds stuff like Modal popups and dropdown menus.
It’s a must if you want a good-looking application right now and want to worry about your branding later.
