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

2. @pedronauck FRONTEND DEVELOPER
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
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
28. packages/project/package.json Symbolic Link
30. components Our awesome and reusable React components
33. ✓ focus on your components ✓ based on stories ✓ internal hot reload ✓ less configurations ✓ easy to maintain advantages
38. Gold tip #1 use to update data inside stories recompose
39. A React utility belt for function components and higher-order components. recompose
46. domain data layer of our projects
47. AP I user partner appointments …
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
51. #1 use a duck-based architecture
52. ☹
56. #2 use redux-actions to handle your ducks
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...
71. into
76. ✓ work with objects, less array iterations ✓ most expressive structure advantages
77. #4 use one single reducer for your entities
81. #5 use redux-ui to manage ui state
83. <App> <Topbar>
85. <App> <Topbar> <Sidebar>
95. <App> ui('App') <Sidebar> ui() <Topbar> ui() {context} {context} updateUI() ui.isSidebarOpened {context}
96. modular structure module based architecture for scalable apps
99. App.js
101. modules/User/index.js
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
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
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
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
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
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
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