ReactJS: From upside down to right side up!

My talk about how to build a right side up environment in the frontend using the React ecosystem.

Transcript

1. View Slide

2. @pedronauck
   FRONTEND DEVELOPER
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. we technology
   new technologies
   

   View Slide

7. modularity
   performance
   adaptability
   maintainability
   consistency
   work fluid
   }We want
   

   View Slide

8. but startups...
   

   View Slide

9. pray
   to work
   

   View Slide

10. products
    upside down monsters
    

    View Slide

11. how
    build
    to
    right side up
    enva
    

    View Slide

12. backend
    inspiration
    

    View Slide

13. View Slide

14. our environment
    front-end
    

    View Slide

15. checkout admin
    landing
    page
    react projects
    @reusable-modules
    monorepo
    

    View Slide

16. MODULAR STRUCTURE
    shazam basecss components
    frontend project
    domain reicons
    

    View Slide

17. monorepo
    Unified source code repository used
    by an organisation to host as much of
    its code as possible.
    

    View Slide

18. who’s using
    

    View Slide

19. ✓ single lint, build, test and release process
    ✓ easy to coordinate changes across modules
    ✓ single place to report issues
    ✓ code review are easier
    ✓ less management, everything is centralized
    ✓ dependency management
    ✓ cheaper
    pros
    

    View Slide

20. ✓ codebase looks more intimidating
    ✓ repo is bigger in size
    ✓ . . .
    cons
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. packages/project/package.json
    Symbolic Link
    

    View Slide

29. View Slide

30. components
    Our awesome and reusable
    React components
    

    View Slide

31. View Slide

32. View Slide

33. ✓ focus on your components
    ✓ based on stories
    ✓ internal hot reload
    ✓ less configurations
    ✓ easy to maintain
    advantages
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. Gold tip
    #1 use to update data inside stories
    recompose
    

    View Slide

39. A React utility belt for function components
    and higher-order components.
    recompose
    

    View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. domain
    data layer of our projects
    

    View Slide

47. AP I user
    partner
    appointments
    …
    

    View Slide

48. View Slide

49. Predictable state container based on Flux
    One store. Single Source of Truth!
    State is Read-only (modified by action)
    Changes are made with Pure Functions
    

    View Slide

50. View Slide

51. #1 use a duck-based architecture
    

    View Slide

52. ☹
    

    View Slide

53. View Slide

54. View Slide

55. View Slide

56. #2 use redux-actions to handle your ducks
    

    View Slide

57. View Slide

58. View Slide

59. View Slide

60. View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. #3 normalize your entities
    

    View Slide

68. Normalizr takes JSON and a schema
    and replaces nested entities with their
    IDs, gathering all entities in dictionaries.
    

    View Slide

69. turn this...
    

    View Slide

70. View Slide

71. into
    

    View Slide

72. View Slide

73. View Slide

74. View Slide

75. View Slide

76. ✓ work with objects, less array iterations
    ✓ most expressive structure
    advantages
    

    View Slide

77. #4 use one single reducer for your entities
    

    View Slide

78. View Slide

79. View Slide

80. View Slide

81. #5 use redux-ui to manage ui state
    

    View Slide

82. View Slide

83. 
    
    

    View Slide

84. View Slide

85. 
    
    
    

    View Slide

86. View Slide

87. View Slide

88. View Slide

89. View Slide

90. View Slide

91. View Slide

92. View Slide

93. View Slide

94. View Slide

95. 
    ui('App')
    
    ui()
    
    ui()
    {context}
    {context}
    updateUI()
    ui.isSidebarOpened
    {context}
    

    View Slide

96. modular structure
    module based architecture for
    scalable apps
    

    View Slide

97. View Slide

98. View Slide

99. App.js
    

    View Slide

100. View Slide

101. modules/User/index.js
     

     View Slide

102. View Slide

103. View Slide

104. View Slide

105. Application Setup
     react-router, redux, etc
     

     View Slide

106. shazam
     Node module to create and
     manage react apps
     

     View Slide

107. alternatives
     facebookincubator/create-react-app insin/nwb
     

     View Slide

108. and tricks
     webpack tips
     

     View Slide

109. #1 split your config by environment using
     webpack-config
     

     View Slide

110. View Slide

111. webpack.config.js
     

     View Slide

112. webpack/${environment}.js
     

     View Slide

113. shazam.config.js
     

     View Slide

114. webpack/common.js
     

     View Slide

115. #2 use alias to relative paths
     

     View Slide

116. webpack/common.js
     

     View Slide

117. View Slide

118. View Slide

119. #3 use [chunkhash:8] in production bundles
     

     View Slide

120. webpack/development.js
     webpack/production.js
     

     View Slide

121. webpack/development.js
     webpack/production.js
     

     View Slide

122. reicons
     CLI tool to generate React icon
     components based on svg files
     

     View Slide

123. manage
     is boring
     icons
     

     View Slide

124. View Slide

125. ✓ different icons of different sets
     ✓ components to manage svg
     ✓ bundle just our icons
     ✓ easy to update the set
     ✓ build differente sets
     we needed
     

     View Slide

126. we
     DON' T
     needed
     

     View Slide

127. View Slide

128. View Slide

129. View Slide

130. http://github.com/drvem/reicons
     

     View Slide

131. $ npm i -g reicons
     

     View Slide

132. $ reicons -p [] -s images/ -b components/Icons
     Set directory and
     a custom prefix
     The source of your
     icons sets
     Folder to bundle
     your icons
     components
     

     View Slide

133. .
     └── images
     ├── font-awesome
     │ ├── book.svg
     │ ├── credit-card.svg
     │ └── github-logo.svg
     └── icons
     ├── home.svg
     ├── location.svg
     └── search.svg
     

     View Slide

134. $ reicons
     -p font-awesome:fa icons:ic
     -s images/
     -b components/Icons
     

     View Slide

135. View Slide

136. .
     ├── components
     │ └── Icons
     │ ├── Fa
     │ └── Ic
     └── images
     ├── font-awesome
     └── icons
     

     View Slide

137. .
     └── components
     └── Icons
     ├── Fa
     │ ├── Book.js
     │ ├── CreditCard.js
     │ └── GithubLogo.js
     ├── Ic
     │ ├── Home.js
     │ ├── Location.js
     │ └── Search.js
     └── index.js
     

     View Slide

138. Fa/Book.js
     

     View Slide

139. index.js
     

     View Slide

140. View Slide

141. ✓ something simple to implement
     ✓ using across projects
     ✓ easy to onboarding
     we needed
     

     View Slide

142. checkout admin
     landing
     page
     react projects
     @reusable-modules
     monorepo
     

     View Slide

143. modularity
     performance
     adaptability
     maintainability
     consistency
     work fluid
     }We want
     

     View Slide

144. View Slide

145. View Slide