React js
Upcoming SlideShare
Loading in...5
×
 

React js

on

  • 4,246 views

 

Statistics

Views

Total Views
4,246
Views on SlideShare
3,733
Embed Views
513

Actions

Likes
12
Downloads
17
Comments
2

5 Embeds 513

http://jaisanth.com 431
https://twitter.com 46
http://127.0.0.1 32
http://plus.url.google.com 3
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • No fb <br />
  • Or: mixing markup and display logic <br />
  • Or: mixing markup and display logic <br />
  • Or: mixing markup and display logic <br />
  • ----- Meeting Notes (9/9/13 12:00) ----- <br /> nowhere in this example is the dom node for count explicitly updated <br />

React js React js Presentation Transcript

  • React: A Sneak Peak Jai Santhosh UI Engineer @ Flipkart @jaisanth
  • Meet React. Not yet another JS framework!
  • Meet React. But just a library for creating user interfaces.
  • Meet React. Renders your UI and responds to events.
  • Meet React. a.k.a. The “V” in MVC
  • Build components, not templates
  • Build components, not templates Re-render, don’t mutate
  • Build components, not templates Re-render, don’t mutate Fast Virtual DOM
  • Build components, not templates • Combine DOM generation and display logic. 9
  • Build components, not templates • Combine DOM generation and display logic. • Transform data into interface components. 10
  • Build components, not templates • Combine DOM generation and display logic. • Transform data into interface components. • Data can come from anywhere. 11
  • Build components, not templates 12
  • Build components, not templates 13
  • JSX Allows you to write JS & XML
  • JSX Allows you to write JS & XML Together!
  • JSX Don’t need to use it as such
  • JSX React.DOM.div({}, 'Hello ' + this.props.name)
  • Re-render, don’t mutate! • Every component has “state” and “props”. 18
  • Re-render, don’t mutate! • Every component has “state” and “props”. • Acts as an “Immutable DOM”. 19
  • 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
  • Re-render, don’t mutate! Data is guaranteed to update! 21
  • Re-render, don’t mutate! Just like the 90’s Full-page refresh!! 22
  • Fast Virtual DOM Virtual DOM Makes re-rendering on every change fast. 24
  • Fast Virtual DOM On every update… • React builds a new virtual DOM subtree 25
  • Fast Virtual DOM On every update… • React builds a new virtual DOM subtree • …diffs it with the old one 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
  • 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
  • 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
  • Fast Virtual DOM Virtual DOM is simple and fast 30
  • http://reactjs.org/ #reactjs on Freenode IRC reactjs on Google Groups
  • 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/
  • Thank You!!