Front End Orlando - Introduction to React.js (2015-03-31)

A basic introduction to React.js, Jest, and Flux.

Transcript

1. Front  End  Orlando:   Introduc0on  to  React.js   2015-­‐03-­‐31   James  Burne?   jtburne?@tribpub.com  
2. Senior  SoEware  Engineer  @  Tribune  Publishing     Full  Stack  Engineer   Ruby  on  Rails   React.js   About  Me   Small  Apps   Tribune  Website  Redevelopment   Backend  Content  Management  System  Redesign  
3. Overview   •  What  is  React.js   •  Building  something   •  Tes0ng  something   •  Unidirec0onal  Data  Flows  (and  Flux)   •  React  Na0ve  
4. What  is  React   I  
5. React  is  a  JavaScript  View  Library   http://facebook.github.io/react/  
6. React  is  “the  ‘V’  in  MVC”  
7. React  is  a  virtual  DOM  
8. React  is  NOT  opinionated  
9. React  is  NOT  a  framework  
10. React  is  a  component  system  
11. React  Design  
12.  components                          
13.  components        composed  into  an  app                  
14.  components        composed  into  an  app              then  re-­‐rendered  on  every  update  
15. re-­‐rendering  on  every  update  is  the   key  design  decision   that  makes  React  awesome  
16. user  interface  is  hard   because   there  is  so  much  state  
17. user  interface  is  hard   because   there  is  so  much  state   UI  elements   design  itera0ons   crazy  environments   mutable  DOM   user  input   anima0on   lots  of  engineers   ajax  calls  
18. “Our  intellectual  powers  are  rather  geared  to  master   sta0c  rela0ons  and  our  powers  to  visualize  processes   evolving  in  0me  are  rela0vely  poorly  developed.  For   that  reason  we  should  do  (as  wise  programmers   aware  of  our  limita0ons)  our  utmost  to  shorten  the   conceptual  gap  between  the  sta0c  program  and  the   dynamic  process,  to  make  the  correspondence   between  the  program  (spread  out  in  text  space)  and   the  process  (spread  out  in  0me)  as  trivial  as  possible”     -­‐  Dijkstra  
19. this  is  how  web  apps  operated  un0l  recently  
20. we  have  libraries   like  backbone,  angular,  and  ember   that  try  to  deal  with  the  changing  state  
21. react  solves  this  by      re-­‐rendering   the  whole  app                        on  every  change  
22. react  components  are  basically   idempotent  func0ons  
23. re-­‐rendering  makes  things  simple  
24. re-­‐rendering  makes  things  simple   displayed  data  is  up-­‐to-­‐date  
25. re-­‐rendering  makes  things  simple   displayed  data  is  up-­‐to-­‐date   no  magical  data  binding  
26. re-­‐rendering  makes  things  simple   displayed  data  is  up-­‐to-­‐date   no  magical  data  binding   no  model  dirty  checking  
27. re-­‐rendering  makes  things  simple   displayed  data  is  up-­‐to-­‐date   no  magical  data  binding   no  model  dirty  checking   no  more  explicit  DOM  opera0ons  
28. alright,  but  what  about  the  problems  
29. alright,  but  what  about  the  problems   scroll  posi0on  
30. alright,  but  what  about  the  problems   scroll  posi0on   data  entry  
31. alright,  but  what  about  the  problems   scroll  posi0on   data  entry   The  Flash  
32. No,  not  this  guy!   The  Flash  is  that  brief  flicker  you  get  when  you  re-­‐render  the  DOM    
33. alright,  but  what  about  the  problems   performance   scroll  posi0on   data  entry   The  Flash  
34. performance  comes  from  the  virtual  dom  
35. it  makes  re-­‐rendering  the  whole  app  fast  
36. and  it  solves  those  other  problems  too  
37. start  
38. render  virtual   DOM   start  
39. render  virtual   DOM   diff   start  
40. render  virtual   DOM   diff   batch  change   DOM   start  
41. render  virtual   DOM   diff   batch  change   DOM   update   start  
42. render  virtual   DOM   diff   batch  change   DOM   update   React  Lifecycle   start  
43. it  is  FAST  because  the  DOM  is  slow  
44. oh,  and  it  has  a  synthe0c  event  system  
45. alright,  so  let’s  see  some  code  already  
46. Give  it  Five  Minutes   https://signalvnoise.com/posts/3124-­‐give-­‐it-­‐five-­‐minutes  
47. “Some  of  this  stuff  flies  in  the  face  of  best   prac0ces,  but  these  are  prac0ces  that  deserve   to  be  challenged.”   -­‐  Pete  Hunt  
48. a  React  app  is  made  up  of   components  
49. Components   •  Are   – idempotent   – reusable   – composable   – testable   •  Combine  DOM  genera0on  and  display  logic  
50. Example  Component       var  ExampleComponent  =  React.createClass({      render:  function()  {          return  <h1>An  Example  Component</h1>;      }   });    
51. The  Controversial  Part   return  <h1>An  Example  Component</h1>;  
52. Wait,  are  we  really  going  to  comingle   markup  with  JavaScript?!?!?!   What  about  Separa0on  of  Concerns?   JSX  
53. What  is  the  goal  of  Separa0on  of  Concerns      
54. What  is  the  goal  of  Separa0on  of  Concerns     High  Cohesion,  Loose  Coupling  
55. Cohesion  is:   “The  degree  to  which  elements  of   a  module  belong  together.”   [Wikipedia](h?p://en.wikipedia.org/wiki/Cohesion_%28computer_science%29)   Quo$ng  Yourdon  &  Constan$ne’s  Structured  Design  book  from  1979  
56. Coupling  is:   “[the]  degree  of  interdependence   between  soEware  modules”   [Wikipedia](h?p://en.wikipedia.org/wiki/Coupling_(computer_programming)  
57. by  their  very  nature   display  logic  and  markup  are  intertwined  
58. display  logic  is  not  model  logic  
59. Keeping  view  logic  and  markup  separate  is   not  separa0on  of  concerns   it  is  really  just  a   separa0on  of  technologies  
60. so,  give  it  five  minutes  and  see  if  you  s0ll  hate  it  
61. component  composi0on  
62. components  are              arranged  in  a  tree      rendered  based  on     props          state  
63. props  are  the  proper0es  passed  in  by  the  parent  
64. they  are  immutable  
65. state  is  internal  to  the  component  
66. React  Best  Prac0ces  101   state  is  only  set  on  the  root  component   parents  pass  props  to  children  
67. I  I   Using  React  
68. Design  Dropped  by.  .  .   they  want  “this  one”  
69. Create  the  Component  Class         Demo1  =  React.createClass({      displayName:  “Demo1”   });  
70. Start  with  Render   render:  function()  {      return  (          <div>              <button  onClick={this.minus}>-­‐</button>              {this.state.value}              <button  onClick={this.plus}>+</button>          </div>      );   }  
71. JSX  Conversion     <button  onClick={this.minus}>-­‐</button>      
72. JSX  Conversion     <button  onClick={this.minus}>-­‐</button>     becomes     React.createElement(      "button",      //  component       )    
73. JSX  Conversion     <button  onClick={this.minus}>-­‐</button>     becomes     React.createElement(      "button",      //  component      {  onClick:  this.minus  },  //  props     )    
74. JSX  Conversion     <button  onClick={this.minus}>-­‐</button>     becomes     React.createElement(      "button",      //  component      {  onClick:  this.minus  },  //  props      "-­‐"          //  children   )    
75. Ini0al  State   //  because  we  used  {this.state.value}     getInitialState:  function()  {      return  {          value:  0      };   }  
76. Event  Handlers     plus:  function()  {      this.setState({  value:  this.state.value  +  1  });   }     minus:  function()  {    this.setState({  value:  this.state.value  -­‐  1  });   }    
77. Add  to  the  DOM   <div  id="app"></div>     <script  src="http://fb.me/react-­‐0.12.2.js">          </script>   <script  src="http://fb.me/JSXTransformer-­‐0.12.2.js">          </script>     <!-­‐-­‐  React.renderComponent();  -­‐-­‐>  
78. Add  to  the  DOM   <script  type="text/jsx">      var  Demo1  =  React.createClass({  ...  });        React.renderComponent(          <Demo1  />,          document.getElementById('app')      );   </script>  
79. injec0ng  the  code  inline  is  not  very  modular   or  testable  
80. there  are  tools  to  help   browserify   webpack   react-­‐rails   browserify-­‐rails  
81. for  a  good  tutorial  on  geqng  react  setup   (with  Rails)   https://reactjsnews.com/setting-­‐up-­‐rails-­‐for-­‐react-­‐and-­‐jest/   warning:  shameless  plug  
82. these  tools  give  us  access  to  node   and  its  package  manager     npm  
83. now  we  write  our  component  as  an   independent  module  
84. Smile.jsx     var  React  =  require('react');     var  Smile  =  React.createClass({  .  .  .  });     module.exports  =  Smile;    
85. Using  That  Component       var  Smile  =  require('./Smile');     React.renderComponent(      <Smile  />,      document.getElementById('app')   );    
86. I   Tes0ng  React       I  I  
87. Jest  is  Facebook’s  solu0on  for  unit  tes0ng  React   http://facebook.github.io/jest/  
88. Jest  is  based  on  Jasmine   it(“should  do  something”,  function()  {});   describe(“a  group  of  tests”,  function()  {});   beforeEach(function()  {});   expect([condition]).toBe([something])  
89. but  it  auto-­‐mocks  CommonJS  modules   (those  require()  statements)   jest.dontMock(‘something’)  
90.    and  it  runs                      from  the  command  line        in  parallel                            via  node.js   npm  test  [optional  pattern]  
91. how  about  another  example  
92. first,  create  a  new  directory        __tests__/  
93.  and  a  file      __tests__/Demo1-­‐test.jsx  
94. Demo1-­‐test.jsx     jest.dontMock('../Demo1');     describe("Demo1",  function()  {      var  React  =  require('react/addons')          ,  TestUtils  =  React.addons.TestUtils          ,  Demo1  =  require('../Demo1')     //  .  .  .     }  
95. Demo1-­‐test.jsx       it("should  default  to  0  with  buttons  for  +/-­‐",      function()  {          var  demo1  =  TestUtils      .renderIntoDocument(<Demo1  />);          expect(demo1.getDOMNode().textContent)      .toBe('-­‐0+');      }   );  
96. Demo1-­‐test.jsx   it("should  increment  the  counter  when          clicking  on  the  +  button",  function()  {      var  demo1  =  TestUtils      .renderIntoDocument(<Demo1  />);      var  plusButton  =  TestUtils    .scryRenderedDOMComponentsWithTag(demo1,  'button’)    .filter(function(component)  {  return        component.getDOMNode().textContent  ===  '+’    })[0];          TestUtils.Simulate.click(plusButton)          expect(demo1.getDOMNode().textContent).toBe('-­‐1+');   });  
97. Jest  API   http://facebook.github.io/jest/docs/api.html#content   dontMock  genMockFunc0on  it/it.only   .not  .toBe/.toEqual        .toBeDefined        .toBeCalled[With]     React  TestU0ls  API   http://facebook.github.io/react/docs/test-­‐utils.html   renderIntoDocument   Simulate.[event]   [scry/find]RenderedDOMComponentWith[Class/Tag/Type]  
98. Mocha   http://mochajs.org/   be?er  repor0ng   fewer  issues  with  auto-­‐mocking   serial  execu0on     Expect.js   https://github.com/Automattic/expect.js   expect,  to.be  
99. V   Unidirec0onal  Dataflow   (and  Flux)   I  
100. how  do  we  share  data  to/from  our  component?  
101. Rethinking  Demo12     propTypes:  {    value:  React.PropTypes.number   },     getDefaultProps:  function()  {      return  {  value:  0  };   },  
102. No  more  state    render:  function()  {          return  (              <div>                  <button  onClick={this.minus}>-­‐</button>                  {this.state  props.value}                  <button  onClick={this.plus}>+</button>              </div>          );      }  
103.  Yay!          
104.  Yay!.  .  .  wait.  .  .          it  is  not  doing  anything  anymore  
105. we  need  to  alert  the  parent  
106. Parent  Component     onChange:  function(newValue)  {          this.setState({  value:  newValue  });   }   render:  function()  {      return  (          <Demo2              value={this.state.value}              onChange={this.onChange}  />      );   }  
107. what  about  components  not  in  our  tree  
108. The  Flux  Architecture  
109. The  Case  For  Flux       “your  data  changes  over  0me”  and  you  “care   about  immediately  reflec0ng  those  changes  in   the  UI”   h?ps://medium.com/@dan_abramov/the-­‐case-­‐for-­‐flux-­‐379b7d1982c6  
110. The  Case  For  Flux         “you  want  to  cache  data  in  memory,  but  it  can   change  while  cached”   h?ps://medium.com/@dan_abramov/the-­‐case-­‐for-­‐flux-­‐379b7d1982c6  
111. The  Case  For  Flux         “your  data  is  rela0onal  and  models  include  and   depend  on  each  other”     h?ps://medium.com/@dan_abramov/the-­‐case-­‐for-­‐flux-­‐379b7d1982c6  
112. The  Case  For  Flux         “the  same  data  is  assembled  from  different   sources  and  can  be  rendered  in  several  places   throughout  the  UI”   h?ps://medium.com/@dan_abramov/the-­‐case-­‐for-­‐flux-­‐379b7d1982c6  
113. Store   View   Dispatcher   Ac0on   Unidirec0onal  Data  Flow  (Flux)  
114. Store   View   Dispatcher   Ac0on   Unidirec0onal  Data  Flow  (Flux)   ex.  fetch   the  user   model  
115. Store   View   Dispatcher   Ac0on   Unidirec0onal  Data  Flow  (Flux)   This  is   where  data   should  be   fetched  
116. Store   View   Dispatcher   Ac0on   Unidirec0onal  Data  Flow  (Flux)   This  is  like  the   model.   users:  [      55586:          {someData}   ]  
117. Store   View   Dispatcher   Ac0on   Unidirec0onal  Data  Flow  (Flux)   Changes  to   the  store   trigger  a   re-­‐render  
118. Ac0on   Store   View   Dispatcher   Ac0on   Unidirec0onal  Data  Flow  (Flux)   Views  trigger   ac0ons  
119. Ac0on   Store   View   Dispatcher   Ac0on   Unidirec0onal  Data  Flow  (Flux)   And  the  cycle   starts  all  over   again  
120. Flux  is  an  architecture,  not  a  library  
121. Flux  Implementa0ons   •  [Reflux](h?ps://github.com/spoike/refluxjs)   •  [Fluxxor](h?p://fluxxor.com/)   •  [Fluxify](h?ps://github.com/arqex/fluxify)   •  [Ambidex]   (h?ps://github.com/appsforar0sts/ambidex)   uses  reflux  
122. reflux  demo   Project  BlueBird  
123. React  Na0ve   V  
124. automa0c  touch  handling  
125. na0ve  components  
126. style  &  layout  
127. React  Na0ve  Demo   thanks  to  Collin  Eberhardt  of  ShinobiControls  
128. Recap   V  I  
129. Objec0ves   •  Learn  the  basics  of  how  to  think  in  React   •  See  some  actual  React  in  Prac0ce   •  Get  a  basic  understanding  of  tes0ng  React   •  Introduc0on  to  the  concept  of  unidirec0onal   dataflow  as  an  “alterna$ve”  to  MVC   •  See  ReactNa0ve   •  Play  with  some  examples  
130. Useful  Resources   •  [ReactJS](h?p://facebook.github.io/react/)   •  [ReactJSConf]   (h?p://conf.reactjs.com/schedule.html)   •  [ReactJSNews](h?ps://reactjsnews.com/)   •  [Immutable.js]   (h?p://facebook.github.io/immutable-­‐js/)   •  [CSS  in  JS]   (h?ps://speakerdeck.com/vjeux/react-­‐css-­‐in-­‐js)  
131. Useful  Resources   •  [Sublime  w/  React]( h?p://www.petethompson.net/blog/js/ 2015/02/25/sublime-­‐text-­‐3-­‐and-­‐modern-­‐js/)   •  [Browserify](h?p://browserify.org/)   •  [webpack](h?p://webpack.github.io/)  
132. More  Useful  Resources   •  [Thinking  in  React]   (h?p://facebook.github.io/react/docs/   thinking-­‐in-­‐react.html)   •  [Egghead.io]   (h?ps://egghead.io/technologies/react)   •  [Khan  Academy]   (h?p://khan.github.io/react-­‐components/)  
133. Contact  Informa0on       Twi?er:  @HurricaneJames   Email:  HurricaneJamesEsq@gmail.com   GitHub:  h?ps://github.com/HurricaneJames