A Look at Angular Alongside Vue - Learning Materials

I spent a few days on and off learning parts of Vue to write a small app. I wrote the same app with Angular. I'm sharing my experience of working through Vue for the first time to help others that may be curious about the JavaScript framework landscape.

This time I want to share where I went for learning materials and how they worked out for me.

Here are the posts in this series, if you want to catch up or jump around:

Learning Materials

OK, I admit ... at first, I didn't use any learning materials. I googled Vue CLI, found the official Vue CLI, installed it, and ran it.

Vue CLI

This has to do with how I learn. I like to explore first. This helps me figure out what types of things makes sense instantly. It also helps me start formulating questions. So the first place I learned is the Vue CLI's GitHub page.

The README.md said to run vue init <template-name> <project-name>, so I did. After all, who am I to argue? I think it's cool that there are different templates we can use to generate a Vue app. Although this was my first source of confusion ... I had to choose which template to start with. This meant I had to have some idea of what each template does and what that means for a Vue project. Fortunately, this wasn't difficult.

There is this link in the README.md that explains the recommended templates. I started with the simple template. This seemed a good place to start so I could get a sense of how a Vue app works without any additional ceremony. So I tried it.

The Simple Template

I ran vue init simple vuesimple and I got exactly 1 file. That's right, ONE FILE. Take a look for yourself:

The index.html points to Vue in a CDN. The code was quite simple too ... check out the Vue code in the <script> tags:

This is our first look at Vue code! OK, let's see what we got here. There is a Vue object instance and it seems to references an HTML element by the id #app. Alright. Then it declares some data properties. These appear to be a model that I can bind to the Vue view (Don't sigh, you knew I was going there). Then it declares a method which formats a URL. The code for this component (I'm assuming component is the right word at this point) seems pretty simple.

Next, I looked in the HTML template to see how those data properties (my model) is bound to the app. This is pretty familiar to me as there are squiggly braces all over the place. They help bind the model properties to the template. For example, we see {{ greeting }} which renders the "Welcome to your Vue.js app!" to the template. It also binds the method in the template with the squigglies. We call this interpolation, or handlebars, or mustaches ... or I call them lovingly "squigglies" :)

Looking further, I also see some :href references in the template. This appears to be binding the href property of the <a> element to the value. For example, <a :href="docsURL" target="_blank"> binds the docsURL model value to the anchor tag's href. Again, quite simple.

And of course, running the app is simple as launching the index.html in the browser. So far so good! But I'm pretty sure I don't know a lot at this point.

WebPack Simple

Next, I generated a simple webpack project for Vue with vue init webpack-simple vuewebpacksimple. I went from one file in the simple template to about 10 files in the webpack-simple template. Still, not bad. Just a few more things to look through. And I knew webpack and a build process was coming ... a build process is just par for the course in modern JavaScript.

The main.js file caught my eye. This kicks off the app creating the Vue object instance and referencing the HTML element.

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

This moves the bootstrapping code to its own file, which is a good thing in my opinion. At least it was comfortable for me. I then opened the App.vue file, which is where most of the interesting work is being done.

The template contains a single binding for the msg and a lot of HTML. The msg is a model in the same file. This is just a trimmed down model, similar to what we had in the previous example. This time we just have a single model property and no methods. Of course, we can add whatever we like.

It get's interesting here as the next thing we see is styles for the component. The App.vue file may contain its own styles (or SASS if you prefer). I later learned that these can be scoped or we can allow them to cascade to other components. Again, a pretty familiar concept on the Web these days.

VS Code and File Names

I noticed that the files are not .js nor are they .ts files. Instead, we have a framework specific file extension of .vue. No big deal, except that to get my VS Code editor to recognize Vue. I went searching for Vue extensions and found two that caught my eye. First, I found that Sarah Drasner, who works with me and is a core contributor to Vue, created a Vue snippets extension. I like me some snippets, so I grabbed that up. I also saw the Vetur extension, which was recommended by VS Code. I went to install both ... then realized that Sarah did us a solid by making her extension depend on the Vetur extension. So I got 2 birds with one install.

Once I installed these, my Vue code lit up inside VS Code. OK, well, no lights ... but VS Code recognized Vue and made my life much easier :)

I highly recommend you grab these extensions. Unless you like pain ... and in that case, maybe you should just use notepad. (Yes, I kid)

You can get them both from this one extension.

Running the App

Next, I wanted to run the app. I ran vue from the command line and didn't see anything in the help that said how to run it. There was a build command, but I want to run it and see it. I could have run vue build and then browse to the index.html. My preference is to see if there is a dev server so I can write code, see the app, edit the code, see it in the app. Rinse and repeat ... you know, what devs do all day.

So I opened package.json and saw the script for npm run dev. I ran that and got slammed with an error about missing node modules. Oops! The Vue CLI did not install those for me, so I ran npm install and then re-ran npm run dev.

The Vue app built. The browser was launched. And there was my app! Next, I changed the msg model and the new text appeared in the browser.

What About Learning Materials

OK, so I didn't go read any docs or watch videos. But the few minutes I spent so far were quite productive. I could create an app, a model, a template, and bind some values and run it. Not bad for not reading any docs or watching videos.

Of course, there is a whole lot more to cover. My next move was to figure out how to create multiple components, communicate between them, handle events, call an external client service, and communicate over HTTP. This is when I hit up the official Vue docs and started poking around. They are pretty straight-forward. Give them a look.

But this is a good place to stop. The experience so far was pretty smooth and only took a few minutes. Come back and visit in a few days when I post more about my first journey into Vue.