Getting Started with Vue.js

Vue.js

What is Vue.js?

Vue.js is yet another JavaScript framework getting popular considering its simplicity praised a lot these days. There are a lot of JavaScript frameworks among which React and Angular are popular among web developers. Vue.js pronounced as “view.js”  is a much flexible and less opinionated framework than Angular. It’s similar to React but much simpler. Vue.js gives you more freedom in designing your app, unlike Angular. So that you are not forced to do everything in their way. It can be adapted very easily to your existing application. You don’t need to know JSX, unlike React. All you have to do is to drop the link into your HTML page header and you are up and ready.

Overview

This is the basic folder structure.

– index.html

This is the main HTML template for your application. You can link your static assets inside the head tag while your processed assets will be auto injected in the body.

– src/router/index.js

This is the file which initiates vue-router with the given components.

– src/App.vue

This is the application’s main Vue.js component which is basically just a wrapper for vue-router.

– src/main.js

This is the application entry file where you initiate your Vue.js application with a router, store and the main App.vue component.

– src/components/Hello.vue

This file represents a sample Vue.js component which will be used by the vue-router. Please note that Hello module’s state is being used in here.

Getting Started

The simplest way is to include this in your file. You can also download the Vue file and add it in a script tag, or else install it with NPM. It also provides an official CLI called the Vue-cli. You can find more details in the Vue.js Installation Guide. Let’s compare simple JavaScript with a VueJS instance. This is what we do when we want to manipulate the text for some element. For the last couple of years, I was writing code like this for a living. But what if the ‘.element’ get renamed. Your whole JS will break. The binding is broken. We can overcome this in Vue. The Vue instance referenced to an element ‘.app’. This is the entry point. Even if the class of the span object is changed it won’t affect the message being displayed.Vue.js also supports Loops, Two-way binding, Components,  Event Listeners like React. If you want to learnVue.js there’s no better document than the Vue.js  Guide. You can see a demo Here.

Why Vue.js?

Let’s talk about why we can use Vue.js.  Both React and Vue.js use Virtual DOM and the use of components. But in React if a component’s state is changed. It re-renders the entire component sub-tree. In Vue.js, the component’s dependencies are automatically tracked during render, so the system knows which component needs to be changed when the state is changed. Unlike React you don’t need to write everything in JavaScript. Vue.js supports the use of both JSX and Template rendering. If the HTML is valid, then it is a valid Vue template. We can give access to CSS within a single-file-component by adding a ‘scoped’ attribute to the style tag which scopes CSS only for that particular component. Comparing Vue with AngularJS, both have similar syntax. But Vue is much simpler in terms of API and design. There are many opinions to structure an Angular application but Vue is a more flexible, modular solution by setting up web pack template. In Vue, we use one-way data-flow between components that make the flow of data easier but in angular, it’s two-way binding between scopes. There are a lot of confusions between directives and components in Angular but in Vue, components are self-contained units with own view and data logic and directives are used for DOM manipulations only. Vue doesn’t use dirty checking so it’s much easier to optimize and has better performance. Since there are a lot of watchers in Angular, when anything in scope changes, all the watchers should re-evaluate again. So Angular becomes slow. Vue.js performs better than EmberJs since it automatically batches updates but in Ember, we need to manually manage run loops. For computed properties in Ember, we have to declare it manually and need to wrap everything in Ember Objects. But in Vue, it’s in Javascript Objects and fully automatic.

Advantages

1. Simplicity

Vue has a good combination of structure and simplicity. Adding Vue.js to your web project can be very simple. It needs external libraries, but tend to use it with or without jQuery. The code is easily understandable about the working of Vue code.

2. Reactivity

The variables in Vue.js are reactive. At each point, when the variables change, it will automatically inform their peers. Data properties, like message in this example, are reactive, that is they will trigger a re-render if changed.  The v-html attribute will render HTML templates. You can see the demo here.

3. Focus

Vue.js is mainly used for building user interfaces and this is achieved by a library that does not have any influence from the frameworks out there already. Supporting libraries are integrated with Vue.

4. Flexibility

Vue.js comes with perfect balance to write quickly and run straight from the browser. With that said, it is extremely good if you would like to create any practical app using with ES6, separate component files, JSX, building, routing etc. For example, if you have a preferred method for writing your templates, Vue lets you do it in any of these ways:
  • Write your template in an HTML file
  • Write your template in a string in a Javascript file
  • Use JSX in a Javascript file
  • Make your template in pure Javascript using virtual nodes
This flexibility makes it easy to switch to Vue.

5. Components

Actually, this is where Vue’s flexibility system is built, so that components can be small and are reusable parts of UI. This isn’t any special because the of JavaScript frameworks are built with this concept. Which will render, So, the components can be used in templates as elements.

 6. Copying competitors

Vue has been able to copy what works in other frameworks and avoid what doesn’t. Vue’s state management library Vuex has inspiration from Elm. Along with this, Vue’s components get the similarities with Polymer’s customer elements. Vue is now rocking a virtual DOM like React.

Conclusion

Vue.js is a progressively-adoptable Javascript framework which is focussed on view layer. It is easy to integrate with other applications. The main feature of Vue is Components. Vue uses HTML based templates which can compile into Virtual DOM render functions. In Vue, we can also directly write render functions using JSX.Vue.js is much simpler, flexible and has better performance than other frameworks.

References

https://vuejs.org/ https://github.com/vuejs/vue https://medium.com/@brett.marshall/vue-js-the-real-angular-2-0-62744490cb99]]>