Jon Creasman
Achievement Unlocked: Building an App with Vue.js
Jon Creasman
December 4, 2017

Achievement Unlocked: Building an App with Vue.js

Earlier this year, I was approached with an offer to be a guinea pig in a little PointSource experiment: Build an in-house app using Vue.js. As a new developer with little in the way of established technology bias/preferences, I was billed as the perfect “blank slate” to evaluate this framework. How easy is it to pick up and go? What are the advantages and disadvantages of choosing it over something like Angular?

These were just some of the questions I was tasked to find out while building the app and now that it’s completed these are some of the questions I hope to answer here. The application I worked on was a survey app that would be taken to IBM InterConnect and used to assess the state digital transformation of the organizations represented by conference attendees.

For anyone familiar with Angular 2, Vue.js isn’t too much of a departure. One of the big advantages and something I liked most about it was how easy the learning curve is. It doesn’t take long to pick it up and get the ball rolling. I was impressed with how little I needed to know upfront and how much I could already code while I learned the rest, without the fear of massive rewrites later.

Below, are explanations of the basic concepts using code snippets from the documentation and the app itself. Keep in mind that these are just some of the feature highlights and not an exhaustive run through of Vue. For that, check out the official documentation.

Building an App with Vue.js - 1

As might be expected, the main entry points are the main.js and App.vue files. The main.js file is where you import Vue itself and any additional features like VueRouter and other Vue Components in the app. Most importantly, this is where you establish your root Vue instance where you pass in an options object to define the root Vue component which, in our case, is the App.vue file. Inside App.vue is a <router-view> tag that displays components as directed by the Vue Router.

Vue components are where things start to get interesting and slightly polarizing, depending on who you talk to. Vue encourages using single file components meaning that all the necessary HTML, JavaScript and CSS is in the same file. When well organized I personally prefer working this way as opposed to switching between separate files but for devs use to a more conventional approach, it can feel odd at first. For an in-depth look at the reasoning behind this, check out the documentation. So, the typical Vue files will look something like this:

Building an App with Vue.js - 2

It’s inside the script tag where the, “Vueness,” is most apparent, so I’ll point out some of the major elements based on my experience with Vue using code from my Survey.vue file. The major properties I consistently used were; name, mounted, methods, computed and data.

Name

Name is pretty straightforward. You’ll need it to call your component such as when you import it into another file.

Building an App with Vue.js - 3

Mounted

The mounted method is part of the instance lifecycle that Vue allows you to hook. I found this useful because it offered specific points in the lifecycle that I could target. While there are many hooks throughout the lifecycle I found myself mainly using mounted for this project and that will probably be the case for you too. It’s called after the instance has just been mounted (i.e. immediately after the initial render of the DOM), so all of the javascript inside it will run then; basically meaning when the page loads. But, it’s good to know about the other ones too, in case the situation calls for it. In this example, the survey is loaded from DatabaseService.

Building an App with Vue.js - 4

Methods

Methods are simply where you write any functions that you’ll be calling in your component. This will most likely be where the majority of your logic resides, so I’ve only included a couple of mine in the below example. I personally found it helpful to keep this section organized based on the order in which the logic would be called. That made it easier to work with when it needed edits or when new logic needed to be added in.

Building an App with Vue.js - 5

Computed

Up next is the computed property which is very useful when you want a function to re-evaluate only when its dependencies have changed. It’s cached-based too, meaning that as long as its dependencies haven’t changed, multiple access to the computed property will immediately return the previously computed result without having to run the function again. A simple example I used it in was to verify validation as the user enters their email.

Building an App with Vue.js - 6

Data

Finally, you have the data property, which is a function that returns all the data objects you’re using in your component. These can vary greatly as you’ll see in the example. This was an area of Vue that I really appreciated as it made organization and readability easier.

Building an App with Vue.js - 7

Every app will, of course, be different in the types of properties it relies on and for the most part, the order doesn’t matter. For myself though, I found it easiest to order them in the way the component logically flowed, from its creation to its transition, into the next component. Once you get the hang of it, Vue files can be a very efficient way to organize and build out your code.

Like Angular 2, Vue.js has its own directives to manipulate the DOM and many are nearly identical; v-for/*ngFor and v-if/*ngIf as some examples. However, this was one area where I prefer Angular 2 as I feel like they have a wider selection of directives that target specific issues. It wasn’t that there were things I couldn’t do with Vue, it just forced me to think outside the box more as the solutions were not readily apparent.

By the end of the project, I found my experience with Vue.js to be a very positive one. The low barrier to entry allowed me to dive in and get to the fun stuff faster while the excellent documentation and other online resources helped with any hiccups I encountered. Because of the gentle learning curve, I would definitely recommend it as the framework of choice for devs who are just getting into front-end development. Seasoned devs will also benefit from its unique approach to component-based development that encourages new ways of thinking. And most importantly, both will quickly feel productive from its, “learn as you code,” mentality. In short, Vue.js offers something beneficial to everyone.

Tags

Filed under:

If you like this, you'll like these:

More Blog Posts