As a software engineer, it’s very important to get out of your comfort zone from time to time and get a broader picture of the different technologies out there.

Either to grow your skill set or just to be able to hold a conversation with someone from a different background, you will do better in your career if you are not tied to one particular platform/technology.

Almost 10 Years Ago

Last time I played with JavaScript to do some front-end development, back around 2008, things were really different. In a way, they were definitely not as exciting as they are now — I am glad to see that things massively changed.

From what I remember, there were no frameworks whatsoever, and the notion of MVVM wasn’t even a thing back then.

Additionally, dealing with XMLHttpRequest and the DOM elements manually was a daily routine, and retrospectively a pain in the neck.

I remember pretty clearly my transition to the Java world and then to mobile development — the entire front-end solution of my first professional project was based on a heavy black box called GWT. Google Web Toolkit is a very powerful framework created by Google. As the main principle of this framework is to generate JavaScript from Java code, I started to write Java for about 100% of my time, doing less and less JavaScript.

This, the emergence of the Android operating system and the rise of something horrible called jQuery made me move completely to mobile development early on.

Today

After more or less 8 years focusing almost completely on Android development as well as the Google ecosystem, I decided to take a break for few weeks, dive into a new world and ship something using the knowledge that I gathered on the way. Not just reading the doc.

Firebucket

I recently wrote an open-source Android application using different Firebase components. Firebucket is an elementary task manager app based on a clean architecture, dependency injection and a bit of reactive programming.

Feel free to read an overview on it on this Medium post.

My idea was simple — create the web version of this project while using an interesting set of tools that I can learn from.

Language & Framework

To be honest, the choice of the language was a bit arbitrary. I already played with Ruby (RoR) a few years ago and I code in Python from time to time for everything related to machine learning. With these two out, there aren’t many languages left for front-end development. I did some research, asked a few colleagues here at Travelex and a ninja called James (with whom I used to work) what exciting stuff relied on JavaScript nowadays.

According to these different sources, Angular seemed to rely too much on black magic, and was too strict and inflexible if you wanted to make something your way.

While React.js seems to get a lot of attention and would probably be the “safe” choice to kick-off a project today, it wasn’t what I was looking for — I wanted to struggle and get my hands dirty with something new.

I like to only write about what I know, so I won’t get into a debate on what’s better between Angular 2, React or Vue. I just picked the one I was more excited about and what seemed the most promising.

Vue.js In A Nutshell

People I have been asking for advice seemed to agree on one thing – if I wanted to push it to the next level and experience the nitty gritty of something a bit less “mainstream” than the aforementioned frameworks, I should consider Vue.js. After researching the reactive concept and reading the documentation, my choice was made.

Vue.js is a minimal, fast and view only JavaScript framework offering a lot of benefits compared to its competitors. If I had to describe it in brief, I would mention three major points:

Components

The notion of components might well be the most important characteristic of the framework. Components are meant to encapsulate code in order to be reusable. They can communicate and share data between each other as well as inherit from each other.

The interesting part is that there are two different but non-exclusive ways to use components — you can either picture them as pages (e.g. LoginComponent, RegistrationComponent, …) or as widgets (e.g. custom date picker, custom toolbar, …). Of course, you can use both ways, it’s completely up to you.

I could even go as far as comparing components to Activities/Fragments in Android development. Their role is to display something on the screen. They contain data and are subject to lifecycle changes (more on that below).

Reactivity

Now that you know about the components, it’s the right time to explain the essence of Vue.js — Reactivity.

A component always comes with a Watcher. To summarise, its role is to observe the data contained in the component and trigger a re-rendering of the component if data has been updated (e.g. user input, server update).

Declarative Rendering

Additionally, the declarative way of rendering your data in the DOM helps make things clear and structured:

<div id="component1">

{{ message }}

</div> var app = new Vue({

el: '#component1',

data: {

message: 'Hello Vue!'

}

})

The snippet above is the simplest one from the official documentation, the framework obviously allows you to do more than this. Here’s an extensive list.

Firebase

Picking the framework is a good first step, but that project involves dependencies such as Firebase. Therefore, I needed to make sure that these dependencies could be used with Vue.js.

I then discovered the vast library of npm, including the modules called firebase and vue-fire.

Amazing — install the modules, write 3 lines of code and you can interact with your database. Retrospectively, dealing with Firebase was the part where I expected most of the work. It wasn’t.

In a more complex project, I would probably have used a server-side environment (like Node.js) and would bind it with Vue.js using something like axios. With Firebucket being built around a Firebase database, there is no need for it.

Design

For the android application, I mostly followed the Google Material Design guidelines. Needless to say that for the sake of consistency, the best was to apply the same principles to the web version.

That’s when vue-material comes in. Easy-to-use framework (of course, available on npm) providing ready to use components already styled with Material Design in mind.

Install the module and pick the components that you need from their website. That’s it. Pretty cool.

Hosting

As there is no server-side, the hosting part was a breeze, and Firebase hosting was the go-to solution. Firstly, the project is based on the Firebase database. Secondly, they offer a free quota. Last but not least, you can easily deploy from CLI. For the sake of simplicity, I picked Firebase but I also could have used GitHub pages.

Things I Love

Besides being extremely fun to use, the framework can be really easy to use for the basic stuff, but ends up being extremely tweakable if you want to push it to the next level. Below are few points that I really appreciated during the development of this project.

Lifecycle

If you are an Android developer you’ll certainly have experienced the torture of working with lifecycles (who said fragments?). It was such a treat to see how simple the components lifecycle is in comparison. Here are the hooks:

beforeCreate / created

beforeMount / mounted (the DOM gets inserted in the component)

(the DOM gets inserted in the component) beforeUpdate / updated (the component gets re-rendered)

(the component gets re-rendered) beforeDestroy / destroyed (the component gets torn down)

You can find more information about the hooks here. The point is not to do an extensive description of them nor to describe how to use them but to mention that using them has been a breeze compared to what we (Android developers) are used to dealing with.

Modules

Considering the age of Vue.js, the volume of available modules for the framework as well as the top-tier quality of most of them is absolutely remarkable. It worth mentioning the great awesome-vue GitHub repo which aggregates plenty of useful libraries.

Chrome Plugin

Another great discovery was how powerful the Chrome development plugin is. In addition to giving you a detailed snapshot of your components (children, data, computed data, …), you can also see and record the events in real time or inspect the DOM.

The sooner you get comfortable using it, the sooner you will start saving time and effort.