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..5c3538f --- /dev/null +++ b/poc-datacollector/modules/ROOT/pages/index-vues.adoc @@ -0,0 +1,124 @@ += 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> +