Vue.js, the real Angular 2.0

I’ve been wanting to learn more about JavaScript MVC frameworks for the last few years. There have been tons of frameworks that have since faded, as well as new ones that have risen to the top. Like many developers, I didn’t want to learn something that would fall out of favor within 6 months, especially with the amount of time it takes to learn JavaScript frameworks.

So, last year I decided to pick one, learn it and hopefully do something with it. I work at an agency that mostly does WordPress and marketing sites, so my main goal was to simply keep up with JavaScript MVC mania. From there, who knows, maybe build an app in my free time.

Angular, I choose you

I naturally reached for Angular, because it was very popular at conferences I attended, it was backed by Google and their ToDo app on TodoMVC was easiest for me to grasp. I converted from Designer to Front-End Developer a few years ago, so I don’t pick up new languages / frameworks as quickly as someone with a Computer Science background. So, seeing that Angular was easy for me to pickup, I was sold.

I ended up making a Todo app, which I think is required by law for anyone using a new language or framework. I took it a step further, and integrated my ToDo app with Firebase. Firebase can power your app’s backend, including data storage, user authentication, static hosting, and more. I managed to create a registration view, login view, dashboard view and settings view. Now, it wasn’t perfect, in-fact, I’m pretty sure the code quality was awful. But that’s not really the point, I was able to put together a (mostly) working app that someone could actually use, it was great.

My WorkPen App

For whatever reason, after I build this app, like most of my side projects, I became bored and it fell by the wayside. Fast forward to a month ago. I started listening to Spec.fm’s lineup of podcasts, and I noticed a recurring theme, the hosts were really hyped on Vue.js.

Vue.js is a more flexible, less opinionated solution ( than Angular ). That allows you to structure your app the way you want it to be, instead of being forced to do everything the Angular way. It’s only an interface layer so you can use it as a light feature in pages instead of a full blown SPA. — Evan You

After a week or two of listening, I decided to check out it out. It reminded me of how easy it was to get Angular setup, but it was even easier. That inspired me to get back into the JavaScript MVC game. So, I decided to check out the current landscape. I explored all the trendy frameworks, React, Meteor and my old friend Angular. I had heard a ton about React, mostly about how everyone was using it, but I never really heard good things about it. To be fair, I didn’t really give Meteor a fare shake after I learned about React and revisited Angular. However, looking at Meteor as I write this article, it does seam easier than Angular or React, but it has more syntax bulk than I would like.

I couldn’t handle the TypeScript

I learned that both Angular and React had created another abstraction from plain JavaScript. Now, if I wanted to learn Angular 2.o or React*, I would have to learn TypeScript. So now I’m learning React and writing in TypeScript, which gets compiled to plain JavaScript, using MVC principles. For me, this is a barrier of entry, its really just too much at once.

*As Maciej stated in the comments, React does not require TypeScript, it does however recommend using JSX.

Angular’s 5 minute quick start

Below is what you have to do in Angular 2.0 to get 1 line of text to show on the page. If you look at the HTML tab, you’ll notice we’re making a number of HTTP requests for JavaScript dependancies. You’ll also notice that this is in plain JavaScript, if it were in TypeScript, there would be even more dependancies on the build step. Angular can be written in TypeScript, JavaScript or Dart; its worth noting that TypeScript is the default recommendation.

We’re writing 16 lines of JavaScript code to get 1 line of text to display.

Vue.js’s 1 minute quick start

This setup requires you to use 1 dependency, vue.js, with no build steps.

Here, we’re using 6 lines of JavaScript, that actually makes sense.

Digging into Vue.js

So, I decided to check out Vue.js again, and vet the viability of learning it, as well as the longevity of the framework. I came away pretty convinced that I wanted to focus on Vue.js, which is exactly what I’ve been doing the past few weeks. For me, it encompasses all of the benefits of Angular 1.0, its easier to grasp, all without having to learn yet another language on top of that ( TypeScript ), I like to think of it as the real Angular 2.0.