React: Learn once, write everywhere

Transcript

9. Arthur  Debert
11. • Self-­‐contained,  concern-­‐specific   building  blocks • Allows  a  “divide  and  conquer”   approach  where  no  particular  part   needs  be  especially  complex Componentization
15. <TodoApp>
16. <Footer>
17. <TodoItem>
22. • Requires  compilation  /   transpilation  step • It’s  plain  javascript  -­‐ It  doesn't  alter   the  language  semantics.
24. • It’s  plain  javascript  -­‐ It  doesn't  alter   the  language  semantics. • XML  is  great  for  representing  UIs  in   element  trees  with  attributes. • It’s  more  concise  and  easier  to   visualise  the  structure  of  your   application.
26. • Templates  encourage  a  poor   separation  of  concerns • Display  logic  and  markup  are   inevitably  tied  together.  They’re   highly  cohesive. • Keeping  components  small  and   single-­‐purposed  lead  to  separation   of  concerns
36. ~2004 Hybrid ~2010 Single Page Application 1994+ Server  Driven
37. ~2004 Hybrid ~2010 Single Page Application 1994+ Server  Driven
38. ~2004 Hybrid ~2010 Single Page Application 1994+ Server  Driven
39. ~2004 Hybrid ~2010 Single Page Application 1994+ Server  Driven
40. ~2004 Hybrid ~2010 Single Page Application 1994+ Server  Driven
44. • Every  time  state  is  updated,  it  is   guaranteed  to  be  up-­‐to-­‐date. • No  magical  data  binding. • No  model  dirty  checking • No  more  explicit  DOM  operations  – everything  is  declarative. Just  Render  the  State.  Every  Time.
49. In-­‐Memory  lightweight representation of the DOM In-­‐Memory  lightweight representation of the DOM On  Every  Update: • React  builds  a  new  virtual  dom   subtree • Diffs  the  new  tree  with  the  old  one • Computes  the  minimal  set  of  DOM   operations • Batch  executes  all  updates