A lot happened last year regarding the development of frontend tools. This year is recognized as the year of innovation and action, progress, and rapid change. First, software took over the world, then the internet (the web) absorbed apps, and now JavaScript has taken over the web. But in 2018, JavaScript itself was “consumed” by React (figuratively speaking). Yes, React won a major battle among its many counterparts and alternatives and is now considered quite interesting and popular—even though, at the end of 2017, some developers still preferred Angular.
React continues to lead in developer surveys, with its usage rapidly and intensely growing—one could say dramatically—while Angular’s use has stagnated (2016–2017).
But it wouldn’t be so simple if the market didn’t also have Vue.js, Next.js, Reason, GraphQL, Storybook, Webpack, and other libraries and frameworks that are widely used by web developers to varying degrees. Hundreds of free JS libraries make it hard to decide what to use and what to stick with. Some become parts of new projects or integrate into others, while some evolve independently and intensively. And given the typical sine wave of development, today’s “top” can be tomorrow’s “has-been.” Big names like jQuery, React, and Webpack are familiar to many, but what’s going on with the lesser-known libraries?
We’ll look at various top JS libraries for different goals commonly needed for web projects (sites, interfaces, applications). We don’t take sides but observe the diversity of the ecosystem and the fluctuations in popularity. The year is in full swing, and by winter, the scene may completely flip.
Vue and React
Vue.js has tons of stars and downloads on GitHub, but it can't fully replace Angular and React, and many only begin exploring it after first trying the other two. Back in 2017, few believed Vue could surpass React in usage or overshadow Angular in hype. But throughout 2018–2019, we may see Vue significantly overtake at least React. Still, don’t forget that React is financially backed by one of the world’s richest companies (Facebook), not to mention the talented developers behind it.
Vue, from a regular developer’s point of view, is easy to learn, features solid management and built-in routing, making it a full-fledged application framework. Its community is not as large as React’s, but it grows based on how developers respond to feedback and library improvements.
Still, Vue hasn’t yet managed to dethrone React. Users overwhelmingly favor React. Vue attracts new developers but struggles to convince seasoned ones that it’s equally powerful or backed by a major team. Vue’s site also has a pretty thorough comparison of the library versus its competitors.
Riot.js
Virtual DOM rendering and custom elements came with React. If you need a powerful UI library, that’s the go-to.
But Riot can be a React alternative. It also supports virtual DOM but uses simpler syntax and is easier to manage. Unfortunately, Riot isn’t as large as React and doesn’t have Facebook backing, so there’s no huge community—but it’s a smart alternative and a worthy contender in frontend development.
Popmotion.js
The JS animation library Popmotion is also very popular on GitHub. It’s lightweight, fast, browser-compatible, and offers extensive customization. Every animation frame can be tracked and refined. Example 1 and Example 2.
In short, Popmotion.js is something fresh for developers who previously struggled with Flash or tried using jQuery for animations. This makes things simpler and more efficient.
Speed tests of animation performance using different tools can be found on Codepen.
Create.js
From web animation to digital media—all of it can be handled by Create.js. It's not just one library but a suite for different purposes. For instance, Easel.js works with HTML5 canvas (drawing via scripts), and Tweet.js helps create user-friendly or online animations. Each library is different in functionality and uses modern browser features. See the official site for more details. The screenshot below shows the library in action. A user draws with a mouse, and the line’s thickness depends on how long the click is held.
Meteor
Any platform can be integrated with Meteor, yielding fantastic results. It lets you build JS-powered apps from chat channels to dashboards or social networks. For example, the news/voting framework Telescope is built with Meteor and React.
Meteor has tons of features and can be tough to learn, but mastering it opens the door to building massive, multifunctional web platforms.
Chart.js
Bar charts, line charts, bubble charts, and all kinds of other visualizations can easily be created using specialized JS libraries. Chart.js is the simplest among them, yet it supports built-in animation settings. It’s easy to configure, easy to use, and has one of the most extensive global open-source documentation sets.
WebVR
Virtual reality took the world by storm last year, and many developers (as well as startups) became excited about how to bring innovative technologies to their projects and attract users. Naturally, WebVR quickly followed.
In our web design articles, we’ve discussed how VR can be implemented in websites. We noted WebVR’s role even back then. Today, we’d like to highlight that WebVR supports Oculus Rift and Vive, and is also an open-source project. You can learn more either on the official website or via Mozilla’s site.
Three.js
3D animation isn’t surprising anymore—we watch 3D movies and play games—but implementing 3D in web animation is still complex. It’s one of the main frontiers of tech development. However, with Three.js, you can already create simple 3D animations and embed them into your website.
On the site, you’ll find dozens of examples of its usage: mysterious moving backgrounds, dynamic graphics, and animated 3D interfaces. So if you’ve got patience and passion, creating magical visuals won’t be a problem.
Storybook
Storybook is a must for developers testing, building, and documenting UI components. You can create and test components in complete isolation. It’s like a live UI style guide, highly valued in dev environments.
You may have seen Storybook in action, for example in the Airbnb events library.
Prettier
Prettier is a small helper for working with code. Its goal is simple: make code more readable, understandable, and beautiful. It has tons of GitHub stars and downloads, and it’s used by default in projects like React, Next.js, and Webpack. No setup is required—it’s easy to start with.
Parcel and Webpack
Both JS tools deserve equal attention—they are bundlers for web applications. In other words, they compile all resources into one (usually) file and prepare it for the browser.
Webpack is the most powerful and functional among them. It supports single-page apps and can split code into chunks.
In contrast, Parcel is a bundler that’s also gaining popularity fast. Its standout feature is speed—up to 10x faster than Webpack if caching is enabled. Plus, Parcel requires no configuration, whereas Webpack has a steep setup curve.
Overall, the battle between Parcel and Webpack resembles the Vue vs. React rivalry. Who will win and dethrone the other remains a perpetual question. It’s like the endless debate over Xbox, PC, or PS4 — which is better?
Gatsby
Speaking of web development and building websites, we can’t ignore the site generator Gatsby, built on ReactJS. Especially since the official React website was made using it. Gatsby’s strength lies in preloading page data to speed up navigation. It doesn’t use templates but works with React components and Webpack, making it the best tool for ultra-fast projects with automatic updates and instant page transitions.
Conclusion
All the libraries and tools mentioned here have something unique to offer the JS community. If you enjoy working with JavaScript, we recommend diving into each one to see what fits your project best.
It’s not about choosing just “this” or “that” tool to build interfaces or applications. Different goals require different toolsets. And despite React’s rise in popularity in 2018, Vue is not something developers are eager to forget. Nor should you instantly switch your workflow just because React is trending. But if you’re still undecided, explore the most common JS libraries, try some widely-used tools, and find something that suits you—something simple, practical, and easy to adopt.