7 Vue.js Backends Compared
Rails, Express, Django... the list goes on. There are so many great backed frameworks, which one should you choose? If you use Vue, read on for one expert's opinion.
CORE
·
Join the DZone community and get the full member experience.
Join For Free
Which backend are you planning to use for your next Vue.js project?
Often developers choose what they're familiar with. If you're primarily a Laravel developer, for example, I'll bet Laravel will be first to your mind when planning a new project.
It makes sense to work with what you already know and enjoy. That said, each backend has its own strengths and weaknesses, and certain project requirements may better match one more so than others.
Your best bet is to get familiar with what's available so you can make a well-informed choice. In this article, we'll investigate the suitability of some of the most popular backend options for Vue apps:
- Express
- Laravel
- WordPress
- Firebase
- Serverless
- Django
- Rails
The de facto choice for a Vue.js backend is Express.js, a microframework for Node.js.
Before we consider Express specifically, let's first consider the advantages of Node.js. Firstly, Node is written in JavaScript. This means you can share code between a Vue client and a server app. It also means you can use server-side rendering to generate your Vue app on the server and deliver it to the client fully rendered. Secondly, Node is really fast thanks to non-blocking I/O and its great ability to handle concurrent requests.
Express.js is by far the most popular choice for a Node-based framework. Developers like its minimalism, which make it easy to create with and really fast, and its flexibility, allowing you to choose your own database, ORM, authentication, etc. if you should need them.
If your goal is to build a web app that is mostly about the front-end and only requires a relatively simple server app to deliver the views and perhaps a basic API, Express is an excellent choice.
If you like the idea of a JavaScript stack, but want a more substantial MVC architecture, check out Sails. Another good option for building REST APIs with Node is LoopBack.
Further Reading
Good Vue-Based Templates for Express
Laravel is an MVC framework for PHP with the stated goal of "making developers happy." Consistently delivering on this goal is why Laravel has become the most popular backend framework on GitHub.
Since Laravel version 5.3, Vue is the default front-end JavaScript framework that ships in a Laravel installation. The Laravel community unofficially adopted Vue way before it was cool, though, before Vue had even reached version 1.0! In fact, early traction for Vue was partly a result of praise on Twitter from Laravel creator Taylor Otwell.
Vue and Laravel may be written in different languages, but they share a common philosophy: simplicity, elegance, and a great user experience. With Laravel, you not only get a powerful object-oriented MVC framework with database, authentication, and API out of the box, you also get a delightful development experience thanks to elegant syntax, sensible default configuration, and a community that produces a wealth of great documentation and tutorials.
If you're just building an API and little else, consider Lumen which is a cut-down version of Laravel designed for creating super-fast microservices.
Further Reading
Good Vue-Based Templates for Laravel
If you're building a content-heavy site, you'll probably need a CMS to allow easy creation and management of your content, especially if non-developers are contributing. The king of CMS is WordPress, and, believe it or not, it can pair nicely with Vue.js.
You might think of WordPress as a clunky behemoth with inflexible PHP-generated views. But since version 4.7, WordPress now ships with a REST API, allowing core WordPress data types such as posts, comments, and categories to be accessed straight from a client. This architecture, known as "headless CMS," allows you to take advantage of a powerful CMS backend while still providing a modern user experience with a front-end framework like Vue.
If you need access to more core WordPress functionality than the API can provide, you can instead add Vue to a WordPress theme. Check out http://vuewordpress.com/ which is stripped-down theme based around a Vue.js single-page app!
For even more sophisticated content types, consider a headless CMS app using Drupal REST API. Or, if you're building a content-based site but don't need a CMS, consider VuePress, the recently released Vue-powered static site generator from Evan You.
Further Reading
- Vuejs Wordpress Theme Starter - Getting Started (video)
- Creating a WordPress Theme using the REST API and Vue.js
Good Vue-Based Templates for WordPress
Firebase provides cloud-hosted data that is accessible from any desktop or mobile app via a simple API. If your data is public, you could even use Firebase as a serverless backend! (more on this in the next section).
Where Firebase really shines, though, is in its ability to push data updates to subscribed clients in real time. Real-time data is essential for building chat apps, transport network apps, trading apps, and more.
As you may know, Vue's reactivity system allows your UI to respond instantly to changes in JavaScript data. Adding Firebase to update data in real-time puts this functionality on steroids: you can have a dynamic interface driven entirely by a remote data source!
Integrating Firebase services with your Vue.js 2 application is dead simple with the VueFire library. This will bind Firebase references to properties on your Vue instances. It can also be done with Vuex via the VuexFire library.
If you don't need a database, another great option for real-time data is Pusher. Check out the Ultimate Vue.js 2 Developers Course for an example of a Pusher integration with Vue to keep a shopping cart in sync across multiple tabs.
Further Reading
- Vue.js 2 + Firebase
- VueFire - Firebase meets Vue.js (by Evan You)
- Vue.js + Firebase Realtime Database - course by Vue School
Good Vue-Based Templates for Firebase
What if I told you you didn't need a backend server at all for your Vue app? Instead, backend functionality could be handled by one or more cloud-hosted scripts that run only as required.
This concept, known as "serverless," means you don't need to pay for a backend server that, for many apps, will spend the vast majority of time idling while it waits for user requests, costing you money for nothing. Serverless functions are far more resource efficient and will often only cost you a matter of cents each month to run. You can then deliver your front-end code from fast and cheap static hosting like S3, Netlify, or GitHub Pages.
Like everything else, serverless is not a silver bullet and realistically is not going to be the right choice for most Vue.js projects. Serverless won't provide a lot of the basics you take for granted on a traditional server, and equivalent functionality requires a lot more development work to achieve with serverless functions.
What serverless is great for is when you have a small number request/response paths with narrowly defined parameters. Example use cases include handling forms, uploading images or passing data to another service that can't be passed directly from a client app.
The major serverless platforms include AWS, Azure, and Firebase.
Further Reading
If you've learned to program formally, there's a good chance you've been exposed to the powerful Python language. Django is the most popular Python-based MVC framework for web development.
Django, which promises to be "the web framework for perfectionists with deadlines," follows principles from the Python language that set it apart from other MVCs. For example, the "explicit is better than implicit" principle means it doesn't have the "magic" and "it just works" aspects of Rails or Laravel. Instead, Django code is easy to reason about without domain knowledge of the framework.
Django is batteries-included and comes with a database, ORM, authentication libraries, and a templating engine as part of its core. This makes it a great tool for building powerful and reliable full-stack apps that would pair nicely with a Vue.js client.
If you're using Python but just need an API for Vue to consume, be sure to consider the Django Rest Framework which is a flexible toolkit for building web APIs.
Further Reading
- Build An App with Django and Vue.js
- Building a CRUD Application with Django Rest Framework and Vue.js
- Django Vue.js Integration Tutorial
Good Vue-Based Templates for Django
Rails is an MVC-style framework for the Ruby programming language that has been influential on most of the backends we've covered in this article. It pioneered a "convention over configuration" approach to server frameworks that makes it easy to get started with and results in clean and easy-to-read code. Rails powers many major web applications today like Basecamp, GitHub, and Shopify.
As the documentation says, Rails is "not a minimalist framework, it's a metropolis." This means it includes every conceivable thing you could want in a Vue backend, from ORM to email sending to web sockets. Even Webpack can be run from Rails thanks to the Webpacker Gem, allowing you to have a fully Rails-based development environment for Vue.
If you're getting started with Rails and Vue, be sure to check out the Vue.js Gem.
One of Rails' most innovative features, Turbolinks, speeds up navigating between pages by intercepting link clicks that would navigate to a page within the app, and instead makes the request via AJAX, replacing the document body with the received content.
This functionality is mostly handled in Vue apps by Vue Router. However, if Vue is only needed for simple DOM manipulation in a Rails app, i.e. not for a single-page app, you can use Turbolinks via the vue-turbolinks mixin.
Further Reading
- VueJS as a Frontend for Rails.
- Rails 5 & Vue.js: how to stop worrying and love the frontend
- Rails 5.1 API with Vue.js frontend
Good Vue-Based Templates for Rails
- Rails 5.1 + Webpack + Vue.js + Vuex Demo App
- Todoist clone, written in Rails + Vue (Not a template, but a good example of Vue and Rails)
Published at DZone with permission of Anthony Gore, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments