What is Vue.js

A brief history

As already mentioned before, the framework was created by Evan You, who was a Google employee at the time. As a developer, he was using Angular.js for most of his projects but he felt that something was missing. To create, in his opinion, the best framework, he extracted the best features of Angular and integrated it into a lightweight package. And thus, the first Vue source code was written in 2013, and half a year later, You finished his project.

As a result, You created an open-source framework that later managed to span a huge and reliable online community who to this day try to push the platform's capabilities and ecosystem with different tools and additional extensional frameworks that simplify and streamline the development process even further.

The world of JS frameworks

Veteran developers have witnessed how JavaScript managed to become a full-blown ecosystem with a myriad of different development tools which can be considered as phrasebooks to the JS language aiming to help to smoothe out the entire development cycle and the accompanying workflow.

That being said, the framework scenery in the world of JS was dominated by two heavy-hitters, React and Angular. However, after You introduced Vue to the masses of developers, the JS framework landscape came to a dramatic shift. The progressive nature of the framework and its intuitive learning curve made it a serious contender right off the bat, and its open-source profile gave it detailed and useful documentation, reliable support, and great examples of Vue's capabilities.

Why Vue?

One of the main reasons why developers tend to use Vue.JS is the fact that it supports “high decoupling” features, which make it easy to extend different functionalities. For instance, if developers want to organize small visual components and render them, with Vue, the only thing they need is the framework’s core library, meaning that they don't have to include additional libraries. There are also official libraries for route management global state management libraries, and libraries to build responsive web apps as well.

On the other hand, the framework supports a reactive component system (more on that later) which means that Vue knows how to communicate through asynchronous events.

Vue also has a special CLI created on Node.js which allows developers to start their project using a boilerplate. Also, Vue's dev team maintains a Chrome extension that lets developers see how the events are getting launched and recorded, component trees rendered, and how each component's internal state is saved, and how the global state of the component behaves.

What makes Vue.js tick?

In this section, we will talk about the features that make Vue stand out as one of the leading JS frameworks.

Components

These are the features that encapsulate reusable code by extending basic HTML elements. In the framework, a component is basically a Vue instance with options pre-defined as they are custom elements with attached behavior thanks to Vue’s compiler.

The framework uses these components as its building blocks for web pages. What this means is every piece of the app is composed of different components representing an encapsulated element of the interface itself. The components can be written in Javascript, CSS, and HTML without having to divide them into separate files.

An architecture like this means that the framework will sport a wide array of different features and benefits, such as:

• Reusable components: – Developers have the opportunity to reuse encapsulated components in the form of code chunks as templates for similar apps and elements making the development cycle that much faster.
• Code reading: – The components are stored in different files, in most cases, each of them is a single file. Such an architecture makes the process of code readability much simpler and makes app-maintenance easier as well, as troubleshooting becomes more focused and streamlined.
• Great unit-testing: – Vue's component-based philosophy lets dev experts configure the entire process of testing as a simple Q&A process being able to analyze even the smallest parts performance within a given app.

Templates

The framework boasts an HTML-based syntax. This allows the rendered DOM to bind to the underlying instance's data. Then, the templates are compiled into virtual DOM render functions and the DOM (Virtual Document Object Model) allows developers to render the components before browser update. Also, the reactivity system of the framework helps to calculate the minimal component number that needs to be changed and applies the minimal amount of manipulations in the DOM during app-state change.

This optimized process of browser updates can significantly speed up loading times and improve user experience. The virtual DOM is basically a copy of the original DOM. The virtual version serves as a blueprint for updates and bypasses the need for rendering the entire DOM.

Reactivity

Vue also supports a unique reactivity system that supports optimized re-rendering and uses plain JavaScript objects. In this system, each component tracks its reactive dependencies during rendering, meaning the system knows when to re-rendered and which components to re-render.

Transitions

Vue also uses different transition effects for removed, inserted, or updated DOM items.

They can work in the following patterns:

• You can apply CSS transition and animation classes automatically
• Integration of third-party CSS animation libraries
• Using JS to execute direct DOM-manipulations during transition hooks
• Third-party JS libraries for animation like Velocity.js

When transition elements are inserted or removed, Vue will either:

• Automatically detect whether there are CSS transitions or animations applied or not. If there are, the framework will add or remove the necessary CSS classes at the appropriate time
• The DOM's operational commands for removal or insertion will be executed on the following frame if there are no CSS animations/transitions or JS hooks detected.

Routing

Vue, by default, does not come with a dedicated front-end hashed routing feature, however, there's an open-source vue router package, in which developers can use an API to update the application's URL while still supporting the navigation history, verification links, and/or password resets. This same package also supports nested route mapping to nested components while offering transition control.

Vue already lets devs build apps from small building blocks. The Vue router takes this ability and improves it: with the package, developers can map the components to their dedicated routes while the parent/tool routes must indicate where should the children render.

The ecosystem

Apart from the large open-source and online community support, the framework's core dev team offers several libraries as well.

Some might even wonder, why should such a viral open-source framework have its own devoted team standing behind it and trying to improve it even further?

The officially-backed core libraries basically define Vue as a full-blown framework that guarantees that the platform will work seamlessly. As a bonus, there will always be an abundance of unofficial packages and libraries that will enable developers to come up with fully custom solutions that will even support large projects or simply scalable ones.

As such, here are a few of the most popular community projects that are among the best additions to the Vue ecosystem:

• Nuxt.js – A framework that’s built on top of Vue combining several smaller tools and patterns making app development incredibly easy with SRR support.
• The Quasar Framework – Helps with the development of hybrid apps for desktop and mobile.
• The OnsenUI and Native Script – More support for mobile development frameworks.
• Element-UI and Veutify – UI frameworks providing Vue with dozens of unified UI components to allow for easy bootstrapping.

One thing is for sure, official libraries will always be top-notch, with long-term support and proper framework compatibility.

The official core library tools also come with great features that make the development cycle effective, smooth, and fast. Here are some of the most notable:

• Devtools: A browser extensions for debugging
• Vue loader: A webpack loader allowing developers to use Single-File Components (SFCs) format to write components.
• Vue CLI: The standard tool-set for fast development. The Command Line Interface uses simple and editable commands to produce greater and faster output.

Here are some of the official libraries:

• Vuex: Inspired by Flux, this is a Centralized State Management library for Vue
• Vue server render: SSR library for Vue
• Vue router: The official router package

Development in Vue.JS

As far as environment setup goes, there are a few ways you can add Vue to your project:

• You can either simply download the Vue.js file and include it with the <script> in the HTML file directly
• By using Vue-cli for setting up the project
• Installing it with NPM (Node Package Manager)
• With CDN by using the <script> tag in the HTML file

In this particular example, we will be using the CDN method where the <div> tag has the template code the <style> has the CSS code, and the script code is in the <script> tag.

                    
    <html>
        <head>
            <title> Simple Vue.js PopArt Example </title>
            <script src = "https://cdn.jsdelivr.net/npm/vue"></script>
        </head>
        <body>
            <div id = "app">
                <p> {{message}} PopArt Blog Visitors! </p>
            </div>
            <script>
                var app = new Vue ({
                el: '#app',
                data: {

                message: 'Hello'

                }
                });
            </script>
        </body>
    </html>
                    


                

Now, if you want to create a Vue project by using the NPM method (usually recommended for large scale apps) it's necessary to install the latest version of Vue and using the following command:

> npm install vue

Then, we can create a Vue.js project using:

> vue create my-first-vue-app

Declarative rendering

Vue also lets developers declarative data rendering to the DOM with the following template syntax:

                    
    <div id="app">
        message
    </div>
    <script type="text/javascript">
        var app = new Vue({
        el:'#app',
        data: {

        message: 'This is the PopArt Blog!'

        }
        })
    </script>

    <div id="app">
        {{ message }}
    </div>

    <script>
        var app = new Vue({
        el:'#app',
        data: {
        message: 'This is the PopArt Blog!'
        }
        })
    </script>

                    


                

When this happens, Vue evaluates the declared statements by double curly braces, meaning that the data object from the Vue instance gets rendered into the string template. This way, the DOM and the data object are linked and everything becomes reactive.

Directives

These are special v-prefix attributes that allow DOM manipulation:

                    
    <div id="app">
        <p v-if="shown">You can see this message.</p>
    </div>
    <script type="text/javascript">
        var app = new Vue ({
        el: '#app',
        data: {

        shown: true

        }
        });
    </script>

                    


                

Components

We've already talked about components, so here's an example of how to use the <button-counter> component in Vue:

                    
    <div id="app">
        <popart-counter></popart-counter>
        <popart-counter></popart-counter>
        <popart-counter></popart-counter>
    </div>

    <script>
        Vue.component('popart-counter', {
        data: function () {
        return {
        count: 0
        }
        },
        template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'

        })

        var vue = new Vue({
        el: "#app",
        data: {
        }
        })
    </script>
                    


                

