JavaScript Best Practices: Part 3 – JavaScript Frameworks and Libraries

/ April 12, 2016 in 

In most languages, you can use the standard library to accomplish most tasks. Yet, it is usually helpful to use popular frameworks and libraries to handle common tasks that applications need. For Java, this may mean using the Spring framework or the Hibernate library. For Ruby and Python, it might mean using Rails and Django, respectively. JavaScript frameworks and libraries are no different.

JavaScript Frameworks and Libraries

There are countless JavaScript frameworks and libraries that are available online. As a result, using these JavaScript frameworks and libraries makes developing large enterprise applications easier. It does this by replacing potentially brittle homemade solutions with more mature and tested libraries from the open source community. In some cases, it may be necessary to roll your own solution to solve a problem. But frameworks do exist to handle the majority of situations that you may encounter in a typical application.

JavaScript Frameworks

Angular

Angular is the most popular JavaScript MVC framework. It has more Github stars and forks than any other framework. While this isn’t a guarantee that Angular is the best JavaScript framework, it does show a measure of developer mindshare that might influence a choice in application frameworks. By using a more popular JavaScript framework, it thus may make it easier to find qualified developers and useful packages. Angular provides tools for creating applications with features. Tools including data-binding, routing, form validation, AJAX server communication, and many others. Angular bills itself as the way HTML should be. It provides a way to extend HTML to add custom components, also known as directives. Angular’s newest version, Angular 2, is currently in beta and will provide some new features including components and improved performance. Large companies, including Google, GoDaddy, LEGO, NBA, Fox Sports, Ford, Lyft, and Forbes, are using Angular.

Ember

Ember is another complete MVC framework. It provides many of the same features as Angular with some main differentiators. One of Ember’s unique features is its powerful Ember Data library. This data library provides a data store to manage application models. Another unique feature is Ember CLI. It provides an easy way to set up an Ember application according to community standards. While not quite as popular as Angular, Ember is perhaps even more powerful and full featured. Many companies use Ember, including Netflix, Apple Music, PlayStation, Heroku, Square, Nest, Twitch, and Vine.

React

React is a new framework from Facebook that is quickly rising in popularity. It is less full featured than Angular and Ember and focuses more on the view layer of the MVC pattern. It uses a virtual DOM and one-way data flow pattern to both simplify application logic and increase performance. The Redux library gives React a persistent data store like the Ember Data Store. Additionally, React Native allows you to build native Android and iOS applications using JavaScript and React. If you need high performance and/or native applications, React is certainly a JavaScript framework to consider.

Other MVC Frameworks

Other popular JavaScript MVC frameworks include Backbone, Knockout, Meteor, and many others. TodoMVC is a great site that compares many common frameworks by writing the same ToDo web application in each framework.

Bootstrap

Bootstrap is a complete front-end UI framework that combines CSS and JavaScript to provide features including a grid layout, common components, and responsive design. By using a framework like Bootstrap, you can enhance the layout and styling of your user interface without much effort. If you need to fully customize the appearance of your application, consider Bootstrap which is easy to theme and modify to create a unique look.

Over the years I’ve used many of these JavaScript frameworks depending on the needs of the application. Each have its own strengths and weaknesses that you should take into consideration when choosing which one is right for you. In general, I currently recommend using Angular. The popularity and large community wrapped around Angular makes it a great choice for most enterprise applications. Plus, due to its popularity, it’s easier to hire and train qualified developers.

JavaScript Libraries

jQuery

jQuery is definitely the most well-known and most used JavaScript library. Since its release in 2006, it has found its way onto more than 68% of the most popular sites on the Internet. jQuery was one of the first libraries to provide a reliable way to handle both DOM manipulation and AJAX requests on a cross-browser basis. With the advent of newer JavaScript frameworks, including Angular, Ember, and React, the need for directly using jQuery has diminished. Though some of these JavaScript frameworks still use it behind the scenes (Angular). Yet, there is a very good chance that most JavaScript developers are familiar with jQuery and that it is used in most web applications.

Underscore & Lodash

Underscore, and its arguably better fork, Lodash, are utility libraries. They allow functional programming concepts, such as map/reduce, in JavaScript. In many applications, common and possibly fragile self-written operations, such as filtering a list and flattening nested arrays, can be achieved with one line of lodash.

D3

D3 is a powerful data visualization library. It can create almost any type of chart–from simple bar and pie chart–to fully interactive visualizations such as those created by the author of D3 for the New York Times.

Moment

Moment is a date and time library. It makes handling and manipulating dates easier in JavaScript. Moment can also serialize and deserialize date objects to and from any format of date strings.

What’s Next in JavaScript Best Practices…

These are just a few of the popular JavaScript frameworks and libraries a developer can use when working in JavaScript. They will help you streamline the development of large enterprise web applications and can help you avoid potential pitfalls. Our next blog in the series will focus on JavaScript tools that can help automate and simplify common tasks.


Read All Posts in the JavaScript Best Practices Series:

Previous

JavaScript Best Practices: Part 2 – JavaScript Coding Standards

Next

JavaScript Best Practices: Part 4 – JavaScript Tools

Close Form

Enjoy our Blog?

Then stay up-to-date with our latest posts delivered right to your inbox.

Or catch us on social media

Stay in Touch

Whether we’re honing our craft, hanging out with our team, or volunteering in the community, we invite you to keep tabs on us.