Vue.js is an open-source progressive JavaScript framework for building user interfaces. Really? Another one? Should we have a look at what it is best suited for in comparison to the other unmemorable JS frameworks out there? I think we should and I believe it’s on our behalf.
Lots of front-end JavaScript frameworks provide you with everything straight away, which lets a developer pick and choose the modules they are seeking for. But all that functionality at hand can result in a lot of code overhead, and after all might manifest itself in a slower performance. To fulfill the needs of developers who would like to pick and choose the modules they need without extra complications, Vue.js offers a buildable framework, more specifically – layered components that let you add as much as needed, and where needed. This grants a good deal of flexibility and level of performance that equals to such acknowledged frameworks as React, Riot and Polymer.
Let’s talk a bit about the things Vue.js stands out for.
Firstly, developers who are already familiar with such programming languages as HTML, CSS and JavaScript can get started with little to even no learning curve at all.
As vue.js guide says “Vue embraces classic web technologies and builds on top of them.” Compared to React’s steeper JSX (JavaScript + HTML files) learning curve, Vue uses HTML-based templates and single-file components that allow developers write actual CSS. As mentioned earlier, the major benefits of doing this outside of JavaScript libraries are less complexity and a smaller build size.
Many other frameworks often require more time to learn how to get your way through it. It certainly might be a good deal, because if you have enough experience such full-featured frameworks can boost productivity substantially. Vue has a lot smaller learning curve. It’s believed to be easily approachable so if you’re already good at writing front-end code, all it’s going to do is make what you’re doing easier. Doesn’t it sound good?
Look at any feature-packed framework like Ember. Vue is more easily compared with Ember’s specific object model and templating components than the entire framework itself. It’s specific to its core, providing a developer more flexibility and control over the architecture altogether.
Vue is built concisely, and at the same time with the components that give you room to advance according to your needs.
Vue.js is built really small. It’s a plus when you are looking for a framework that’s going to help you save space in your codebase, but has a stack with huge potential that lets you build on it to scale up as much as needed, or only use the parts need to integrate them right in with an existing application. Its components are somewhat similar to the elements you’d find in the Web Components-based Polymer framework.
That core library is all about the general picture that focuses solely on what the users of an app or site can see and interact with.
Vue can be characterized by outstanding performance thanks to a lightweight Virtual DOM.
It seems nowadays almost every framework (React.js, Ember.js, and now Vue.js) is incorporating a Virtual DOM. But what is a Virtual DOM and why Vue’s one performs faster?
Simply put, while everyone is talking about the DOM as the HTML document, it is the data structure that is being created at times when the browser parses that HTML doc. It is rather expensive to make changes to the DOM with JavaScript because the browser must allocate resources to find the required DOM nodes to actually make that change. Taking into account that modern, dynamic, single page web application (SPA) can have a good number of nodes, repeated updates will most likely slow down the whole page.
The Virtual DOM deals with this problem by providing an entire representation of the DOM in JavaScript. It can be updated as required, when the real DOM needs to change. Making changes to JavaScript objects is cheaper than changing the DOM itself. When the real DOM syncs with the Virtual DOM, it can use a more efficient updating function to make those changes happen without having to reshape the entire DOM with every change. In our case, solely the objects that were touched by a user are updated.
But what makes the Vue.js Virtual DOM so competitive? With the help of a gzip algorithm at runtime it weighs about 20 kb (minified and compressed). So, Vue.js is simply a lot lighter than for example Ember 2.2.0 and Angular 2 (roughly 111 kb). Additionally, reduced out of the box code allow not to worry about means optimization effort.
Vue can be rendered on the server.
Like other JavaScript frameworks Vue uses client-side rendering (CSR) where the browser does the heavy part when it comes to rendering a webpage. Surprisingly, Vue also takes a page from React, supporting server-side rendering (SSR), which allows an app to pre-render its pages on the server prior to serving them to end users.
So why one should use SSR? One major advantage is that content rendered on the server doesn’t need to wait until all JavaScript has been downloaded and executed to be shown. It reduces page load times substantially. The other huge advantage is that fully rendered pages are easier for search engine crawlers to read and therefore improved SEO is achieved.
Vue allows to manage the state while scaling with vuex, vue’s answer to react’s flux/redux.
State management becomes more relevant when application is scaled. It is especially important for component based frameworks such as Vue or React, where multiple components in an application are sharing data and interacting with one another. As the complexity of those interactions scale with the app, it becomes more difficult to understand or predict data state, and bugs are more likely to show up.
Enter Vuex, an application design pattern and library that is inspired by Flux, Redux, and the Elm Architecture. In Vuex, shared state is managed in one central location. This allows the component tree to act as a large view that any component can interact with to access state or trigger actions regardless of their location within the tree. Components can freely read data from the store, but can’t change it directly. Instead they inform the store which in turn updates state using Vuex functions called mutations. Put it all together and you have a scalable front-end that’s easier to manage.
Vue supports TypeScript which means even higher productivity.
While speaking of scalability, it might be a good news for many developers that Vue supports Typescript, a statically typed superset of JavaScript that compiles to JavaScript. In comparison to dynamically typed JavaScript which gets type checked at runtime, TypeScript variables are type checked at compile time. That allows catching errors earlier and ensuring bug-free code at runtime. When you use an IDE that supports TypeScript, it’s possible to catch errors as you type your code. Moreover, TypeScript itself encourages cleaner code that’s less prone to bugs, which can make good improvements to programmer productivity for a large product in a long run.
Do you think Vue.js is worth trying? Share your thoughts in the comments!
