View
164
Download
1
Category
Preview:
Citation preview
www.xsolve.plAgile Software House
ReactJS & NodeJS
www.xsolve.plAgile Software House
10:15 Who we are10:30 Configuration - Docker, NodeJS, ReactJS, Firebase11:00 NodeJS + Laser dust sensor SEN017713:30 Lunch14:00 ReactJS14:45 Our experience with SEN0177 15:00 Q&A
Agenda
www.xsolve.plAgile Software House
Who we areKrzysztof Sopa Senior Front-end Developer
Krzysztof Woliński Front-end Developer
Robert Kasza Front-end Developer
www.xsolve.plAgile Software House
www.xsolve.plAgile Software House
Task-1NodeJS
ES6
Tests
Docker
Microservices
www.xsolve.plAgile Software House
ES6http://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
www.xsolve.plAgile Software House
SensorIntroductionPM2.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.
www.xsolve.plAgile Software House
SensorHow 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
www.xsolve.plAgile Software House
Sensor
Source: http://www.azom.com/images/Article_Images/ImageForArticle_9937(3).jpg
www.xsolve.plAgile Software House
Sensor
Source: http://www.azom.com/images/Article_Images/ImageForArticle_12255(5).jpg
www.xsolve.plAgile Software House
Sensor
www.xsolve.plAgile Software House
React & Redux
www.xsolve.plAgile Software House
What React is?
www.xsolve.plAgile Software House
What React is NOT?
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
www.xsolve.plAgile Software House
React’s philosophyComponents
Props
State
www.xsolve.plAgile Software House
import React from 'react';
exports class Greeter extends React.Component {
render() {
return (
<div>Hello {this.props.name} !</div>
)
}
}
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>
)
}
}
www.xsolve.plAgile Software House
<!-- Result -->
<div>Hello Bob!</div>
www.xsolve.plAgile Software House
If React is onlya view...how do we manage the rest of the stuff?
www.xsolve.plAgile Software House
How can we make it more organized?Flux/Redux
www.xsolve.plAgile Software House
What is Flux?
www.xsolve.plAgile Software House
Source: https://facebook.github.io/flux/docs/in-depth-overview.html#content
www.xsolve.plAgile Software House
Source: https://facebook.github.io/flux/docs/in-depth-overview.html#content
www.xsolve.plAgile Software House
What is Redux?
www.xsolve.plAgile Software House
Redux’s flow - actions and stuffActionsReducersStore
www.xsolve.plAgile Software House
Source: https://github.com/reactjs/redux/issues/653
www.xsolve.plAgile Software House
How does it cooperate with React?
www.xsolve.plAgile Software House
Thank you!
www.xsolve.plAgile Software House
xsolve.pl/career
We’re looking for JavaScript Developers to join our team in Gliwice and Warsaw.
Interested?
Recommended