xlab #7 - ReactJS & NodeJS

www.xsolve.plAgile Software House
ReactJS & NodeJS

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

Who we are
Krzysztof Sopa Senior Front-end Developer
Krzysztof Woliński Front-end Developer
Robert Kasza Front-end Developer

Task-1
NodeJS
ES6
Tests
Docker
Microservices

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

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.

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

Sensor
Source: http://www.azom.com/images/Article_Images/ImageForArticle_9937(3).jpg

Sensor
Source: http://www.azom.com/images/Article_Images/ImageForArticle_12255(5).jpg

Sensor

React & Redux

What React is?

What React is NOT?

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

React’s philosophy
Components
Props
State

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

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

<div>Hello Bob!</div>

If React is only
a view...
how do we manage the rest of the
stuff?

How can we make it
more organized?
Flux/Redux

What is Flux?

Source: https://facebook.github.io/flux/docs/in-depth-overview.html#content

What is Redux?

Redux’s flow - actions and
stuff
Actions
Reducers
Store

Source: https://github.com/reactjs/redux/issues/653

How does it
cooperate with
React?

Thank you!

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

xlab #7 - ReactJS & NodeJS

More Related Content

What's hot

Viewers also liked

Similar to xlab #7 - ReactJS & NodeJS

More from XSolve

Recently uploaded

xlab #7 - ReactJS & NodeJS