Upgrade to Pro — share decks privately, control downloads, hide ads and more …

application of atomic design

4e38fe9db779d6d3f4bf7320c95dfd04?s=47 ryoktg
November 18, 2021
67

application of atomic design

personal thinking about atom, molecule, organism after applying atomic design to o:der hub project which is a management web project to o:der platform

4e38fe9db779d6d3f4bf7320c95dfd04?s=128

ryoktg

November 18, 2021
Tweet

Transcript

  1. Confidential atomic design & application to work 2021-11-18

  2. Confidential 2 ©Showcase Gig Self introduction - I’m Ryo Ketsu,

    like vim and functional programming - Was Java engineer, started to use React since last year during development of O:der Platform - Look into babel, webpack to resolve AOP problem in js elegantly.
  3. Confidential 3 ©Showcase Gig O:der Hub

  4. Confidential 4 ©Showcase Gig - atomic design - definition -

    folder structure - atom, molecule - organism - template, page 概要
  5. Confidential 5 ©Showcase Gig atomic design (definition) https://bradfrost.com/wp-content/uploads/2013/06/atomic-design.png

  6. Confidential 6 ©Showcase Gig atomic design (folder structure 1/2) 理想:

    ├── src │ ├── atoms │ │ ├── checkbox │ │ ├── 他のatomなど │ ├── molecules │ ├── organisms │ ├── templates │ ├── pages 現状: ├── src │ ├── atoms │ ├── ... │ ├── modules │ ├── router │ ├── permission │ ├── ... UI type (data) function (algorithm) Relationship between UI, data and algorithm component = ui + data + algorithm (high cohesion) Better to put them together
  7. Confidential 7 ©Showcase Gig atomic design (folder structure 2/2) -

    Lack of experience of atomic design - Coded o:der hub by old experience - atomic design is mature - Be careful to add new concept
  8. Confidential 8 ©Showcase Gig atomic design (atom, molecule, organism) component

    granularity general role atom, molecule fine-grained general ui organism coarse-grained specific business
  9. Confidential 9 ©Showcase Gig atomic design (atom, molecule 1/4)

  10. Confidential 10 ©Showcase Gig atomic design (atom, molecule 2/4)

  11. Confidential 11 ©Showcase Gig atomic design (atom, molecule 3/4)

  12. Confidential 12 ©Showcase Gig atomic design (atom, molecule 4/4) atomic

    design: - Composition is important - Without fine-grained component, complex composition is nearly impossible. functional programming: - i.e. complex function: f = g . h . i . j (. is function composition) - As long as g, h, i, j are simple, both unit test and maintenance will be simple. then - Composition is important for both atomic design and functional programming - Composition is important for solid principle. o of solid (open closed principle) - extension ok, modification ng
  13. Confidential 13 ©Showcase Gig atomic design (organism, 1/3) organism: -

    coarse-grained - specific - abstract fine-grained general
  14. Confidential 14 ©Showcase Gig atomic design (organism, 2/3)

  15. Confidential 15 ©Showcase Gig atomic design (organism, 3/3) component role

    objective organism Business Hide details, provide abstraction atom, molecule UI UI variety If atom and molecule clarifies OCP somewhat then organism will interpret SRP(single responsibility principle) to some extent - self explanatory - do one thing (business level)
  16. Confidential 16 ©Showcase Gig atomic design (template, page) Separate page

    by folder ├── src │ ├── ... │ ├── pages │ │ ├── home │ │ ├── account │ │ ├── enterprise near future: - Monorepo, micro frontend - Suspense for lazy loading
  17. Confidential 17 ©Showcase Gig Final Made mistakes and learned from

    them - Pro: deeper understanding of atomic design - Con: cost lots of time
  18. Confidential 18 ©Showcase Gig Thank you !