You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
126 lines
3.6 KiB
126 lines
3.6 KiB
3 years ago
|
= Vue.js (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:vue-modules.png[float=right]
|
||
|
|
|
||
|
|
image::ROOT:mvc.png[float=right]
|
||
|
|
|
||
|
|
image::ROOT:mvc1.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
|
||
|
|
|
||
|
|
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]
|
||
|
|
|
||
|
|
|
||
|
|
|