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.
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.
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
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:
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.