Successfully reported this slideshow.

React js

42

Share

Loading in …3
×
1 of 33
1 of 33

React js

42

Share

Download to read offline

Transcript

  1. 1. React: A Sneak Peak Jai Santhosh UI Engineer @ Flipkart @jaisanth
  2. 2. Meet React. Not yet another JS framework!
  3. 3. Meet React. But just a library for creating user interfaces.
  4. 4. Meet React. Renders your UI and responds to events.
  5. 5. Meet React. a.k.a. The “V” in MVC
  6. 6. Build components, not templates
  7. 7. Build components, not templates Re-render, don’t mutate
  8. 8. Build components, not templates Re-render, don’t mutate Fast Virtual DOM
  9. 9. Build components, not templates • Combine DOM generation and display logic. 9
  10. 10. Build components, not templates • Combine DOM generation and display logic. • Transform data into interface components. 10
  11. 11. Build components, not templates • Combine DOM generation and display logic. • Transform data into interface components. • Data can come from anywhere. 11
  12. 12. Build components, not templates 12
  13. 13. Build components, not templates 13
  14. 14. JSX Allows you to write JS & XML
  15. 15. JSX Allows you to write JS & XML Together!
  16. 16. JSX Don’t need to use it as such
  17. 17. JSX React.DOM.div({}, 'Hello ' + this.props.name)
  18. 18. Re-render, don’t mutate! • Every component has “state” and “props”. 18
  19. 19. Re-render, don’t mutate! • Every component has “state” and “props”. • Acts as an “Immutable DOM”. 19
  20. 20. Re-render, don’t mutate! • Every component has “state” and “props”. • Acts as an “Immutable DOM”. • Re-render the whole app once the state changes. 20
  21. 21. Re-render, don’t mutate! Data is guaranteed to update! 21
  22. 22. Re-render, don’t mutate! Just like the 90’s Full-page refresh!! 22
  23. 23. Fast Virtual DOM Virtual DOM Makes re-rendering on every change fast. 24
  24. 24. Fast Virtual DOM On every update… • React builds a new virtual DOM subtree 25
  25. 25. Fast Virtual DOM On every update… • React builds a new virtual DOM subtree • …diffs it with the old one 26
  26. 26. Fast Virtual DOM On every update… • React builds a new virtual DOM subtree • …diffs it with the old one • …computes the minimal set of DOM mutations and puts them in a queue 27
  27. 27. Fast Virtual DOM On every update… • React builds a new virtual DOM subtree • …diffs it with the old one • …computes the minimal set of DOM mutations and puts them in a queue • …and batch exexutes all updates 28
  28. 28. Fast Virtual DOM none to first • Create Node: <div className="first"><span>A Span</span></div> first to second • Replace attribute: className=“second" className=“first" by • Replace node: Span</span> by <p>A Paragraph</p> <span>A second to none • Remove Node: <div className="second"><p>A Paragraph</p></div> 29
  29. 29. Fast Virtual DOM Virtual DOM is simple and fast 30
  30. 30. http://reactjs.org/ #reactjs on Freenode IRC reactjs on Google Groups
  31. 31. Other helpful links: • http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/ • https://news.ycombinator.com/item?id=6936975 • https://news.ycombinator.com/item?id=6937921 • http://calendar.perfplanet.com/2013/diff/
  32. 32. Thank You!!

Editor's Notes

  • No fb
  • Or: mixing markup and display logic
  • Or: mixing markup and display logic
  • Or: mixing markup and display logic
  • ----- Meeting Notes (9/9/13 12:00) -----
    nowhere in this example is the dom node for count explicitly updated
  • Transcript

    1. 1. React: A Sneak Peak Jai Santhosh UI Engineer @ Flipkart @jaisanth
    2. 2. Meet React. Not yet another JS framework!
    3. 3. Meet React. But just a library for creating user interfaces.
    4. 4. Meet React. Renders your UI and responds to events.
    5. 5. Meet React. a.k.a. The “V” in MVC
    6. 6. Build components, not templates
    7. 7. Build components, not templates Re-render, don’t mutate
    8. 8. Build components, not templates Re-render, don’t mutate Fast Virtual DOM
    9. 9. Build components, not templates • Combine DOM generation and display logic. 9
    10. 10. Build components, not templates • Combine DOM generation and display logic. • Transform data into interface components. 10
    11. 11. Build components, not templates • Combine DOM generation and display logic. • Transform data into interface components. • Data can come from anywhere. 11
    12. 12. Build components, not templates 12
    13. 13. Build components, not templates 13
    14. 14. JSX Allows you to write JS & XML
    15. 15. JSX Allows you to write JS & XML Together!
    16. 16. JSX Don’t need to use it as such
    17. 17. JSX React.DOM.div({}, 'Hello ' + this.props.name)
    18. 18. Re-render, don’t mutate! • Every component has “state” and “props”. 18
    19. 19. Re-render, don’t mutate! • Every component has “state” and “props”. • Acts as an “Immutable DOM”. 19
    20. 20. Re-render, don’t mutate! • Every component has “state” and “props”. • Acts as an “Immutable DOM”. • Re-render the whole app once the state changes. 20
    21. 21. Re-render, don’t mutate! Data is guaranteed to update! 21
    22. 22. Re-render, don’t mutate! Just like the 90’s Full-page refresh!! 22
    23. 23. Fast Virtual DOM Virtual DOM Makes re-rendering on every change fast. 24
    24. 24. Fast Virtual DOM On every update… • React builds a new virtual DOM subtree 25
    25. 25. Fast Virtual DOM On every update… • React builds a new virtual DOM subtree • …diffs it with the old one 26
    26. 26. Fast Virtual DOM On every update… • React builds a new virtual DOM subtree • …diffs it with the old one • …computes the minimal set of DOM mutations and puts them in a queue 27
    27. 27. Fast Virtual DOM On every update… • React builds a new virtual DOM subtree • …diffs it with the old one • …computes the minimal set of DOM mutations and puts them in a queue • …and batch exexutes all updates 28
    28. 28. Fast Virtual DOM none to first • Create Node: <div className="first"><span>A Span</span></div> first to second • Replace attribute: className=“second" className=“first" by • Replace node: Span</span> by <p>A Paragraph</p> <span>A second to none • Remove Node: <div className="second"><p>A Paragraph</p></div> 29
    29. 29. Fast Virtual DOM Virtual DOM is simple and fast 30
    30. 30. http://reactjs.org/ #reactjs on Freenode IRC reactjs on Google Groups
    31. 31. Other helpful links: • http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/ • https://news.ycombinator.com/item?id=6936975 • https://news.ycombinator.com/item?id=6937921 • http://calendar.perfplanet.com/2013/diff/
    32. 32. Thank You!!

    Editor's Notes

  • No fb
  • Or: mixing markup and display logic
  • Or: mixing markup and display logic
  • Or: mixing markup and display logic
  • ----- Meeting Notes (9/9/13 12:00) -----
    nowhere in this example is the dom node for count explicitly updated
  • More Related Content

    Related Books

    Free with a 30 day trial from Scribd

    See all

    ×