Vue.js: how we started and what are we using it for

This is our story of how we started using Vue.js, why we still use it and how we improved our front-end development thanks to this amazing framework.

How we discovered Vue.js

Sometime at the beginning of 2017, as a frontend intern I was still trying to find my place in the world of web development. I was trying and experimenting with a lot of different technologies and frameworks to see which ones suit my interests best. Many frontend sub-branches were very interesting to me, such as interactive and creative showcase websites, WebGL… But the most interesting aspect was developing complex applications.

Web applications include business logic, communicating with backend solutions, building complex architectures and structures, developing routing management, storing data, designing UI/UX, improving performance, CSS/JS animations and many more. All those elements incited me to specialize on becoming a Web Application Developer, more than a classic Frontend Developer – I had to think more out of the box and be responsible for much more dependencies than a typical UI developer. It is a perfect merge of creative and logic.

I started experimenting with Angular.js, React.js and Vue.js. I built simple to-do applications with all those frameworks just to get familiar with their environments and the development flow. I won’t talk about what framework is the best one or compare them, because they are all great and have their pros and cons, but Vue.js just intrigued me the most. I had the feeling that Vue contains the best parts from the Angular and the React world, and Vue gave me the biggest satisfaction while developing.

That’s when I decided Vue.js is the framework I want to use and become the best Vue.js developer I could possibly become – and so my Vue journey started.

Our first steps with Vue.js

Excited and enthusiastic about Vue.js, I told the crew at our frontend team that I would love to hold educations about Vue.js, so that we can all learn, discuss and potentially use Vue for some of our next projects. After a couple of education, the team really got into the concept of developing web applications in Vue.js, and so we started implementing it into our projects.

When we started using Vue.js, the main focus was to build the experience and the knowledge in this framework. I started using Vue on simple internal projects like the task manager and the time tracking tool. In the beginning, there was a lot of obstacles and confusion, but that is just an inevitable part of the journey to become a great developer – regardless of the technology.

When we completed a couple of our first projects, we were definitely sure that Vue.js is without a doubt the framework we should use for bigger and more complex projects.

Projects in which we used the Vue.js framework

One of the first projects where we implemented Vue was Vremen.co – our internal time tracking tool. This was more of an upgrade than a new project, because Vremen.co was already developed with PHP, Yii and vanilla JS. But we wanted our frontend to be more interactive, faster and with better UX/UI, and it was a perfect fit to try Vue.js on a project of that scale and to see what Vue is really capable of.

Vremen.co time tracking tool

Another very interesting Vue.js project was Mishkat – an advanced application we developed for a large Saudi Arabian museum. The part that makes this project interesting is that we used a combination of Vue.js, Node.js, Kinect and Electron. And of course, the really amazing design and the overall interactivity of the application.

Mishkat application

We also used the Vue.js framework when we developed Markables – a web application which caters to the needs of valuation professionals from all over the world.

Markables application

And the last Vue.js application on this list is actually the first Vue application I have ever built. It’s called Zadat.co and it our internal task manager tool that uses the Teamwork REST-API.

Zadat.co application

Starting with Vue.js vs. mastering Vue.js

Although Vue has an easier and a faster learning curve than other popular JS frameworks, it is not that easy to step into the product and business logic part of frontend for the first few times. It takes a lot of time, effort, patience, experience, learning and ups-and-downs to be able to create a high-quality mid-scale or bigger web applications.

Let’s compare code quality of our first Vue applications with code from some of the latest ones – we’ll use Vuex store modules for those examples.

With every new application, the level of our code quality gets higher, the syntax gets better, logic gets smarter and the structure better.

Vuex structure in first Vue application

In the image above, we see the Vuex store modules structure. This type of structure is not applicable to mid-scale or larger applications because it just isn’t maintainable. The bigger the application gets, the more complex, tangled and unrelated Vuex store would become. We can see that we have modules like assignTask.js, checkTask.js, deleteTask.js, filterTasks.js, getTasklist.js and userTasks.js.

All those modules should actually be one “task” module that manages all of the logic that’s relevant to tasks.

Vuex structure in first Vue application

On the other hand, in this image we have a very good structure of Vuex modules. Every logic unit (model) has its own store module. Every module is divided into state, getters, mutations and actions – those are Vuex native keynames and methods, and each of them has a unique role in the Vuex environment. We can also notice that the global AjaxService is used in this type of store modularized structure. AjaxService.ts is the central place for all AJAX requests and management, and that is enabling us more control and maintenance of all HTTP communication with backend on the global level.

I hope you have noticed one more major difference between this image and the first one – TypeScript. TypeScript provides much better code and syntax quality, especially in web applications where there is a lot more JavaScript logic than in typical showcase websites. I strongly recommend using it over vanilla JS as it will save you a lot of debugging hours.

To close this section, I just want to say that it’s very important not to stay in your comfort zone once you build your first applications – try new technologies, approaches, libraries… with every new project you start working on. The only way to become a better developer is to try and learn new stuff, because no matter how much you know, there is always room for improvement.

Vue.js – yes or no?

Using Vue.js for the last 2 years was an amazing app development journey. As the world of JavaScript got overcrowded with numerous frameworks and libraries in the last couple of years, choosing Vue.js turned out as an excellent choice for us. We have learned a lot – not only about Vue, but also about JavaScript, TypeScript, programming patterns, Node.js, server-side environments and a lot of other useful skills. All because we started implementing Vue.js into our application.

The knowledge of Vue gave us so many opportunities to expand and keep on upgrading our programming abilities.

If you’re thinking about using Vue.js for your next project, I recommend it without a doubt. It will enable you to create client-side applications in a way that’s much faster, better and more interesting. And you will quickly feel the progress you’re achieving – becoming a better developer with every new project. Just as we did.