Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

xlab #7 - ReactJS & NodeJS

332 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

xlab #7 - ReactJS & NodeJS

  1. 1. www.xsolve.plAgile Software House ReactJS & NodeJS
  2. 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. 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. 4. www.xsolve.plAgile Software House
  5. 5. www.xsolve.plAgile Software House Task-1 NodeJS ES6 Tests Docker Microservices
  6. 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. 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. 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. 9. www.xsolve.plAgile Software House Sensor Source: http://www.azom.com/images/Article_Images/ImageForArticle_9937(3).jpg
  10. 10. www.xsolve.plAgile Software House Sensor Source: http://www.azom.com/images/Article_Images/ImageForArticle_12255(5).jpg
  11. 11. www.xsolve.plAgile Software House Sensor
  12. 12. www.xsolve.plAgile Software House React & Redux
  13. 13. www.xsolve.plAgile Software House What React is?
  14. 14. www.xsolve.plAgile Software House What React is NOT?
  15. 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. 16. www.xsolve.plAgile Software House React’s philosophy Components Props State
  17. 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. 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. 19. www.xsolve.plAgile Software House <!-- Result --> <div>Hello Bob!</div>
  20. 20. www.xsolve.plAgile Software House If React is only a view... how do we manage the rest of the stuff?
  21. 21. www.xsolve.plAgile Software House How can we make it more organized? Flux/Redux
  22. 22. www.xsolve.plAgile Software House What is Flux?
  23. 23. www.xsolve.plAgile Software House Source: https://facebook.github.io/flux/docs/in-depth-overview.html#content
  24. 24. www.xsolve.plAgile Software House Source: https://facebook.github.io/flux/docs/in-depth-overview.html#content
  25. 25. www.xsolve.plAgile Software House What is Redux?
  26. 26. www.xsolve.plAgile Software House Redux’s flow - actions and stuff Actions Reducers Store
  27. 27. www.xsolve.plAgile Software House Source: https://github.com/reactjs/redux/issues/653
  28. 28. www.xsolve.plAgile Software House How does it cooperate with React?
  29. 29. www.xsolve.plAgile Software House Thank you!
  30. 30. www.xsolve.plAgile Software House xsolve.pl/career We’re looking for JavaScript Developers to join our team in Gliwice and Warsaw. Interested?

×