All the information you need to know about Vue. js
All the information you need to know about Vue. js
Vue is a very popular JavaScript front-end framework that is rapidly growing in popularity.
It is straightforward, small in size (24KB), and extremely performant. It differs from all other JavaScript front-end frameworks and view libraries in terms of feel. Let us ascertain why.
What is a JavaScript front-end framework?
If you're unfamiliar with JavaScript frameworks, Vue is an excellent introduction.
We can create modern applications with the assistance of a JavaScript framework. Although most JavaScript applications are used on the Web, they also power a large number of desktop and mobile applications.
Until the early 2000s, browsers lacked the capabilities that they now possess. They were significantly less powerful, and it was physically impossible to build complex applications inside them. Tooling was not even considered.
Everything changed when Google introduced Google Maps and GMail, two browser-based applications. Ajax enabled the execution of asynchronous network requests. Developers began building on top of the Web platform over time, while engineers focused on the platform itself — browsers, Web standards, browser APIs, and the JavaScript programming language.
Libraries such as jQuery and Mootools were the first large-scale JavaScript projects and were extremely popular for a time. They essentially provided a more aesthetically pleasing API for interacting with the browser and workarounds for bugs and inconsistencies between the various browsers.
The first wave of modern JavaScript frameworks included Backbone, Ember, Knockout, and AngularJS.
The second wave, which is currently underway, is led by React, Angular, and Vue.
Take note that jQuery, Ember, and the other projects I mentioned are still heavily used and actively maintained, and they are used by millions of websites.
Having said that, techniques and tools evolve, and as a JavaScript developer, you're more likely to be required to be familiar with React, Angular, or Vue than you are with those older frameworks.
Frameworks abstract away the interaction with the browser and the document object model (DOM). Rather than manipulating elements through DOM references, we define and interact with them declaratively at a higher level.
Using a framework is analogous to writing system programs in C rather than Assembly. It's analogous to writing a document on a computer rather than a typewriter. It's analogous to having a self-driving car rather than driving one yourself.
Not quite that far, but you get the picture. Rather than manipulating elements via the browser's low-level APIs or creating enormously complex systems to write an application, you use tools created by extremely smart people to make our lives easier.
Why are developers so fond of Vue?
To begin, Vue is referred to as a progressive framework.
This means that it adapts to the developer's requirements. Other frameworks require complete buy-in from a developer or team, and frequently require you to rewrite an existing application to conform to a particular set of conventions. Vue happily integrates into your app via a simple script tag, and it can scale to meet your needs, ranging from three lines to managing your entire view layer.
You do not need any prior knowledge of webpack, Babel, or npm to get started with Vue. However, when you're ready, Vue simplifies the process of relying on them.
This is a significant selling point, particularly in the current ecosystem of JavaScript front-end frameworks and libraries, which frequently alienate both newcomers and experienced developers who feel lost in an ocean of possibilities and choices.
Vue.js is probably the easiest front-end framework to learn. Vue has been dubbed the "new jQuery" by some due to its ease of integration via a script tag and gradual expansion from there. Consider it a compliment, as jQuery dominated the Web for several years and continues to do so on a large number of websites.
Vue was built by cherry-picking the best ideas from frameworks such as Angular, React, and Knockout, as well as the best choices made by those frameworks. And, by omitting some less brilliant ones, it began as a "best-of" collection and grew from there.
Where does Vue.js position itself in the frameworks landscape?
When it comes to web development, the two elephants in the room are React and Angular. How does Vue compare to those two well-known frameworks?
Evan You created Vue while working at Google on AngularJS (Angular 1.0) applications. It was created to address the need for more performant applications. Vue borrowed some of Angular's templating syntax, but eliminated the opinionated, complex stack required by Angular and made it extremely performant.
The new Angular (Angular 2.0) addressed a number of the AngularJS issues as well, but in significantly different ways. Additionally, it requires an investment in TypeScript, which not all developers enjoy (or want to learn).
What about the React framework? Vue incorporated a number of React's best ideas, most notably the Virtual DOM. However, Vue implements it via an automated dependency management system. This keeps track of which components are affected by a state change and re-renders only those components when the state property changes.
In React, on the other hand, when a component's state changes, the component is re-rendered. By default, all of its children are also re-rendered. To avoid this, you must use each component's shouldComponentUpdate method to determine whether the component should be re-rendered. This gives Vue a slight advantage in terms of ease of use and performance gains out of the box.
One significant difference between React and JSX is JSX. While it is technically possible to use JSX in Vue, this is not a common approach and the templating system is used instead. A valid Vue template is any HTML file. JSX is significantly different from HTML and requires additional training for team members who may only need to work with the HTML portion of the app, such as designers.
Vue templates bear a strong resemblance to Mustache and Handlebars templates (although they differ in terms of flexibility). As a result, they are more familiar to developers who have previously worked with frameworks such as Angular and Ember.
Vuex, the official state management library, is based on the Flux architecture and shares some concepts with Redux. Again, this is one of the positive aspects of Vue, which recognized this useful pattern in React and incorporated it into its ecosystem. And, while Redux is compatible with Vue, Vuex is optimized for Vue and its internals.
Vue is flexible, but the fact that the core team maintains two packages critical for any web application (such as routing and state management) makes it significantly less fragmented than React. For instance, vue-router and vuex are critical components of Vue's success.
You are not required to choose or worry about whether the library you select will be maintained in the future and will remain compatible with framework updates. Due to their official status, they are the canonical reference libraries for their respective fields (but you can choose to use what you like, of course).
One distinction between Vue and React and Angular is that Vue is an independent project: it is not backed by a large corporation such as Facebook or Google.
Rather than that, it is entirely supported by the community, which encourages development through donations and sponsorships. This ensures that the roadmap for Vue is not dictated by the agenda of a single company.
