diff --git a/poc-datacollector/modules/ROOT/pages/index-vuejs.adoc b/poc-datacollector/modules/ROOT/pages/index-vuejs.adoc index b9f6c98..696de0c 100644 --- a/poc-datacollector/modules/ROOT/pages/index-vuejs.adoc +++ b/poc-datacollector/modules/ROOT/pages/index-vuejs.adoc @@ -93,11 +93,9 @@ This is a simple representation of the concept of "one-way data flow": ==== -image::ROOT:vue-modules.png[float=right] +image::ROOT:nvc.png[float=right] -image::ROOT:mvc.png[float=right] - -image::ROOT:mvc1.png[float=right] +image::ROOT:nvc1.png[float=right] TIP: https://scrimba.com/learn/vuex[Online Vuex cources^] diff --git a/poc-datacollector/modules/ROOT/pages/index-vues.adoc b/poc-datacollector/modules/ROOT/pages/index-vues.adoc deleted file mode 100644 index bb993b6..0000000 --- a/poc-datacollector/modules/ROOT/pages/index-vues.adoc +++ /dev/null @@ -1,124 +0,0 @@ -= 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> -