Vue is a relative newcomer in the JavaScript frontend landscape, but a very serious challenger to the current leading libraries. It is simple, flexible, and very fast, while still providing a lot of features and optional tools that can help you build a modern web app efficiently. Its creator, Evan You, calls it the progressive framework:
- Vue is incrementally adoptable, with a core library focused on user interfaces that you can use in existing projects
- You can make small prototypes all the way up to large and sophisticated web applications
- Vue is approachable--the beginners can pick up the library easily, and the confirmed developers can be productive very quickly
Vue roughly follows a Model-View-ViewModel architecture, which means the View (the user interface) and the Model (the data) are separated, with the ViewModel (Vue) being a mediator between the two. It handles the updates automatically and has been already optimized for you. Therefore, you don't have to specify when a part of the View should update because Vue will choose the right way and time to do so.
The library also takes inspiration from other similar libraries such as React, Angular, and Polymer. The following is an overview of its core features:
- A reactive data system that can update your user interface automatically, with a lightweight virtual-DOM engine and minimal optimization efforts, is required
- Flexible View declaration--artist-friendly HTML templates, JSX (HTML inside JavaScript), or hyperscript render functions (pure JavaScript)
- Composable user interfaces with maintainable and reusable components
- Official companion libraries that come with routing, state management, scaffolding, and more advanced features, making Vue a non-opinionated but fully fleshed out frontend framework
Evan You started working on the first prototype of Vue in 2013, while working at Google, using Angular. The initial goal was to have all the cool features of Angular, such as data binding and data-driven DOM, but without the extra concepts that make this framework opinionated and heavy to learn and use.
The first public release was published on February 2014 and had immediate success the very first day, with HackerNews frontpage, /r/javascript at the top spot and 10k unique visits on the official website.
The first major version 1.0 was reached in October 2015, and by the end of that year, the npm downloads rocketed to 382k ytd, the GitHub repository received 11k stars, the official website had 363k unique visitors, and the popular PHP framework Laravel had picked Vue as its official frontend library instead of React.
The second major version, 2.0, was released in September 2016, with a new virtual DOM-based renderer and many new features such as server-side rendering and performance improvements. This is the version we will use in this book. It is now one of the fastest frontend libraries, outperforming even React according to a comparison refined with the React team (https://vuejs.org/v2/guide/comparison). At the time of writing this book, Vue was the second most popular frontend library on GitHub with 72k stars, just behind React and ahead of Angular 1 (https://github.com/showcases/front-end-javascript-frameworks).
The next evolution of the library on the roadmap includes more integration with Vue-native libraries such as Weex and NativeScript to create native mobile apps with Vue, plus new features and improvements.
Today, Vue is used by many companies such as Microsoft, Adobe, Alibaba, Baidu, Xiaomi, Expedia, Nintendo, and GitLab.
Vue doesn't have any dependency and can be used in any ECMAScript 5 minimum-compliant browser. This means that it is not compatible with Internet Explorer 8 or less, because it needs relatively new JavaScript features such as Object.defineProperty, which can't be polyfilled on older browsers.
In this book, we are writing code in JavaScript version ES2015 (formerly ES6), so for the first few chapters, you will need a modern browser to run the examples (such as Edge, Firefox, or Chrome). At some point, we will introduce a compiler called Babel that will help us make our code compatible with older browsers.