Vue.js → service webclient

Vue.js is an open-source, progressive JavaScript framework for building user interfaces (UIs) and single-page applications.

Library modularization using a framework is common in frontend development.

What differentiates Vue.js from other alternatives is:

its “high decoupling”,This means it is very simple to extend its functionalities as modules are included to an application.

For example, if we want to organize and render small visual components, all we need is Vue.js’s ‘core’ library. It is not necessary to include additional libraries.

As the application grows,

we have libraries to manage routes such as ‘vue-router’,
libraries to manage the global state such as ‘vuex’
and libraries to build responsive web applications such as ‘bootstrap-vue’.
Additionally, if our application needs to be optimized or needs good SEO, we can include the ‘vue-server-rendering’ library.

In the following figure, we can see how the libraries we just mentioned are progressively included, from a small SPA to multi-page applications (MPA).

The name of the framework – Vue – is the same phonetically in English as view, and it corresponds to the traditional Model-View-Controller (MVC) architecture

React and Angular are other Frameworks similar to vuejs

why Vue js

Below are the reasons stating why Vue js is gaining more popularity:

Easy To Understand And Learn
Easy Customization
Readability And Single-file Components
Lightweight
Robust Tooling Ecosystem
Flexibility And Integration Capabilities
Much Advanced
High Performance
LAST BUT NOT LEAST, Documentation

Vuex

Vuex is a state management pattern + library for Vue.js applications.

It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
It also integrates with Vue’s official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.

What is a "State Management Pattern"?

Let’s start with a simple Vue counter app:

new Vue({
  // state
  data () {   (1)
    return {
      count: 0
    }
  },
  // view
  template: `    (2)
    <div>{{ count }}</div>
  `,
  // actions
  methods: {   (3)
    increment () {
      this.count++
    }
  }
})

1	The state, the source of truth that drives our app;
2	The view, a declarative mapping of the state;
3	The actions, the possible ways the state could change in reaction to user inputs from the view.

This is a simple representation of the concept of "one-way data flow":

Online Vuex cources

Using Axios to Consume APIs

Axios is a library for http communication, making ajax requests, and so on.

Using socket.io to Consume Websocket

Socket.IO aims to make realtime apps possible in every browser and mobile device, blurring the differences between the different transport mechanisms. It supports multiple transports, such as WebSockets, Flash sockets, long polling and more, automatically falling back when a transport fails

See more info here: Socket.io

Vue Packages

Video = intro

REST API and Socket