React.js for WordPress Developers

Transcript

1. N I KO L AY B A C H I Y S K I , A U TO M AT T I C , W O R D C A M P H E L S I N K I , A P R I L 1 6 , 2 0 1 6
   

   View Slide

2. View Slide

3. A U TO M AT T I C
   

   View Slide

4. A U TO M AT T I C
   E X T R A P O L AT E . M E
   

   View Slide

5. A U TO M AT T I C
   E X T R A P O L AT E . M E
   @ N I KO L AY B
   

   View Slide

6. R E S T
   
   A P I
   

   View Slide

7. R E S T
   
   A P I
   CALYPSO
   

   View Slide

8. R E S T A P I
   
   ↓
   
   S I N G L E - PA G E A P P S
   

   View Slide

9. W H Y ?
   

   View Slide

10. View Slide

11. FA S T E R
    

    View Slide

12. View Slide

13. M O R E
    E N G A G I N G
    

    View Slide

14. View Slide

15. View Slide

16. C H A N G E
    L E T ' S TA L K A B O U T
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. S TAT E
    L E T ' S TA L K A B O U T
    

    View Slide

24. View Slide

25. View Slide

26. View Slide

27. C L A S S I C
    V S .
    S I N G L E - PA G E A P P S
    

    View Slide

28. C L A S S I C
    

    View Slide

29. View Slide

30. View Slide

31. C H A N G E 㱺 R E F R E S H
    C L A S S I C
    

    View Slide

32. C H A N G E 㱺
    S I N G L E - PA G E
    

    View Slide

33. C H A N G E 㱺
    S I N G L E - PA G E
    

    View Slide

34. View Slide

35. View Slide

36. U I L I B R A RY
    

    View Slide

37. N OT A F R A M E W O R K
    

    View Slide

38. U I L I B R A RY
    

    View Slide

39. const Post = React.createClass( {
    render() {
    return (
    
    
    { this.props.post.content }
    
    
    
    );
    }
    } );
    

    View Slide

40. const Post = React.createClass( {
    render() {
    return (
    
    
    { this.props.post.content }
    
    
    
    );
    }
    } );
    

    View Slide

41. const Post = React.createClass( {
    render() {
    return (
    
    
    { this.props.post.content }
    
    
    
    );
    }
    } );
    J SX
    

    View Slide

