Code Ninja Tech: Vue.js

In this feature, we will get to know about one of the frameworks used in Code Ninja.

Switching between languages takes a lot of time. Having different languages for the front-end and back-end make both behave in different ways, making it difficult to debug and investigate errors. Aesthetically, the code will not look the same because of different language conventions; thus, making programming a lot trickier and uncomfortable for some. The main issue that can be found here is maintainability.

With that, some developers now prefer having the same language for the front-end and back-end, specially with JavaScript. With the improved development of libraries and packages nowadays, it is now easier to incorporate them both in the server and client side.

Ever since the popularity of JavaScript began, lots of frameworks have been developed that would enhance and improve our experience with web development. Some of the popular frameworks used in the previous years are Angular, React, Meteor, and Vue, with the latter being used in Code Ninja.

What is Vue.js?

Vue.js, in their own words, “is an approachable, versatile, and performant front-end framework which aims to have a maintainable and testable code base”. It is a product of the good and bad things done in other frameworks specifically Angular.

Here are some of the factors that made Vue one of the popular and fastest growing frameworks used at the present time:

Size and Speed

When comparing JavaScript frameworks, size is most definitely one of the aspects being compared. Fortunately, Vue does not disappoint with its size of 21.3 kB (v2.5.13), beating other frameworks such as Angular. In terms of speed, we can say that Vue is exceptionally fast based on its benchmarks which can be viewed here.

Flexibility

Vue does not provide any restriction when it comes to structuring your application. You can even write the template, script, and style all in one file. This means that developers would not have a hard time switching from their previous framework to Vue. Here is an example of a Vue template:

Ease of Use

What made the developers, specially the beginners, fall in love with Vue is its flat learning curve. In able to create simple applications in just a short amount of time, all we need is to have proper background knowledge with HTML (Template), JavaScript (Script), and CSS (Style). If developers would like to create a more complex application, Vue provides core libraries and a large ecosystem to fill in the developers' needs.

Support System

Vue has almost everything you need, from the documentation, community, forums, online chats, and devtools. It even has a repository dedicated to list all libraries, packages, and other things that are related to the framework called Awesome Vue.js. It really is indeed awesome, right?

Code Ninja + Vue

Some of the projects here in Code Ninja have been happily using Vue for almost a year. Mark Paolo Cabrera, Team Leader of SwayChat, shares his experiences with the framework and what he liked most about it.

“Simplicity and flexibility. We were looking for a framework that is easy to understand and is intuitive. At the same time, we were looking for a framework that we can easily use with other frameworks. We were deliberating between ReactJS and VueJS but ultimately decided to go with VueJS because of the above mentioned points.

Looking back, it was definitely a worthy choice and has sped up our development immensely.

The Model-View-ViewModel architecture has greatly simplified our code since changes in the view model is cascaded into the view. Couple this with VueX and VueXFire and you end up with an application that is always synchronised with your data store.”

John Viscel Sangkal, Lead Front-End Developer of ImportGenius, explains why they chose Vue over other frameworks.

“We chose Vue.js as our front end framework because it allows us divide our application into separate components. By doing so, it helped us reuse code easily and separate concerns between components, which can also be achieved by other front end frameworks such as React and Angular.

However, Vue does it in a way that is understandable not only by JavaScript developers but also by designers because of its syntax.

Despite being relatively new compared to other front end frameworks, Vue has rapidly grown since its inception and has received wide support from the open source community. This means that Vue is just as reliable as any other front end framework out there, due to its many users and contributors. Any problems we may come across could have been already encountered and remediated by another team. Vue also has an extensive documentation, which means all the information we need is ubiquitous. Overall, to our team, Vue seemed like the better choice.”

Helpful Resources

Here are some few sites that could help you with using Vue:

View Cheatsheet
View Tutorial
View Tips
View Online Course

Once you understand how Vue works, you will be able to make your application's dreams into reality in no time, just like in Code Ninja.

Want to learn more about Vue.js? Visit their website here.