Best Javascript Frameworks: React, Redux, MobX, Vue

I often get asked “which Javascript framework should I use?” My answer is usually “it depends, but probably React.”

jQuery

jQuery is a Javascript library that helps you perform common tasks in Javascript. jQuery used to be extremely useful because it standardized behavior across browsers. Different browsers used to behave slightly differently; jQuery made those differences go away. Nowadays, the popular browsers all behave nearly identically, so jQuery isn’t as useful. Nevertheless, jQuery still provides useful helper functions to make it easier to build a dynamic website.

I started doing web development soon after jQuery 1.0 was released (pure coincidence) and I primarily used jQuery to build my websites until about 2 years ago. Since most of my projects were fairly small, jQuery worked perfectly fine. A few years ago, when Angular was taking the web development community by storm, I kept using jQuery. My projects were too small to take advantage of a Javascript framework.

If you’re just creating a small project by yourself, jQuery is perfectly fine, you don’t need a framework. In fact, with frameworks such as React, you’ll probably have to set up build tools as well. This can be a lot to learn at once. With jQuery, you can add a script tag and you’re ready to go!

React

React is currently my framework of choice. It’s the first Javascript framework that I liked. One of the big reasons why I worked at Facebook was to see how React works at scale.

React is technically a library, though you can use it as a framework. You can use React alone for smaller projects, but larger projects need a framework to handle your application’s structure. If you’re familiar with MVC, you can think of React as the view. React frameworks provide the model and the controller.

Facebook recommends Flux, an application architecture to structure your React application. Most popular React frameworks are implementations of Flux. In other works, they help you follow the architecture. However, traditional Flux implementations have fallen out of favor because of drawbacks that I will explain in the next section. Redux is a framework based on Flux, but it mitigates most of the drawbacks. Facebook uses traditional Flux, probably for legacy reasons.

If you’re choosing your first Javascript framework, pure React is a great choice. You don’t need frameworks until your application’s codebase grows and becomes unmanageable.

Redux

Redux is a Javascript library that manages application state. It’s most commonly used with React as a framework. Redux is based on ideas from functional programming, such as immutability and reducers. In Redux, you change your application’s state using a function that applies an “action” to the current state to produce the new state. This function is call a “reducer”:


function reducer(currentState, action) {
  // Do something.
  return newState;
}

This simple idea leads to many benefits over traditional Flux: running on the server, telling if parts of the view need to be rerendered, debugging what caused the state to change, and logging the user’s actions for debugging. However, Redux requires a lot of boilerplate code, so it can take longer to write applications using Redux. In general, Redux should be used over traditional Flux.

I think Redux has a bunch of great ideas. However, its implementation could be better. I think all React developers should learn Redux because it teaches you great software engineering practices. However, I would not recommend building your startup’s app using Redux because it takes too long to write. You can take ideas from Redux and use it with other React frameworks. For example, logging all the state changes is trivial in Redux, but that doesn’t mean you can’t do it with other frameworks.

MobX

MobX is another library for managing state. Just like Redux, MobX can be used with most Javascript frameworks, but it’s most commonly used with React. MobX is much more flexible than Redux. This means you’re free to structure your application however you like, but it also means you’re more likely to write bad code. Redux enforces a certain structure, so you can’t really mess up if you follow the Redux recommendations.

MobX allows you to store your state as OOP-style objects. When an object’s properties change, the UI automatically re-renders to reflect those changes. You can pass the objects throughout your application. No matter where the object is changed from, your UI updates immediately. This makes much quicker to write your app; you just have to call someObject.setFoo(newValue)  and your UI automatically. However, this makes it harder to debug. If you passed an object to a function you forgot about, the function may mutate the object unexpectedly and quietly. In Redux, all state changes must go through a central location, so you’ll know if the state was changed.

I like MobX more than Redux because it’s faster to develop in. If you structure your MobX application properly, it can be just as easy to debug as Redux. In fact, you can use Redux-style reducers and action with MobX, though that’s probably overkill. If you’re new to Javascript frameworks, I would not recommend MobX because it doesn’t enforce a good application structure. However, if you have experience with large Javascript codebases and you’re familiar with software engineering principles, then I recommend MobX because you’ll work much faster.

