Vue.js

Across industries and sectors, we have become accustomed to seeing great rivalries that drive further innovation and competition. In the early days of car manufacturing, we had Ford and Chevy. In the early days of beverage and bottling, we had Coca-Cola and Pepsi. And today in front-end software development, we have Vue and React. As a framework and a library, respectively, both single page applications (SPAs) are tackling Document Object Model (DOM) Manipulation in markedly improved ways from their predecessor JQuery; with the added benefit of offering state management and code-splitting up front. However, as Django developers, we often struggle to decide between these two titans when choosing a front-end for our Django REST Framework (DRF) APIs. In writing this blog post, we hope to alert you to some of the key distinctions between Vue and React, as well as some of their similarities, before you move forward with either for your team.

Within the past year, my development team at Caktus worked on a project that required a front-end framework to build a fast, easy-to-use product for a client. After a discussion of frameworks such as React, Vue, and Angular, and their approaches, our team settled on using Vue.js, along with a Django back-end with Django REST Framework (DRF). Initially, we chose Vue because we were more familiar with it, rather than its current competitor React, but as we worked on the product, we ended up having a number of team discussions about how to organize our code well and avoid extra code debt. This blog outlines some of the development patterns we chose as we worked through a number of issues, such as simplifying a multitude of almost identical Vuex mutations, finding a consistent way of holding temporary state, and working with nested objects on the front-end and back-end.