42. const Post = React.createClass( {
    function render() {
    return (
    React.DOM.div(
    {className: 'post'},
    [ React.DOM.p(
    null,
    this.props.post.content
    ),
    PostMeta( {post: this.props.post} )
    );
    );
    }
    } );
    

    View Slide

43. const Post = React.createClass( {
    render() {
    return (
    
    
    { this.props.post.content }
    
    
    
    );
    }
    } );
    

    View Slide

44. const PostMeta = React.createClass( {
    …
    } );
    

    View Slide

45. const Post = React.createClass( {
    render() {
    return (
    
    
    { this.props.post.content }
    
    
    
    );
    }
    } );
    

    View Slide

46. const PostMeta = React.createClass( {
    getInitialState() {
    return { hidden: true };
    },
    onToggle() {
    this.setState( { hidden: ! this.state.hidden } );
    },
    render() {
    return (
    
    { this.props.post.author }
    
    { this.state.hidden ? 'More' : 'Hide' }
    
    ( this.state.hidden ?
    …extra meta… :
    null
    )
    
    );
    }
    } );
    

    View Slide

47. const PostMeta = React.createClass( {
    getInitialState() {
    return { hidden: true };
    },
    onToggle() {
    this.setState( { hidden: ! this.state.hidden } );
    },
    render() {
    return (
    
    { this.props.post.author }
    
    { this.state.hidden ? 'More' : 'Hide' }
    
    ( this.state.hidden ?
    …extra meta… :
    null
    )
    
    );
    }
    } );
    

    View Slide

48. const PostMeta = React.createClass( {
    getInitialState() {
    return { hidden: true };
    },
    onToggle() {
    this.setState( { hidden: ! this.state.hidden } );
    },
    render() {
    return (
    
    { this.props.post.author }
    
    { this.state.hidden ? 'More' : 'Hide' }
    
    ( this.state.hidden ?
    …extra meta… :
    null
    )
    
    );
    }
    } );
    

    View Slide

49. const PostMeta = React.createClass( {
    getInitialState() {
    return { hidden: true };
    },
    onToggle() {
    this.setState( { hidden: ! this.state.hidden } );
    },
    render() {
    return (
    
    { this.props.post.author }
    
    { this.state.hidden ? 'More' : 'Hide' }
    
    ( this.state.hidden ?
    …extra meta… :
    null
    )
    
    );
    }
    } );
    

    View Slide

50. const PostMeta = React.createClass( {
    getInitialState() {
    return { hidden: true };
    },
    onToggle() {
    this.setState( { hidden: ! this.state.hidden } );
    },
    render() {
    return (
    
    { this.props.post.author }
    
    { this.state.hidden ? 'More' : 'Hide' }
    
    ( this.state.hidden ?
    …extra meta… :
    null
    )
    
    );
    }
    } );
    R E - R E N D E RS
    

    View Slide

51. C O M P O N E N T S
    L E T ' S TA L K A B I T M O R E A B O U T
    

    View Slide

52. C O M P O S A B L E
    

    View Slide

53. 
    
    
    Howdy, { this.props.user.nickname }
    
    
    
    

    View Slide

54. B U I L D I N G B LO C KS O F
    
    O U R A P P L I C AT I O N
    

    View Slide

55. 
    
    
    
    
    …
    
    
    …
    
    …
    
    

    View Slide

56. const Post = React.createClass( {
    …
    
    { this.props.post.content}
    
    
    …
    

    View Slide

57. View Slide

58. T E S TA B L E
    

    View Slide

59. P R E V E N T S XS S
    

    View Slide

60. { this.props.content }
    
    <img src="javascript:alert('XSS');">
    

    View Slide

61. 
    

    View Slide

62. N OT T E M P L AT E S
    

    View Slide

63. 
    {{#each posts}}
    
    {{#if author}}
    
    {{/each}}
    {{^posts}}
    Not Found
    {{/posts}}
    
    

    View Slide

64. R E U S A B L E
    

    View Slide

65. 
    
    …
    
    

    View Slide

66. 
    
    …
    
    

    View Slide

67. AV ATA R = I M G + H O V E R J S
    

    View Slide

68. W A I T!
    

    View Slide

69. K E E P LO G I C A N D M A R K U P …
    A P O P U L A R B E S T P R A C T I C E S A Y S …
    

    View Slide

70. … S E PA R AT E !
    

    View Slide

71. S E PA R AT I O N O F C O N C E R N S
    
    I S G O O D, R I G H T ?
    

    View Slide

72. W H E N D O W E N E E D A N E V E N T H A N D L E R
    W I T H O U T T H E D O M E L E M E N T I T I S B O U N D TO ?
    

    View Slide

73. W H E N D O W E N E E D A N E V E N T H A N D L E R
    W I T H O U T T H E D O M E L E M E N T I T I S B O U N D TO ?
    onClick()
    
    

    View Slide

74. W H E N D O W E N E E D A D O M E L E M E N T W I T H O U T
    T H E E V E N T H A N D L E R S F O R I T S A C T I O N S ?
    onClick()
    
    

    View Slide

75. H TM L
    

    View Slide

76. D I S P L AY LO G I C
    

    View Slide

77. T H E S A M E
    C O N C E R N
    

    View Slide

78. H TM L
    J S
    

    View Slide

79. H TM L
    

    View Slide

80. D I S P L AY LO G I C
    

    View Slide

81. T H E S A M E
    C O N C E R N
    

    View Slide

82. View Slide

83. View Slide

84. View Slide

85. R E - R E N D E R I N G
    

    View Slide

86. View Slide

87. View Slide

88. View Slide

89. View Slide

90. V I R T U A L D O M
    

    View Slide

91. 0 . R U N r e n d e r ( )
    O N E V E RY U P D A T E
    

    View Slide

92. 1 . D I F F W I T H P R E V I O U S T R E E
    O N E V E RY U P D A T E
    

    View Slide

93. http://calendar.perfplanet.com/2013/diff/
    

    View Slide

94. 2 . CO M P U T E M I N I M U M S E T
    O F D O M C H A N G E S
    O N E V E RY U P D A T E
    

    View Slide

95. 3 . B ATC H - E X E C U T E A L L
    
    D O M U P D AT E S
    O N E V E RY U P D A T E
    

    View Slide

96. V I R T U A L D O M :
    
    N OT O N LY S P E E D!
    

    View Slide

97. S E R V E R-S I D E
    R E N D E R I N G
    

    View Slide

98. S V G , V M L ,
    C A N V A S
    

    View Slide

99. R U N N I N G I N A
    W E B W O R K E R
    

    View Slide

100. D E C L A R AT I V E
     

     View Slide

101. View Slide

102. View Slide

103. sample
     

     View Slide

104. M A G I C!
     

     View Slide

105. View Slide

106. render() {
     return (
     
     { this.props.post.author }
     
     { this.state.hidden ? 'More' : 'Hide' }
     
     ( this.state.hidden ?
     …extra meta… :
     null
     )
     
     );
     }
     

     View Slide

107. render() {
     return (
     
     { this.props.post.author }
     
     { this.state.hidden ? 'More' : 'Hide' }
     
     ( this.state.hidden ?
     …extra meta… :
     null
     )
     
     );
     }
     

     View Slide

108. View Slide

109. View Slide

110. RO U T E R + S TAT E
     http://redux.js.org
     https://github.com/reactjs/react-router
     https://egghead.io
     

     View Slide

111. N OT A F R A M E W O R K
     

     View Slide

112. A RC H I T E C T U R E
     

     View Slide

113. http:/
     /github.com/Automattic/wp-calypso
     

     View Slide

114. L E T ' S C H AT
     

     View Slide

115. S U M M A RY
     

     View Slide

116. C O M P O N E N T S ,
     
     N OT T E M P L AT E S
     

     View Slide

117. R E - R E N D E R ,
     
     D O N ' T TO U C H
     T H E D O M
     

     View Slide

118. V I R T U A L D O M
     
     I S S I M P L E ,
     FA S T, F U N
     L E T ' S TA L K A B O U T
     

     View Slide

119. C O N T R I B U TO R D AY!
     

     View Slide

120. Q U E S T I O N S ?
     
     @ N I KO L AY B
     

     View Slide