Vue.js: Embracing Reactive JavaScript Without Losing Your Mind


reactive javascript

Andrew Bogdanov, Accusoft Software Engineer

Einstein once said: "Make things as simple as possible, but not simpler." What sometimes disappoints me in today’s world of front-end development is that with all of the complexity that is rising day-by-day, we are getting further and further from that concept.

Do you remember the good old days when everything you needed to build a simple front-end project would require you to hook up a link to jQuery CDN and you were well on your way? Development was quite straightforward. Today’s workflows are drastically different. It seems that it's practically impossible to start a project without choosing a framework first. With lots of new tools on the market, the front-end landscape is getting more and more crowded.

Analyzing this landscape from a bird’s eye view, I will distinguish between two key players that got a lot of momentum in the past couple of years: React and Angular. They already have tons of followers around the world despite a steep learning curve that those frameworks introduce for you as a developer. I've used both of these frameworks for quite a while and, returning to Einstein's quote, they are getting quite far from the idea of simplicity.

Let's face it, if you are just getting inside front-end development those tools could blow your mind with all of the abstract concepts and stuff you need to know in order to start using them. There a simpler, more succinct alternative that would allow you to do similar things without the hassle.

The name of the framework I would like to present today is called Vue, pronounced as [vjuː]. Give me a couple of minutes of your time and I'll prove to you that reactive JavaScript development can be easy and straightforward, using the minimum amount of skills you probably already have.

Vue won't require you to set up any fancy environments with some compilers/transpilers, ES6, TypeScript or JSX in order to start using it (although that doesn't mean you can't do that if you really want to). All you need to know is basic knowledge of plain ES5 and a minimum understanding of HTML. Let's start!

Step 1. Creating an Index File

Like almost any web-based project, we need an entry point that the browser will render. As you've already guessed, it will be called index.html. That's right, no special templates that should be precompiled, just a simple regular HTML file.

Step 2. Adding Vue.js to the Page

It's time to add Vue to the page. Remember when I was jawing about the old days of jQuery? Guess what? Vue can be used in a similar way and it will require no more than one CDN link to add to your HTML document. In fact, that file is even smaller than the jQuery package. It will get even more impressive when you compare it to Angular 2 basic package that is almost 10 times bigger in size.

The link to latest Vue.js package looks like this:

This link will redirect us to the latest version of Vue, which is 2.2.0 at the moment. If you don't want your lib version to change when the new version comes out, you can specify the exact version on the url, like so:

Let's reference this link inside our body element:

Step 3. Connecting It All Together

Now it's time to bring it all together and really see our Vue app in action. For this we will need to create a Vue instance with some settings inside of it. Let's add a new script tag after the reference to Vue.js and paste this code inside:

As you can see, I'm not even assigning that instance to any specific variable. That means that Vue won't pollute global scope with any additional data. Say goodbye to confusing ES5 closures, Vue will handle it all for us.

Let's look a bit closer at the object we just passed to the new Vue instance. Vue will look into that object searching for specific properties that will help it initialize properly. The first property we will be looking at inside that object is el. That property will define which DOM element will contain our Vue.js application. The value for that property can be a string with any CSS style selector. The only thing to keep in mind here is to not associate your app with the body or HTML element. For now, I just specified that our application should reside inside an element with id="app". But we don't have one yet. Let's add it:

And believe it or not, we have created our first Vue.js application! Of course it's not that exciting yet because we haven't created anything that can be shown to the screen inside our app, so let's do that next.

Providing the Data

In order to tell Vue that we want to display some data inside the application, we will need to specify one additional property in that object we created earlier. This property is called data. It should be equal to an object that will hold any global variable you would like to use inside your app. Let's add a message variable inside data object:

Now we can use it inside of our app. There are lots of ways to do that, but for now we will just assume that we want to show some text on the screen based on that data. Let's create a heading and reference our data inside of it:

As you can see, Vue is using mustache type syntax for specifying variables inside HTML. Another nice touch? We had to specify only a variable name, no special referencing of data or Vue instance; it's simple and clean.

Let's refresh the page to see the effect. If you do everything right, you should see a big shiny heading saying Hello Vue!

Displaying data is great but what about performing some actions. Let's see how Vue enables us to write methods that we can execute on the page.

Creating Methods

In order to execute a method inside the Vue app, we need to pass a method property to the Vue instance. Let's add a method called sayHi.

We will add a simple timeout that will change a message property to a new value. As you can see, we don't access any specific DOM element, like we could do if we were using jQuery. Vue is a reactive framework so the only thing we need to do is to update our data and Vue will handle the rest automatically.

Another thing I would like to point out is that we can reference properties of our data object inside functions by using this keyword that will point to our Vue instance. However, be aware of JS pitfalls with this mutation inside anonymous functions. Before referencing this inside our timeout callback function, we will need to first assign our this object to some new variable. You can use any name you want, that or vmv name to remember that it's actually a Vue instance. You can also use bind in case you think that variable is excessive.

Attaching Methods to the DOM

There are lot's of ways to use methods inside our DOM; here we will only look at the most basic scenario. So to execute a method inside our app we will need to write its name with braces as if you were executing it inside regular JavaScript. Let's change our heading by executing the sayHi function inside our app div element:

So now when we refresh the page, we should see a heading change to a new text in 3 seconds.

Using Computed Properties

Sometimes there can be a need to perform a more complex logic before showing a value to the screen. We need a function for that, but it's still a property, so from a logical perspective executing a function every time we want to show a property is not that elegant. In the classic OOP languages a concept of getter function was invented to address this problem. Vue has a similar concept and it's called Computed Properties.

This type of property lies somewhere in between regular stuff we specify inside the data object and functions that we attach to the methods object. Computed Property is basically a function that should always return some value. Inside the DOM, you can specify it as any other property from the data object. Let's add one computed property into our Vue options object. Our new property will show additional heading if the value of message is "Hi Vue!". We will keep it very simple for now:

There are so many interesting things inside Vue that we will definitely look into in the next blog post, but with this small introduction I think we have enough to digest. As you can see, it is quite easy to begin writing reactive JavaScript especially when you have Vue.js under your belt. In my next blog post, we will discuss directives and how they enable us to interact with the DOM in lots of different ways including execution of our functions based on some browser events.

Thanks for reading. Stay tuned for the next article.

Andrew Bogdanov is a Software Engineer and Scrum Master at Accusoft. He is passionate about the web and loves to code useful and intuitive applications. He holds a Bachelor in Computer Science from Kyiv Slavonic University. In his free time, Andrew enjoys performing fingerstyle guitar arrangements for friends and family.

Join the discussion.