From fd9ce4563c4b9dc812bbe43a998585f5247ca3d0 Mon Sep 17 00:00:00 2001 From: zeus Date: Fri, 26 Nov 2021 14:56:16 +0200 Subject: [PATCH] add structure --- poc-datacollector/modules/ROOT/nav.adoc | 1 + .../modules/ROOT/pages/index-structure.adoc | 121 ----------------- .../modules/ROOT/pages/index-vues.adoc | 125 ++++++++++++++++++ 3 files changed, 126 insertions(+), 121 deletions(-) create mode 100644 poc-datacollector/modules/ROOT/pages/index-vues.adoc diff --git a/poc-datacollector/modules/ROOT/nav.adoc b/poc-datacollector/modules/ROOT/nav.adoc index 37d2ad1..3b43600 100644 --- a/poc-datacollector/modules/ROOT/nav.adoc +++ b/poc-datacollector/modules/ROOT/nav.adoc @@ -1,3 +1,4 @@ * xref:index.adoc[datacollector] * xref:index-structure.adoc[project structure] +** xref:index-vuejs.adoc[Vue.js] * xref:index-src.adoc[src-files] diff --git a/poc-datacollector/modules/ROOT/pages/index-structure.adoc b/poc-datacollector/modules/ROOT/pages/index-structure.adoc index 67ae032..b3fd0ee 100644 --- a/poc-datacollector/modules/ROOT/pages/index-structure.adoc +++ b/poc-datacollector/modules/ROOT/pages/index-structure.adoc @@ -14,126 +14,5 @@ image::ROOT:types-of-mounts-bind.png[,250,float=right] WARNING: Your local changes to the files will be overwritten by click on "Download" button. You should always *take a full backup* first (simple copy the directory tree) -== 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. 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> -
{{ count }}
- `, - // 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] - diff --git a/poc-datacollector/modules/ROOT/pages/index-vues.adoc b/poc-datacollector/modules/ROOT/pages/index-vues.adoc new file mode 100644 index 0000000..b9f6c98 --- /dev/null +++ b/poc-datacollector/modules/ROOT/pages/index-vues.adoc @@ -0,0 +1,125 @@ += 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> +
{{ count }}
+ `, + // 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] + + +