In this example, the component is created with Vue.component syntaxis where the first parameter is the actual component name and its options: template and data.

Reactive interfaces

You can also add reactivity to properties in Vue. They are added dynamically, with the watch property that basically operates as an observer:

                    
    <div id="app">
        <p>PopArt Counter: {{ counter }} </p>
        <button @click = "counter++">Increment Counter</button>
    </div>
    <script>
        var vue = new Vue({
        el: "#app",
        data: {
        counter: 1
        },
        watch: {
        counter: function(new_val, old_val) {
        alert('Changed from ' + old_val + ' to ' + new_val + '!');
        }
        }
        })
    </script>
                    
                

The community

As said before, Vue managed to become a developer-favorite quickly and is still considered as one of the heavy-hitters in the world of JS front-end platforms.

As one of the go-to frameworks, it's no wonder that the developer community's interest in the frameworks is really strong as well. Having solid support in the case of an open-source platform is always a huge bonus, since those new to the platform and even seasoned experts can always find new exciting video tutorials, insightful articles, tooling, libraries, project showcases, and so on.

A strong community will always ensure that those new to the framework will always find help to overcome project obstacles or just to learn the ins and outs of the platform. Detailed project documentation can also help speed up the development cycle, eliminating guesswork and unnecessary testing, and all the hassle that can often come with certain frameworks.

Pros and cons

Unfortunately, there's no perfect framework, or at least, one platform most certainly won't be able to suit every need, preference, and project. That being said, here are a few possible advantages and drawbacks that can come with using Vue.

Pros

• Lightweight – Developers across the globe have praised the framework for being incredibly lightweight.
• Two-way data binding – We’ve already discussed Vue’s DOM-manipulation characteristics, but we haven’t mentioned two-way data binding yet. Another feature that has become a favorite among developers which describes the model data update and the UI connection with bound components containing data. This characteristic makes it generally easier to track data updates and updating related components. Just like DOM objects, bound data also receives reactive updates in the framework making Vue ideal for real-time update applications. On the other hand, this reactivity can help data updates easier and streamlined, also helping the development process overall.
• Flexible – Vue allows developers to integrate the latest tech into their existing applications. It supports HTML, JS, and JSX template-writing, and those who've worked with Angular previously will a lot of familiarities between the two platforms.
• Easy-to-use – Vue's learning curve isn't that steep, meaning that familiarizing yourself with the framework isn't that difficult, especially for experienced developers. Fans of the platform usually state that solid CSS, HTML, and JS knowledge is enough in most cases to get started and it won't take that long to take under more challenging projects later on. On the other hand, a couple of the most popular tools and code editors like Sublime Text, Visual Studio, and Atom all support Vue, meaning that developers can even further shorten the learning curve. Lastly, the strong online community behind the framework can also lend a helping hand with detailed documentation, tutorials, and even first-experience help from chat forums, and so on.
• Support – With the detailed documentation, rich libraries, and tools, the dedicated community, not to mention the dedicated core development team behind the framework, developers shouldn't worry about getting stuck with a Vue project without help.
• Versatility and speed – Most JS frameworks are fast, but Vue is certainly among the fastest. It's a lightweight platform that relies on its Virtual DOM. Plus, it tracks the dependencies when rendering thus, knowing which components should be re-rendered when state changes happen without additional developer input. Vue can also be used as a library, not just as a framework. This makes it easy to modify, change and scale. Lastly, the architecture is composed in such a way that troubleshooting can also be done quickly.

Cons

• Lacking in plugins – Some developers mentioned that Vue lacks some of the most common plugins that would speed up the development process even further. Those who are used to using the common tools might see this as a drawback.
• Too “fast” – Some experts raised concerns about the fast-paced evolution of the platform, which tends to make it hard to follow sometimes. Those who aren't using Vue regularly might find that they have to re-learn certain processes as they've evolved so fast since the last time they've used the platform.
• Too flexible – Even though having a flexible platform in web development is certainly a good thing, some developers found that in larger projects, with several team members involved, the flexible nature of Vue lead to code irregularities and other issues which led to project delays.
• Issues with iOS & Safari – Lastly, developers also reported problems with Vue apps on Safari and iOS. These problems were by no means major, but they've still managed to cause quite a few headaches.