Vue.js - The Progressive JavaScript Framework

・5 min read
Vue.js - The Progressive JavaScript Framework

In case some of you are wondering, my name is Jan, and I come from a pretty crazy, mixed yet creative background spanning web design, music, filmmaking and project management. I’ve picked up coding again 2 years ago, leaving a corporate job to jump into the unknown.

JavaScript seemed like the obvious choice based on my previous knowledge of HTML, CSS and jQuery. Then came React, introducing another abstraction and giving me a hard time to grasp its concept. I never really got a chance to code a real life application in React. Luckily enough, a first proper programming job I landed required an alternative library.

Enter Vue.js - the progressive JavaScript Library

The reason the team picked up Vue instead of React is in its motto. As advertised, Vue scales up as well as React but scales down as well as jQuery.

It’s that easy to implement Vue in legacy systems based on MVC frameworks that cannot be rewritten from the ground up due to SEO issues.

Directives

Vue declarative rendering engine is based on directives similar to the ones you may already know having an experience with Angular.

Vue directives start with v- and support common operations as data binding...

...conditional rendering…

… or iterative rendering:

And perhaps most welcomed by React users, the two-way data binding!

Vue vs Angular

You might say it’s pretty damn similar to Angular, and you wouldn’t be far from the truth. In fact, Evan You, the creator of Vue.js is an ex Google employee. In his own words, his initial concept behind the new library was to take what he really liked about Angular and make it lightweight.

What if I could just extract the part that I really liked about Angular and build something really lightweight. Evan You - creator of Vue.js

Vue vs React

And it’s not far from React either, based on the same principles. They both:

  • utilize a virtual DOM, although Vue seems to outperform React in this field
  • provide reactive and composable components, it’s just that Vue’s approach might be a little more humane.
  • maintain focus in the core library, sitting somewhere between a library and a fully-fledged framework, but Vue core team takes care of its sibling libraries

So, why bother?

At this point, you might ask 'why bother?'. You know React, you use it on a daily basis, you like it...

But do you really like it?

When I asked around, our very own developers pointed out few React issues that drive them nuts. Things like:

  • Mixing logic with HTML
  • Mixing CSS with JavaScript
  • Lack of imposed component structure
  • Bloated ecosystem

Some point out the lack of imposed component and project structure, others rant React's bloated, gargantuan Ecosystem.

So the React experience is far from perfect, things could be improved.

Single File Components

And Vue.js might be an answer to at least some of these issues. A concept of Single File Component is a fresh approach to separation of concerns. .vue files support HTML syntax, CSS preprocessors of choice and even allows you to encapsulate styles to a scope of a component.

Class Binding

HTML class binding allows you to pass an object to v-bind:class to dynamically toggle classes. It can coexist with regular class attribute and after evaluation both values will be merged together. And the bound object doesn't have to be inline!

Style Binding

And the same thing goes for inline style binding. It's almost like writing pure CSS, and you can use both pascal and kebab case.

Core team supported libraries

Although Vue's ecosystem is by no means as vast as React's, the key libraries are maintained by Vue core-team members and get updates along with parent library.

These include router, state-management, CLI and developer tools.

Unimpressed?

If you are still not impressed that's perfectly fine.

My goal is not to convince you to drop React or Angular, but to show you there is a third way that might be a good fit for you.

Reasons to jump in

And if you would like to give it a try, now is a great time to do so. Being the third most popular JavaScript library Vue is gaining momentum, having surpassed React in GitHub stars count. It is the second most loved and wanted library in the last year's Stack Overflow Developer Survey. And I've been told it pops up now and then in client inquiries in our company.

So if you are eager to learn something new that's easy, fun and rewarding, give Vue a try. You won't be disappointed.

Needing help with your front-end development? Check out our core team!

You can also watch the presentation here:

Related articles