Vue

Vue is a newer framework than React. At the time of writing, it has been rapidly increasing in popularity. At a high level, Vue is like React with MobX, but simpler and faster. It’s like React because it’s component-based and declarative. You can even use JSX. Vue is like MobX because it uses reactive state objects. You can pass the objects throughout your application and when you mutate an object, the UI automatically updates. Also, Vue automatically optimizes which components to re-render based on which components used what data. This works just like MobX. However, it’s faster than MobX + React partially because everything is inside one framework.

I really like Vue’s single file components, which lets you put all of a component’s HTML, Javascript, and CSS in one file. This nicely handles CSS encapsulation, which React does poorly. However, my biggest concern with Vue is how new the framework is. The latest of Vue, version 2.0, added huge changes such as MobX-like re-render optimizations, server-side rendering, and changes to the templating system. Parts of Vue also feel very odd. For example, to do server-side rendering, Vue recommends doing an environment check in each component like so:


if (typeof module !== 'undefined' && module.exports) {
  module.exports = componentFactory;
} else {
  this.app = componentFactory();
}

In contrast, React components can naturally work server-side or client-side. Another example is Vue’s template system. Vue has a directives-based templating system that it can compile to plain Javascript. You can write the templates as HTML or as strings in Javascript. Most of the examples are written in these formats. However, Vue also allows you to write the templates in JSX, which I prefer. It seems like the authors can’t decide which one’s better, so they’re including all 3 versions and waiting to see which one becomes more popular.

If you asked me which Javascript framework is the “best” framework, I would say Vue. It’s easy to get started with Vue, so I recommend giving it a try. However, I would wait for the framework to become more mature before using it for a large project.

The verdict

As I stated in the beginning of this article: it depends, but probably React.

If you’re a beginner in Javascript, jQuery is fine. It’s not the latest and shiniest library, but it’s easy to use and it gets the job done.

Vue is probably the “best” Javascript framework at the time of writing, but I don’t recommend using it in a large project because it’s too new. There will probably be lots of changes to the API in the near future, so you’ll probably have to refactor when that happens.

If you have experience in Javascript and web development, but you’re not familiar with frameworks and software engineering, then I recommend React with Redux. If lots of other people will work on the same codebase, then Redux is the best choice because it makes sure everyone writes clean, maintainable code.

If you’re skilled with Javascript, software engineering principles, and managing large applications, then I recommend React with MobX. Or, if you just want to try out a Javascript framework, then MobX is for you. MobX has most of the benefits of Redux, plus it’s more intuitive and it allows you to develop your application much quicker.

Other relevant frameworks

Angular

Angular was the first Javascript framework that became popular enough that I had to try it. Angular was the most popular Javascript framework until React took over. I personally don’t like Angular because it’s relatively verbose and it takes a long time to learn. Angular has fallen out of favor because it follows the MVC paradigm, which is trickier to manage for larger applications. Angular 2 is a complete rewrite that takes ideas from React. Google uses Angular 2 for many newer web applications.

Ember

Ember is the first framework that I’ve spent a lot of time learning and using. We used Ember at Square, which had possibly the world’s largest Ember app. Ember is also an MVC framework. Ember is based on ideas in Ruby on Rails, such as “convention over configuration”. For example, Ember has lots of “magic” properties. If you name your object properties a certain way, Ember automatically handles them differently. If you’re looking at Ember code and wondering why it’s working, it could be because the author used magic properties that you didn’t know about. Some people liked this because it’s easier to write code if you know about the magic properties. I didn’t like it because it’s easy to forget how certain magic properties works.

Backbone

Backbone is a lightweight library that primarily deals with models and state. Backbone makes it easier to connect your server-side data and client-side data. You can use Backbone with React, though Redux or MobX are probably better. I used a bit of Backbone at Square, but not enough to give an authoritative verdict.

Polymer

Polymer is more focused on HTML and Web Components. It attempts to polyfill and extend native HTML functionality. You can create custom HTML elements with embedded Javascript and CSS. I had to use Polymer at Google and I would not recommend using it. It doesn’t have many benefits over other component-based frameworks like React or Vue.

Leave a Reply

Your email address will not be published. Required fields are marked *