xlab #7 - reactjs & nodejs

www.xsolve.plAgile Software House

ReactJS & NodeJS


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


Who we areKrzysztof Sopa Senior Front-end Developer

Krzysztof Woliński Front-end Developer

Robert Kasza Front-end Developer


Task-1NodeJS

ES6

Tests

Docker

Microservices


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

http://es6-features.org/#StringInterpolation

http://es6-features.org/#StringInterpolation












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.


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


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 philosophyComponents

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 onlya 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 stuffActionsReducersStore


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?

http://www.xsolve.pl/career/

http://www.xsolve.pl/career/