How is Vue.js making the Javascript world a better place
It was around early 2016 when I encountered Vue.js for the first time. A friend sent me a link from the documentation, not even version…
How is Vue.js making the Javascript world a better place
It was around early 2016 when I encountered Vue.js for the first time. A friend sent me a link from the documentation, not even version 1.0 back then, mentioning that it looked promising. At that time I had just finished migrating an Angular v1 Ionic application to Angular v2 and was learning React for the next project that I was about to build. I was also working on two side projects one with Aurelia 🙄 and one with Meteor (which I was actually pretty happy with). So my initial reaction was:
Seriously another Javascript framework?
You need to calm down people!
I was extremely skeptic at first and didn’t even give the framework a chance back then. Probably that was your first reaction as well or maybe you still feel the same since the front end ecosystem feels saturated. But three years later I am loving every moment working with it and I would like to share with you what makes Vue so special that made me change my mind.
Gentle learning curve
The first thing that you will notice is how easy it is to get started. Everything just makes sense. It took me less than a week to get comfortable with Vue & Vuex. After going over the materials included in the official guide, you can go ahead and start making your first Vue app — no prior knowledge of ES2015, TypeScript, JSX, or build systems required. All you really need to get going is a basic understanding of JavaScript, HTML, and CSS.
This is extremely important for new teams or when prototyping new ideas. You don’t have to spend a lot of time familiarizing yourself with additional syntax extensions or figuring out how a framework works instead of actually prototyping.
Have a look at the end of this article for resources on how to get started.
Other Frameworks
I worked with Angular a lot before and it never felt anything like as natural or enjoyable as Vue. Having to learn the angular way, working with dependency injection, services, data streams(Rxjs) and learning typescript (which I eventually loved) was certainly not easy and I’m not entirely sure if it paid off. React.js also has a pretty steep learning curve. It introduces JSX, a syntax which mixes HTML and JavaScript. It might make sense once you get used to it but up to that point, it can be very confusing. Additionally, “everything is JavaScript” JSX might look like HTML but it still is JavaScript. This means that the way you manipulate your “HTML” code can be hard to understand at the beginning. State management is another topic which can become problematic. Whilst that’s also partially true for Angular, unlike Angular, React.js doesn’t have any solution baked into it (Angular has services).
Well-defined ecosystem
Batteries might not be included but there is no need to resort to unofficial packages for the critical parts of your application. There are two great libraries that are custom-designed for Vue to solve Routing and State management. Let’s have a look at them next.
Routing
One of the trickiest part when building an SPA is the routing. Of course, navigating between two pages is easily done in all frameworks but in my experience, most of the application’s “dirty” code has to do with how do you handle common routing problems like:
- Nested route view mapping
- Modular, component-based router configuration
- Route params, query, wildcards
- View transition effects
- Links with automatic active CSS classes
- HTML5 history mode or hash mode
- Custom Scroll Behavior
Vue Router which is the official router for Vue is highly inspired by Angular router. Routes are configured as part of the initialization of the app; it happens before any of the components are rendered. Routing code lives to the router module and the routes don’t intermingle with that of components. You can still use one of the component navigation guards if you want something special to happen when navigating the app. To display the active view it uses a placeholder directive (router-view). You can also have nested routes and named views.
Some code maybe?
Here is a simple application using Vue Router:
State Management
Another big pain point when dealing with a large scale application is how you deal with the application state especially when two or more components need to have access and manipulate some data. Vue uses a library called Vuex which is inspired by Flux, Redux, and The Elm Architecture. It is an implementation tailored specifically to take advantage of its granular reactivity system for efficient updates. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue’s official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export/import.
Here is a great 5-minute explanation of how Vuex works from Adam Jahr.
Progressive
One of the core ideas since the early development days was that the framework should progressively grow as the complexity of your application increases. You should be able to create a simple app but the framework should be able to adapt when needed.
Architecture
Vue supports the component-based approach to building web apps — it includes single-file components that are independent and loosely-coupled to enable better code reuse and quicker development.
Single File Components
One special feature of Vue is the ability to encapsulate all of the component code in a single file. That includes all the component logic written in Javascript, the HTML template and the CSS styling in a file with the extension .vue that looks like this
Vue Single File Component
Of course, you can use preprocessors such as Pug, Babel (with ES2015 modules), and SCSS for cleaner and more feature-rich components.
Satisfaction Rating
Reading last year’s state of js about Vue the metric that caught everyone’s eye was the satisfaction rating that was the highest among all other frameworks. 91.2% that used Vue would like to use it again in the future.
Simple, lightweight & Performant
One of the things that is lately taken for granted, but was a big issue back in the Angularjs days is performance. Vue uses Virtual DOM in order to be able to quickly and efficiently update the DOM but this is not the only thing that makes it so fast. A lot of optimizations are done under the hood on compilation time. In addition, some features like computed variables — which only check for updates if one of their dependencies is updated — and module lazy loading adhere to the framework overall excellent performance.
In addition, the size of the production-ready gzipped but not treeshaked is only ~20kb which is extremely small but spoiler alert Vue 3 will cut that size down in half!
Testing
Unit Testing
Vue has built-in support for unit testing with Jest or [Mocha](https://mochajs.org/) that works out of the box. You don’t have to do anything special in your components to make them testable. Let’s revisit the hello world example we saw before and notice that we export the raw options:
We can then import the component along with Vue, and we can make many common assertions (here we are using Jasmine/Jest style expect assertions just as an example):
Testing a Vue component using Jest
It also has the official Vue Test Utils which provides more detailed guidance for custom setups.
End to end Testing
The two most popular e2e frameworks Cypress and Nightwatch are both supported out of the box. Cypress is currently the recommended but only works on Chrome browsers. This is a great article about using Cypress and Vue together to get you started.
What’s next? Vue 3
With Vue 3 just around the corner, many exciting things will happen. The framework aims to be:
- Faster
- Smaller
- Have more maintainable source code
- More native-friendly
- Easier to use
Here is a recent talk from Evan You about the upcoming changes.
Conclusion
Vue managed to combine all good ideas from other frameworks, along with great documentation and ease of use. I think the best part about Vue is that everything makes sense and just works. That’s why lately the adoption has been growing nonstop and I doubt this trend is going to stop anytime soon. If you are new to web development or just starting out a new project, you have to consider Vue as an option. It will certainly be the next big thing.
Additional Resources
