ReactJS: From upside down to right side up!

Af6a12710770ad9a7cfd08c97efd40d3?s=47 Pedro Nauck
November 26, 2016

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.

Af6a12710770ad9a7cfd08c97efd40d3?s=128

Pedro Nauck

November 26, 2016
Tweet

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. None
  53. None
  54. None
  55. #2 use redux-actions to handle your ducks

  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. #3 normalize your entities

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

    with their IDs, gathering all entities in dictionaries.
  68. turn this...

  69. None
  70. into

  71. None
  72. None
  73. None
  74. None
  75. ✓ work with objects, less array iterations ✓ most expressive

    structure advantages
  76. #4 use one single reducer for your entities

  77. None
  78. None
  79. None
  80. #5 use redux-ui to manage ui state

  81. None
  82. <App> <Topbar>

  83. None
  84. <App> <Topbar> <Sidebar>

  85. None
  86. None
  87. None
  88. None
  89. None
  90. None
  91. None
  92. None
  93. None
  94. <App> ui('App') <Sidebar> ui() <Topbar> ui() {context} {context} updateUI() ui.isSidebarOpened

    {context}
  95. modular structure module based architecture for scalable apps

  96. None
  97. None
  98. App.js

  99. None
  100. modules/User/index.js

  101. None
  102. None
  103. None
  104. Application Setup react-router, redux, etc

  105. shazam Node module to create and manage react apps

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

  107. and tricks webpack tips

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

  109. None
  110. webpack.config.js

  111. webpack/${environment}.js

  112. shazam.config.js

  113. webpack/common.js

  114. #2 use alias to relative paths

  115. webpack/common.js

  116. None
  117. None
  118. #3 use [chunkhash:8] in production bundles

  119. webpack/development.js webpack/production.js

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

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

    svg files
  122. manage is boring icons

  123. None
  124. ✓ different icons of different sets ✓ components to manage

    svg ✓ bundle just our icons ✓ easy to update the set ✓ build differente sets we needed
  125. we DON' T needed

  126. None
  127. None
  128. None
  129. http://github.com/drvem/reicons

  130. $ npm i -g reicons

  131. $ 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
  132. . └── images ├── font-awesome │ ├── book.svg │ ├──

    credit-card.svg │ └── github-logo.svg └── icons ├── home.svg ├── location.svg └── search.svg
  133. $ reicons -p font-awesome:fa icons:ic -s images/ -b components/Icons

  134. None
  135. . ├── components │ └── Icons │ ├── Fa │

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

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

  138. index.js

  139. None
  140. ✓ something simple to implement ✓ using across projects ✓

    easy to onboarding we needed
  141. checkout admin landing page react projects @reusable-modules monorepo

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

  143. None
  144. None