# Vue.js

## Summary


Vue.js is a lightweight frontend JavaScript framework. It can be used to develop modular UI components or entire Single Page Applications (SPAs). It features an incrementally adoptable architecture that focuses on declarative rendering and component composition. Advanced features such as routing, state management, build tooling, animations, and validations are offered via officially maintained libraries and packages. 

If you know HTML, CSS, and JS, it's easy to get started with Vue.js. Because of it's lean design, it takes up only a few tens of kilobytes. It's fast. It's open source and community led. It integrates well with other tools. It's also being used to build mobile apps.

## Discussion

### What's the benefit of using Vue.js over vanilla JavaScript?

JavaScript enabled us to add more dynamic content to web pages plus have rich user interactions. With vanilla JS, this came with increased code complexity and low maintainability. For example, to add interactions we would need to link event handlers to DOM elements, code these handlers (using vanilla JS or jQuery for example), make AJAX calls, handle the responses and update DOM elements. All this was done using hand-crafted code that was difficult to scale and maintain for large projects. 

It's to solve this problem that JavaScript frameworks were introduced. Vue.js is one of them, with Angular and React being alternatives. Vue.js is said to be approachable, versatile and performant. 

Vue.js is a **progressive JS framework**. This means that you're not forced to migrate your entire app at once. Instead, you can incrementally migrate some components that need rich interactions. Vue.js plays well with other code. You can use Vue.js code in apps written in other frameworks and also embed other code inside of Vue.js. 


### Who's using Vue and what's been their experience?

In 2017, Vue.js was named the "most willingly learned technology". Companies of all sizes and market domains have adopted Vue.js. This includes Netflix, Facebook, Alibaba, Adobe, Xiaomi, Grammarly, Laracasts, Behance, GitLab, 9gag, Nintendo, Chess, and Font Awesome. 

Made With Vue.js showcases lots of projects developed using Vue.js. These include components, frameworks, webapps, websites, games, and more.

A survey of 1,553 responses collected in Nov-Dec 2018 showed that 92% would use Vue.js for their next project. 75% saw ease of integration as the biggest advantage and 58% found it easy to learn and apply. More than half saw documentation, performance and progressiveness as important advantages. 


### How does Vue.js compare against other frontend development frameworks?

The common parameters for comparing various frontend frameworks are features, documentation, developer tooling, adoption, third-party libraries, and community support. While React and Angular are led by Facebook and Google respectively, Vue.js is more community led, though there's a core team to set roadmaps. 

For building complex apps, other frameworks such as Ember and Angular provide an opinionated set of components. Vue.js core instead focuses on data binding, similar to React. Outside the core functionality, React leaves everything to the community. This creates churn, with developers not sure what to adopt. Vue.js takes the middle path where the core exposes minimal features and other official libraries offer incrementally adoptable pieces; but developers are not tied to using them. Thus, it's more approachable that React. 

It's been said that for migrating AngularJS (not Angular) apps, Vue.js is a natural fit mainly due to similar templating syntax and reactive model. In incremental migration, Vue.js and AngularJS play nicely with each other. 

Vue.js is about 80KB while React is 100KB and Angular is 500KB. Hacker Noon offers a detailed comparison of the three frameworks. 


### What are the main features of Vue.js?

Vue essentially extends HTML with **components**. These are custom elements to which Vue compiler attaches behaviour and binds data. Vue uses **templates** that are compiled to virtual DOM render functions. 

A Vue component also has **scripts** for defining local data, props, computed properties, watchers, methods, and lifecycle hooks. We can also include component specific **styles** that are scoped to the component. CSS styling can also use pre-processors such as Less or SCSS. When data changes, CSS transitions and animations can be easily coded with Vue. 

Vue adopts the ViewModel part of the Model-View-ViewModel (MVVM) architecture. However, developers can adopt Flux architecture, as is usually the case when using Vuex for state management. 

We can use props to pass data down to components. To inform a parent component that some data has changed, use `$emit` events. For more complex communication, use **EventBus** (for small apps) or **Vuex** (for large apps). 

Other useful features are built-in modifiers, mixins, plugins, filters, JSX, and custom directives. 


### What's the Vue.js component lifecycle?

A Vue.js component moves through different states in it's lifetime: created, mounted, updated, destroyed. These states are associated with a number of **lifecycle hooks** that we can use to execute custom JS code. 

Just after a Vue component is instantiated, `beforeCreate()` is called. At this point, component has no access to the data model. Once created, the `created()` hook is called, which is a good place to load any data. Now, the component is ready to watch data for changes and listen for events. 

However, the component is still isolated from view layer (the native DOM) and nothing will be displayed. Vue will display the data only when component's mounted. Hooks relevant in this phase are `beforeMount()` and `mounted()`. Once mounted, we can access the `$el` property that helps us update the DOM when necessary. 

Once mounted, an update cycle is started whenever data is updated. Virtual DOM is updated and differences are patched to the native DOM for efficient rendering. Relevant hooks are `beforeUpdate()` and `updated()`. 

When component is not longer required in the DOM and being destroyed, we can use hooks `beforeDestroyed()` and `destroyed()`. 


### How is the ecosystem around the core of Vue.js?

