=  Vue.js -> service webclient

[NOTE]
====
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).


image::ROOT:intro.png[intro]


TIP: 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"?
[NOTE]
====

*Let's start with a simple Vue counter app:*

[source,javascript]
----
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":

====

image::ROOT:nvc.png[float=right]

image::ROOT:nvc1.png[float=right]


TIP: https://scrimba.com/learn/vuex[Online Vuex cources^]


==  Using Axios to Consume APIs

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

https://github.com/axios/axios[See more^]

== Using socket.io to Consume Websocket

image::ROOT:bidirectional-communication.png[]

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

https://socket.io/[See more info here: Socket.io^]

Vue Packages

- https://www.npmjs.com/package/vue-socket.io-extended[socket.io client^]

- https://www.npmjs.com/package/vue-socket.io[socket.io]


== Video = intro


****
TIP: REST API and Socket

video::s7wmiS2mSXY[youtube]

video::SLwpqD8n3d0[youtube]

video::1BfCnjr_Vjg[youtube]
****