Flexibility is all the rage in athletics, and almost every sports team has a dedicated yoga instructor. Technology is no different. When it comes to building user interfaces, Vue.js has been making a name for itself because of how many ways it can be bent and shaped to meet your UI needs. Vue is pure vinyasa, where strength and flexibility merge into one.
But what exactly is Vue.js? And why should you use it?
A Room with A Vue
Vue.js was created by Evan You in 2014, but he came at it from a unique point of view: that of an artist. In college, he didn’t major in computer science, but studied art and pursued an MFA at the Parsons School of Design where he fused his love of design with technology. He taught himself JavaScript and loved making things to send off to the world, and his unique portfolio landed a job at Google Creative Lab.
There, he worked a lot with Angular for frontend development, but his goal was to produce something “tangible” as fast as possible. As much as he enjoyed working with Angular, it wasn’t fast–not to code with and not when apps load in a browser. So You, more artist than programmer, attacked the problem in a pragmatic way–he took the best part of Angular, which was data binding, and stripped down everything else.
So that’s one huge advantage of Vue.js: it is a very lightweight framework at about 20 KB, which means it is fast to download and when you code with it, its loading speeds are lighting fast. As a frame of reference, Angular is around five times as large.
Downward-Facing Code
Vue.js was created by a developer for developers, and it’s not surprising that many Web developers not just admire Vue but also use it. When asked to describe Vue.js in one word, Evan You picked “progressive,” in that Vue.js can be gradually integrated in an existing project without having to scrap everything and start over from scratch. In effect, what makes Vue.js so appealing to developers is how flexible it is.
This flexibility comes in many forms. You can code a template in HTML or JS, and you can either use it for a new application or update an existing one. It works well with basic browser-based apps or with more complicated UI. Evan You wanted to make building apps easier and faster, and so Vue.js has many time-savers built into it. Let’s say you want to add animation to your web page. With Vue.js, you can use embedded solutions that already work instead of adding boilerplate code that suck up time and money.
Another flexible feature is the so-called “vue-CLI,” which is short for “command-line interface,” and this allows developers to pick and choose which tools they want to use, depending on what they want to do. What makes Vue different is how developers have a range of options to pick from and how easily components can be integrated into existing projects.
DOM-inant
Like React.js, Vue.js uses a virtual DOM to improve the performance of websites. The Document Object Model (DOM) is code that relates to the part of the website that a user sees on their screen. One challenge facing web developers is how to display changes a user makes without making the website slow down to a crawl while capturing these changes.
Imagine a web page that is a menu with lots of choices for a side dish. The user just picks one, brown rice. Does the entire app need to reload to show this one small change? With a virtual DOM, no. A virtual DOM just focuses on that one change and leaves the rest as is. This is one reason why Vue (and React) are gaining so many users in the world of web development.
Open to All
Vue.js is open-source, and Evan You only gets paid through donations. But this doesn’t mean that Vue.js doesn’t have a lively community supporting it. You has re-written Vue twice since the first inception. But You is somewhat skeptical of the lively ecosystem that surrounds React.js, in that he worries that too much “churn” gets produced in forums devoted to problem-solving that developers can drown in assumptions about what they need.
Instead, You has Vue.js focused on a narrow set of problems to solve, with a minimal core. Again, he is stressing the importance of flexibility here, with the “directive” sitting at the center of what Vue does. Vue’s directives use simple programming syntax to employ special attributes that react to changes in UI. What was once cumbersome has now become leaner and easier to build in.
We’ve been doing frontend development in Vue.js for a while now, and have many examples we can show you of how this framework can improve the performance of your web page.
Reach out today to get started with Vue.js.