The Vue team maintains the Vue.js core that focuses on the view layer. They also maintain other libraries that help you build rich single page applications:  

    + **vue-router**: For SPA routing.
    + **vuex**: For large-scale state management.
    + **vue-cli**: To create project scaffolding.
    + **vue-loader**: A loader for webpack. This is useful for Vue components in a format called *Single-File Component* (SFC), which is a `*.vue` file.
    + **vue-class-component**: TypeScript decorator for a class-based API.
    + **vue-rx**: RxJS integration.
    + **vue-devtools**: Browser DevTools extension. This can be a Chrome extension, Firefox addon or standalone Electron app.
    + **vue-test-utils**: For unit testing.
    + **vue-server-renderer**: For building isomorphic or universal JS apps, with app code running on both server and client. As an alternative, there's Nuxt.js, just as React has Next.js.

### Which are some third-party libraries and tools for Vue developers?

Here are some third-party tools that might interest developers: 

    + **vue-templates**: Out-of-the-box templates to avoid manual config and boilerplate.
    + **vue-dummy**: For placeholder text and images.
    + **VuePress**: Static site generator.
    + **Gridsome**: Framework for static sites with GraphQL for data management.
    + **Vuetify**: UI component library based on Material Design.
    + **Quasar**: Framework that enables single codebase for SPAs, PWAs, hybrid mobile apps, desktop apps, etc.
    + **Storybook**: For writing UI components and target multiple frontend frameworks.
    + **Vue Apollo**: Integrate Vue with GraphQL.
    + **Weex**: Framework for building mobile apps with Vue and others.
    + **Bit**: To organize and share components across apps.
    + **Vue Starter**: Boilerplate for production-ready PWAs.
    + **Vue Design System**: A set of tools, patterns, and practices for building UI design systems.
    + **VS Code / Atom Integration**: Vue-related extensions for VS Code and Atom editors, to name just a couple.

### Could you share some tips and best practices for using Vue.js?

When you reuse components across views, new Vue instances won't be instantiated. Instead, use a custom handler to react to route changes. Avoid manipulating the DOM directly. Instead use `$refs`. Use computed properties to manipulate component data. These are also cached from their reactive dependencies. Validate your props. 

Here are some tips for better performance:

    + **Loop Items**: Use `:key` so that Vue can update items more efficiently.
    + **Functional Components**: Cheaper than stateful components. Use these if you're only accepting props and rendering markup.
    + **Component Registration**: Avoid registering all components globally. Import specific components within other components, preferably asynchronously.
    + **Code Splitting**: Split your code into logical parts to reduce JS bundle size. Enables lazy loading.
    + **Lazy Loading**: For local component registration, route declaration and other stuff not needed upfront. Load components as necessary based on user actions.
    + **SVG**: Hide/show elements rather than frequently removing or adding them. A faster alternative to SVG is to use Canvas and WebGL, which are not XML based.

### What are some criticisms or concerns with Vue.js?

Traditionally, Vue.js was not suited for building mobile apps. This is changing. Vue's founder, Evan You, commented in March 2019 that Vue.js is already "unofficially" supporting integration with NativeScript, Quasar and Ionic 4. 


### What are some useful resources for a beginner to learn Vue.js?

A good place to start learning Vue.js is to read the official guide. A series of Vue videos on Laracasts is worth studying. Vue Mastery is another useful resource with lots of Vue lessons. 

For building SPAs, read Bland's tutorial or Chuchin's tutorial. For building PWAs, read Rajat's tutorial.

For reference, Vue Mastery has released a handy cheat sheet. For ready-to-use themes, Creative Time provides UI kits, templates and dashboards based on Vue.js.

For latest news, follow The Vue Point, the official Vue.js blog.

Developers who wish to contribute, should head to the Vue.js page on GitHub.

## Milestones

2013

Evan You at Google Creative Lab starts experimenting with the good parts of Angular, especially it's declarative data binding. He feels that for simple use cases Angular is too heavy and opinionated. It's from here that he creates and names **Vue.js**. 

Feb  
2014

Evan You releases Vue code on GitHub and shares a link on Hacker News. The project gets several hundred stars within the first week. The actual version is **Vue 0.9.0 Animatrix**. Since then, Vue releases are code named based on anime names. 

Oct  
2015

**Version 1.0.0 Evangelion** is released after 300+ commits, 8 alphas, 4 betas and 2 release candidates. API is cleaned up to suit large projects, keeping in mind maintainability and refactoring. For fast initial rendering, `v-repeat` is replaced with `v-for`. Apart from the core, vue-loader, vueify and vue-router now provide a good foundation to build Single Page Applications. Also supported are hot component reloading and scoped CSS. 

Sep  
2016

**Version 2.0.0 Ghost in the Shell** is released. Work on this version started in April. This release includes TypeScript typings and superior rendering performance compared to Vue 1.0. Server-side rendering is possible. There's JSX support via a Babel plugin. The runtime is only 16KB when minified and zipped. 

Aug  
2018

**Vue CLI 3.0** is released. It's a rewrite of the older version. The aim is to reduce configuration fatigue and make it easier to work with multiple tools. It provides a pre-configured build setup using Webpack. It supports ES2017 transpilation, polyfills injection, CSS pre-processors, and more. The CLI comes with beta version of a GUI. This deprecates the older `vue-cli` command. 

2019

In February, **Vue 2.6.0 Macross** is released. Meanwhile, Evan You comments that Vue 3.0 is likely to be released in 2019. It's a rewrite that sees some internal parts becoming individual packages. TypeScript is being used for the new version. You may wish to view a video titled Vue.js in 2019 & Beyond.