How to Tell If Vue.js Is the Right Framework for Your Next Project

SitePoint
How to Tell If Vue.js Is the Right Framework for Your Next Project
How To Tell If Vue.js Is the Right Framework for Your Next Project

Vue.js grew from a one-man project to a JavaScript framework everyone’s talking about. You’ve heard about it from your front-end colleagues and during conferences. You’ve probably read multiple comparisons between Vue, React, and Angular. And you’ve probably also noticed that Vue outranks React in terms of GitHub stars.

All that’s made you wonder whether Vue.js is the right framework for your next project? Well, let’s explore the possibilities and limitations of Vue to give you a high-level look at the framework and make your decision a little easier.

Please note that this piece will draw strongly on Monterail’s experience with Vue and other JavaScript frameworks. As a software development company, we’ve delivered around thirty Vue-based projects, and we strongly evangelize it among developers and businesses with initiatives like State of Vue.js and Vue Newsletter.

Let’s dive in.

Vue.js Overview

Back in 2014, the first public version of Vue.js was released. Its template syntax — similar to AngularJS — and a component-based architecture — similar to what React offered — made it approachable to JS devs at the time. Vue.js really took off only a year later, when it was discovered by the Laravel (popular PHP framework) community.

A few years later, it now records the highest satisfaction rating among all JS frameworks (91.2%), according to State of JS data. More and more devs report having heard of it and the wish to use it in the future. Companies like IBM, GitLab, and Adobe have already adopted Vue for their products.

According to Evan You, the creator of Vue:

The original goal was to “scratch my own itch,” to create a frontend library that I would enjoy using myself.

And apparently he and the whole Community managed to accomplish this mission. But what is so special about Vue that makes programmers want to use it?

This is what the project’s official website says:

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.

There it is! Progressive and easy to pick up and integrate. But is that enough to make it your primary choice?

The Business Perspective on Vue

At Monterail, we believe that it should not make a substantial difference to a JavaScript programmer which framework or library is chosen for an app’s front end. Building blazing fast, beautiful, and maintainable products is not trivial at all, but if something is feasible, it’s feasible with any modern JS framework.

Yet, we love Vue.js and recommend it to our clients in most cases. That’s because Vue is great for a number of reasons. Let’s explore them.

When Your App Is Full of Animations and Interactive Elements

Vue offers a truly elegant and flexible API — not just for composable architecture for the front end, but also for seamless transitions between views. Transitions and animations enhance user experience, smoothing changes between states. Human brains love movement, so it’s an important part of modern websites and apps. Animating is key when we need to grab user attention, when we want to keep the user on our website for a longer stretch, or simply to make our product more fun.

The release of Vue 2.0 has introduced a lot more flexibility with regard to transitions. We now have more granular access to the transition hooks — which, in turn, makes it possible to leverage third-party libraries and deliver on complex animations while still using Vue at the core. That means there are tons of different ways of doing animations in Vue. All you need to do is apply a custom attribute and add some CSS magic. Vue provides us with <transition> and <transition-group> components already built in and based on CSS animations, allowing for both CSS and JS hooks. It also integrates easily with non-HTML elements — like SVG, for example.

In our portfolio, we have this really great example of a project with many different transitions, where we used Vue.js in tandem with Nuxt. We managed to deliver a beautiful UI for Easyship that was 37% more performant than their AngularJS version. Vue’s incredible possibilities in terms of transitions also make it a good choice for marketing campaign websites. Airbnb’s “Until we all belong” is another great example — an award-winning campaign delivered in six weeks, written completely with Vue.js.

The post How to Tell If Vue.js Is the Right Framework for Your Next Project appeared first on SitePoint.

Comments

Post a Comment

Popular posts from this blog

Visual Studio Code: A Power User’s Guide

Image
In this guide, you’ll learn how to take advantage of Visual Studio Code to supercharge your development workflow. This article is written for beginners who may be using Visual Studio Code for the first time. VS Code, as it’s commonly known, is considered a "lightweight" code editor. In comparison with full integrated development environment (IDE) editors which occupy gigabytes of disk space, VS Code only uses less than 200MB when installed. Despite the "lightweight" term, VS Code offers a massive number of features which keep increasing and improving with every new update. For this guide, we'll cover the most popularly used features. Every programmer has their own tool set which they keep updating whenever new workflows are discovered. If you want to learn every tool and feature VS Code has to offer, check out their official documentation . In addition, you may want to keep track of updates for new and improved features. Prerequisites In order to follow alo
Read more

6+ Best Websites for Free Fonts in 2020

Image
I firmly believe that, in order to strike the optimal balance between minimalism and visual appeal, a user interface should display no more than what’s absolutely necessary while making those necessary elements look visually appealing. Keep it simple, but make the simple look amazing. But, what does simple look like exactly? Well, strip away all of the over-the-top marketing gimmicks, redundant features, and cluttering visuals, and most of what’s left is the UI copy and text content. As boring as this sounds, let’s be honest: this is the most important aspect of any app or website. Information and the ability to navigate it is the entire reason users are using our app or website. So with the right typeface coupled with the right font styles (see “ Font vs typeface: the ultimate guide ”), we can create designs that are quite simple and yet visually appealing at the same time. This emphasizes the most important aspects of the design while usin
Read more

How to Contribute to Open Source TypeScript Projects

Image
If you think of the ideas of open source applied to information in an encyclopedia, you get to Wikipedia – lots and lots of small contributions that bubble up to something that’s meaningful. – Matt Mullenweg One of my favorite aspects of open source is the fact that anyone can contribute! It’s like “productive volunteering” (if you’ll humor me). It’s a fantastic way to build something bigger than you, give back to the community, and level up your skills. In this article, we’re going to talk about practical ways for you to get involved in open source TypeScript projects. We’ll first cover assessing your level then jump into how you can find opportunities. Assessing Your Level Before you get started contributing to open source, you want to find your comfort level. Where are you at skill-wise? What level of complexity are you wanting to solve? How much time do you want to spend? These are important questions to consider before diving in. This
Read more