I love JavaScript. I love how it is constantly evolving. The buzz around Vue and how it is similar to Angular has intrigued me, so recently I explored Vue. I wanted to get a sense of how it compared, how it works, and how it feels to develop an app with it. I spent a few days on and off learning parts of Vue to write a small app.

tldr; ... I enjoyed my first experience with Vue. I enjoy Angular. Seeing multiple ways to tackle apps is a good experience.

Other posts will follow on the learning materials, things I stumbled on, things I learned that may help others, things I learned that I'll now use.

You can find the source code for these apps here:

Along the way, I took notes so I could share my experience. A few things to keep in mind as I share these thoughts over a few posts:

  1. I'm not leaving Angular. I love JavaScript, and I find it rewarding and valuable to understand the landscape.

  2. I am not a Vue expert, nor do I play one on TV. I used the Vue docs and a little googling when I got stuck. I asked Sarah Drasner to help me with a few specific parts of my code that worked but I was unhappy with. I will explain where she really helped clarify and improve the app for me. Everyone say "Thank you, Sarah!"

  3. Most importantly ... My intention is to show a simple comparison and share my first experience with Vue. This is not a complete comparison. No conclusions about who wins or loses should be made. The right question is how we can all learn from each other and the tools at our fingertips.

There are a lot of similarities between Vue and Angular that really helped me pick up Vue. In fact, if you look closely you can feel some influence from AngularJS (v1.x) and React, as well. This is a good thing ... the Web is learning from its landscape. We all benefit from this.

Vue app

App Baseline

I intentionally designed the apps to follow a similar pattern. The app should show a list of heroes. The list should be retrieved over HTTP. The app must allow retrieving, adding, deleting, and updating of the heroes. The app must also allow some basic styling, a selection from the list of heroes, and save/cancel on the saving of changes. This is a pretty standard formula for most apps.

I used VS Code for building both apps, because ... well .. it's freaking awesome! For best results, grab the Angular Essentials extension and the Vue Snippets extension. They both make VS Code light up even more with Angular and Vue.

Each app has:

  1. a component to contain the app
  2. a component for the hero list
  3. a component for editing heroes
  4. a service to handle the HTTP calls

Both the Angular and Vue apps also contain files for the index.html and a main.js. Both of these files help kick off their respective apps.

Angular app

Both apps also have build systems, were generated using their respective CLI tools, and use the same node.js server with a Cosmos DB database (using a MongoDB model). I also configured both to work with docker.

File Differences

There are some differences in the files in the apps.

  1. The Angular app is written with TypeScript and the Vue app in Babel. I chose to use the default and predominant languages for each.

  2. The Angular app has a hero.ts file, which contains a Hero model. It wasn't necessary, but it very common since we can take advantage of types in TypeScript.

  3. Both apps use SASS. The Vue app's SASS is inline inside the *.vue files. The Angular app's SASS is in separate files. The Angular CLI supports inline styles with CSS, but it won't compile SCSS natively inline.

  4. The Angular app contains an extra file for the NgModule. This is the app.module.ts. It serves as a manifest for the main features of the Angular app.

  5. Naming conventions are slightly different.

Both allow for inline styles or separate files. Both allow for inline templates or separate files. Both allow for scoped styles. I tried to keep the apps relatively similar for this comparison, but obviously, you could deviate from this if you prefer.

What Does it Mean?

Not much. And that's a good thing. They are quite similar in file structure and naming.

The number of files and the file names for these apps are not that important in the grand scheme. They are quite close and relatively easy to map from Angular to Vue to Angular. The takeaway here is that conventions are a good thing, and Vue and Angular both follow some.

Hey - if you know me, you know I like to follow conventions in style guides :)