ReactJS: From upside down to right side up!

Transcript

1. None

2. @pedronauck FRONTEND DEVELOPER

3. None
4. None
5. None

6. we technology new technologies

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

8. but startups...

9. pray to work

10. products upside down monsters

11. how build to right side up enva

12. backend inspiration

13. None

14. our environment front-end

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

16. MODULAR STRUCTURE shazam basecss components frontend project domain reicons

17. monorepo Unified source code repository used by an organisation to

    host as much of its code as possible.

18. who’s using

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

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

    size ✓ . . . cons
21. None
22. None
23. None
24. None
25. None
26. None
27. None

28. packages/project/package.json Symbolic Link

29. None

30. components Our awesome and reusable React components

31. None
32. None

33. ✓ focus on your components ✓ based on stories ✓

    internal hot reload ✓ less configurations ✓ easy to maintain advantages
34. None
35. None
36. None
37. None

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

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

    recompose
40. None
41. None
42. None
43. None
44. None
45. None

46. domain data layer of our projects

47. AP I user partner appointments …

48. None

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
50. None

51. #1 use a duck-based architecture

52. ☹

53. None
54. None
55. None

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

57. None
58. None
59. None
60. None
61. None
62. None
63. None
64. None
65. None
66. None

67. #3 normalize your entities

68. Normalizr takes JSON and a schema and replaces nested entities

    with their IDs, gathering all entities in dictionaries.

69. turn this...

70. None

71. into

72. None
73. None
74. None
75. None

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

    structure advantages

77. #4 use one single reducer for your entities

78. None
79. None
80. None

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

82. None

83. <App> <Topbar>

84. None

85. <App> <Topbar> <Sidebar>

86. None
87. None
88. None
89. None
90. None
91. None
92. None
93. None
94. None

95. <App> ui('App') <Sidebar> ui() <Topbar> ui() {context} {context} updateUI() ui.isSidebarOpened

    {context}

96. modular structure module based architecture for scalable apps

97. None
98. None

99. App.js

100. None

101. modules/User/index.js

102. None
103. None
104. None

105. Application Setup react-router, redux, etc

106. shazam Node module to create and manage react apps

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

108. and tricks webpack tips

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

110. None

111. webpack.config.js

112. webpack/${environment}.js

113. shazam.config.js

114. webpack/common.js

115. #2 use alias to relative paths

116. webpack/common.js

117. None
118. None

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

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

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

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

     svg files

123. manage is boring icons

124. None

125. ✓ different icons of different sets ✓ components to manage

     svg ✓ bundle just our icons ✓ easy to update the set ✓ build differente sets we needed

126. we DON' T needed

127. None
128. None
129. None

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

131. $ npm i -g reicons

132. $ reicons -p [<package:prefix>] -s images/ -b components/Icons Set directory

     and a custom prefix The source of your icons sets Folder to bundle your icons components

133. . └── images ├── font-awesome │ ├── book.svg │ ├──

     credit-card.svg │ └── github-logo.svg └── icons ├── home.svg ├── location.svg └── search.svg

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

135. None

136. . ├── components │ └── Icons │ ├── Fa │

     └── Ic └── images ├── font-awesome └── icons

137. . └── components └── Icons ├── Fa │ ├── Book.js

     │ ├── CreditCard.js │ └── GithubLogo.js ├── Ic │ ├── Home.js │ ├── Location.js │ └── Search.js └── index.js

138. Fa/Book.js

139. index.js

140. None

141. ✓ something simple to implement ✓ using across projects ✓

     easy to onboarding we needed

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

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

144. None
145. None