There are quite a few frameworks out there in JavaScript land. JavaScript fatigue notwithstanding, the proliferation of frameworks is meant to solve an issue—that issue being the effective creation of dynamic web applications that are performant, and easy for developers to jump into. For performance considerations and for developer enjoyment, it may be best to work with a framework that is unopinionated and modular.
This is where Vue.js becomes a compelling choice for a framework. Vue starts as a strictly view-layer tool, that, as we will see, is unopinionated and can work with many different tools. This scalability from frontend library to full-featured framework gives a developer a great deal of options for development of a progressive web application.
Our walkthrough is going to be in three parts, so that we can fully digest the options available to us. This is meant to be an introduction, and like the amazing documentation, this walkthrough will be dependent on your intermediate knowledge of HTML, CSS, and JavaScript. In this first part, we are going to look into how Vue got started, the reason why Vue has skyrocketed into the landscape, and a comparison with other frontend frameworks.
It’s important to look at the context of how Vue.js got started. Evan You, Vue’s creator, wanted to create a library that was both enjoyable and approachable. His first commit was on July 27, 2013, and since then, it has experienced accelerated growth to become the second-highest starred repo on GitHub (70,258 to date).
As you can see in the screenshot above, It is also the highest-starred frontend framework this month (yep, more stars than React). This popularity could exist for a multitude of reasons, including the ease of entry into the language (which can be attributed to the goal of Vue and the awesome documentation). There’s also its flexibility (like React, Vue starts as a pluggable view layer that can be supported with additional parts: e.g. Vue-Router, Vuex, Muse_UI, and so on). And perhaps it’s also attributed to the idea that Vue is not backed by a major tech company (like Google backs Angular, or Facebook backs React). This scrappy, well-written, progressive library may be what many developers need to be excited about web development, and break up JavaScript fatigue.
Specifying how Vue lives in a world with React is a deeper matter, especially since React is no longer BSD-licensed (as you may know, with React 16, the license is now MIT). The React community will continue to grow at an accelerated pace. This already vibrant community is supportive, engaging, and has grown, with Vue as a necessary employable skill for a frontend or full-stack JavaScript web developer.
One specific way that Vue differentiates itself from React is in how unopinionated it really is. In Vue, you can use any template engine you like. You can stay with HTML, or use Handlebars, Moustache, or Pug. As you can see below, within the template tag, you can choose the templating you’d like.
Within the script tag, you can assign methods, data handling, and other JavaScript (which we will go into in part 2), that drives your template and tracks properties on expressions. This lives in the same file, and thanks to directives—like Angular, but simpler, essentially a prefixed HTML attribute that affects a DOM element—it will link up a Vue instance (which we will get to in part 2), and the template (the DOM).
Style tags, like template tags, are unopinionated and can take on SASS, LESS, and of course, CSS. Like the script tag, the style tag lives in the same file. This helps with code readability and allows the developer to use whatever they like. React emphasizes JSX, which is not a bad thing at all, but for some end users, it becomes burdensome to learn a new way to combine templating and JavaScript together to render data to the DOM. This is a part of the learning process for React. Vue doesn’t ask you to do this. You write the markup you like, with JavaScript and the styles you like.
This, again, could be why Vue has risen so quickly—giving developers the ability to code how they like, while maintaining Reactivity in connecting data to the DOM. And with access to options that will scale their apps, Vue has become a viable option for start-ups (and some larger companies) for frontend development.
