XSolve Laboratory (xlab) for the 7th time! This time about #smog based on #ReactJS #NodeJS

1. www.xsolve.plAgile Software House
ReactJS & NodeJS

2. www.xsolve.plAgile Software House
10:15 Who we are
10:30 Configuration - Docker, NodeJS, ReactJS, Firebase
11:00 NodeJS + Laser dust sensor SEN0177
13:30 Lunch
14:00 ReactJS
14:45 Our experience with SEN0177
15:00 Q&A
Agenda

3. www.xsolve.plAgile Software House
Who we are
Krzysztof Sopa Senior Front-end Developer
Krzysztof Woliński Front-end Developer
Robert Kasza Front-end Developer

4. www.xsolve.plAgile Software House

5. www.xsolve.plAgile Software House
Task-1
NodeJS
ES6
Tests
Docker
Microservices

6. www.xsolve.plAgile Software House
ES6
http://es6-features.org/#StringInterpolation
http://es6-features.org/#ClassDefinition
http://es6-features.org/#ExpressionBodies
http://es6-features.org/#ArrayElementFinding
http://es6-features.org/#BlockScopedVariables
http://es6-features.org/#Constants

7. www.xsolve.plAgile Software House
Sensor
Introduction
PM2.5 laser dust sensor is a digital universal particle concentration sensor，it can be
used to obtain the number of suspended particulate matter in a unit volume of air within
0.3 to 10 microns, namely the concentration of particulate matter, and output with digital
interface, also can output quality data of per particle. The sensors can be embedded in a
variety of concentrations of environment-related instruments suspended particulate
matter in the air ,to provide timely and accurate concentration data.

8. www.xsolve.plAgile Software House
Sensor
How it works?
The sensor uses a laser scattering theory. And namely the scattering of laser irradiation
in the air suspended particles, while collecting the scattered light at a specific angle, to
obtain the scattering intensity versus with time curve. After the microprocessor data
collection, get the relationship between the time domain and frequency domain by
Fourier transform, and then through a series of complex algorithms to obtain the number
of particles in the equivalent particle size and volume units of different size. Each
functional block diagram of the sensor portion as shown

9. www.xsolve.plAgile Software House
Sensor
Source: http://www.azom.com/images/Article_Images/ImageForArticle_9937(3).jpg

10. www.xsolve.plAgile Software House
Sensor
Source: http://www.azom.com/images/Article_Images/ImageForArticle_12255(5).jpg

11. www.xsolve.plAgile Software House
Sensor

12. www.xsolve.plAgile Software House
React & Redux

13. www.xsolve.plAgile Software House
What React is?

14. www.xsolve.plAgile Software House
What React is NOT?

15. www.xsolve.plAgile Software House
React AngularJS 1.5
One-way data binding One-way / Two-way data binding
Virtual DOM Regular DOM
Model-View (MV) Model-View-Controller (MVC)
JSX Templating HTML Templating
React Native for Mobile Ionic for Mobile
React vs Angular
Source:
https://www.pluralsight.com/guides/front-end-javascript/angular-vs-react-a-side-by-side-comparison

16. www.xsolve.plAgile Software House
React’s philosophy
Components
Props
State

17. www.xsolve.plAgile Software House
import React from 'react';
exports class Greeter extends React.Component {
render() {
return (
<div>Hello {this.props.name} !</div>
)
}
}

18. www.xsolve.plAgile Software House
import React from 'react';
import Greeter from './greeter';
export default class App extends React.Component {
render() {
return (
<div>
<Greeter name="Bob" />
</div>
)
}
}

19. www.xsolve.plAgile Software House
<!-- Result -->
<div>Hello Bob!</div>

20. www.xsolve.plAgile Software House
If React is only
a view...
how do we manage the rest of the
stuff?

21. www.xsolve.plAgile Software House
How can we make it
more organized?
Flux/Redux

22. www.xsolve.plAgile Software House
What is Flux?

23. www.xsolve.plAgile Software House
Source: https://facebook.github.io/flux/docs/in-depth-overview.html#content

24. www.xsolve.plAgile Software House
Source: https://facebook.github.io/flux/docs/in-depth-overview.html#content

25. www.xsolve.plAgile Software House
What is Redux?

26. www.xsolve.plAgile Software House
Redux’s flow - actions and
stuff
Actions
Reducers
Store

27. www.xsolve.plAgile Software House
Source: https://github.com/reactjs/redux/issues/653

28. www.xsolve.plAgile Software House
How does it
cooperate with
React?

29. www.xsolve.plAgile Software House
Thank you!

30. www.xsolve.plAgile Software House
xsolve.pl/career
We’re looking for JavaScript Developers
to join our team in Gliwice and Warsaw.
Interested?