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.

React.js in real world apps.

5,709 views

Published on

The #webconf15 presentation about React.js, Flux and the tools (webpack, npm, sass, ....)

Published in: Software
  • Dating for everyone is here: ❤❤❤ http://bit.ly/2F90ZZC ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ♥♥♥ http://bit.ly/2F90ZZC ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

React.js in real world apps.

  1. 1. React.js @emadb This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
  2. 2. History of web development…
  3. 3. MV(something) in the browser
  4. 4. Enterprise Javascript
  5. 5. Quiz time!
  6. 6. What’s the difference between Service, Factory, Provider?
  7. 7. UNLEARN EVERYTHING @michelebertoli
  8. 8. var HelloWorld = React.createClass({ render: function() { return ( <h1> Hello world </h1> ); } }); React.render(<HelloWorld />,
 document.body);
  9. 9. Whooot? • Markup and behaviour • Separation of concerns • Template language? • Components • JSX syntax
  10. 10. var HelloWorld = React.createClass({ displayName: "HelloWorld", render: function() { return React.createElement("h1",
 null, "Hello World"); } }); React.render( React.createElement(HelloWorld, null), document.body);
  11. 11. COMPONENTS
  12. 12. render Every time the state change the component render itself
  13. 13. DOM is slow Javascript that access to the DOM is slow console.dir(document.createElement('div')); A DIV contains about 135 first level properties/function (700 on second level).
  14. 14. Virtual DOM • Our code act on a fake DOM (virtual dom) • React.js take care of keep virtual DOM and real DOM synchronised • Every ReactElement is a light, stateless, immutable, virtual representation of a DOM Element • A virtual DOM div element contains only 6 properties.
  15. 15. Why I like react so much • Easy to learn, easy to use • True reusable components (1 single file per component) • Functional approach • Human error messages • Active community
  16. 16. I said “Easy to learn!” Less than 1 hour to learn everything you need to be productive. Challenge
  17. 17. How I use it
  18. 18. Server side • Node.js Express api • MongoDb/Mongoose • Passport • Mocha/Chai
  19. 19. Client side Npm Webpack Hot-reload Babel.js Eslint LibSass
  20. 20. npm var React = require(‘react’) $ npm install react —save import React from ‘react’
  21. 21. Everything you need is in your package.json
  22. 22. • A transpiler • Converts ES6 javascript to “old” ES5. • Compiles JSX files to plain js.
  23. 23. Webpack Bundles javascript, css, sass, fonts and images with their dependencies into assets
  24. 24. Superagent Super Agent is light-weight progressive ajax API crafted for flexibility, readability, and a low learning curve after being frustrated with many of the existing request APIs. It also works with Node.js!
  25. 25. Flux
  26. 26. Flux:Actions ActionCreatorReact View Dispatcher Action API
  27. 27. Flux: Dispatcher Store Action Dispatcher Store Store
  28. 28. Flux: Store Store React View Dispatcher Change event Request new state
  29. 29. Few more things… • Server side rendering • Redux • Relay
  30. 30. Thank you! Emanuele DelBono
 @emadb https://github.com/emadb/spot-react

×