We will be trying to create a swarm implementation that will allow communication between all of the members/nodes.
[NOTE]
====
.Imaging a swarm
image:./Swarming2.png[alt="Swarm"]
To undertand this better lets look at the picture bellow and imagine that red dots are iot devices that can send and receive and black ones are clients that gather data.
.Architecture of swarm communication
image:./swarmlabn-1.png[alt="Swarm Gateway"]
- Red Node: Sensor Node and Gateway Role
- Black and Red Node: Sensor Node - Client
====
*To make our life easier at this task we will be using the following tools...*
*Docker* is a set of platform as a service (PaaS) products that use OS-level virtualization to deliver software in packages called containers.
Containers are isolated from one another and bundle their own software, libraries and configuration files; they can communicate with each other through well-defined channels
A core principle of the MVC pattern is the view layer's ignorance with respect to the model layer. Views are dumb objects. They only know how to present data to the user. They don't know or understand what they are presenting.
MVC: Division across three code components only: Model, View, and Controller. ... Microservices: An app is divided into a set of specialized classes that interact with each other using APIs. This model is being used by companies like Netflix, Spotify, and eBay.
Model: This part manages the data on your site. Its role is to retrieve the raw information from the database, organize, and assemble it so that it can be processed by the controller.
View: This part focuses on the display. It is here where the data recovered by the model will be presented to the user.
Controller: This part manages the logic of the code and makes decisions. When the user interacts with the view, the request is processed by the controller.
It waits for the user to interact with the view to retrieve the request. Thus, it is the controller that will define the display logic, and display the next view on the screen.
=== Microservices Architecture
Microservices can be defined as an improvement, a kind of refinement, of what we know as service-oriented architecture (SOA).
In this architecture, a large application is made in the form of small monofunctional modules. Each microservice is autonomous.
Microservices do not share a data layer. Each has its own database and load balancer. So that each of these services can be deployed, adjusted, and redeployed individually without jeopardizing the integrity of an application.
As a result, you will only need to change a couple self-contained services instead of having to redeploy the entire application.
== Software
=== Client site (PC)
==== Vue
.vuejs
[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”*, how easy it is to extend functionalities, and how well all parts work once more modules are included.
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::./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
==== 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":
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^]
TIP: As an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications.
Almost no function in Node.js directly performs I/O, so the process never blocks. Thanks to this, scalable systems is very reasonable to be developed in Node.js.
https://nodejs.org/en/docs/guides/blocking-vs-non-blocking/[Overview of Blocking vs Non-Blocking^]
TIP: *Node.js* is similar in design to, and influenced by, systems like *Ruby's Event Machine* and *Python's Twisted.*
Node.js takes the event model a bit further. It presents an *event loop as a runtime construct* instead of a library.
*In other systems, there is always a blocking call to start the event-loop.*
Typically,
- behavior is defined through callbacks at the beginning of a script,
- and at the end a server is started through a blocking call like *EventMachine::run().*
[NOTE]
====
In Node.js, there is no such start-the-event-loop call.
- *Node.js* simply *enters the event loop after executing the input script.*
- *Node.js exits the event loop* when there are *no more callbacks to perform.*
====
Node.js being *designed without threads* doesn't mean you can't take advantage of multiple cores in your environment.
Child processes can be spawned by using our *child_process.fork() API,* and are designed to be easy to communicate with.
TIP: Built upon that same interface is the cluster module, which *allows you to share sockets between processes* to enable load balancing over your cores.
==== socket.io
*Socket.IO* is a library that enables *real-time*, *bidirectional* and *event-based* communication between the browser and the server.
It consists of:
- a Node.js server: Source | API
- a Javascript client library for the browser (which can be also run from Node.js): Source | API
image::bidirectional-communication.png[]
https://socket.io/[See more info here: Socket.io^]
==== express
Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
*Fast, unopinionated, minimalist web framework for Node.js*
==== NoSQL
A NoSQL (originally referring to "non-SQL" or "non-relational") database provides a mechanism for storage and retrieval of data that is modeled in means other than the tabular relations used in relational databases.
* - You are able to access reactive data and events that are active with the created hook. Templates and Virtual DOM have not yet been mounted or rendered:
