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

application of atomic design

ryoktg
November 18, 2021
190

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

ryoktg

November 18, 2021
Tweet

Transcript

  1. 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.
  2. Confidential 4 ©Showcase Gig - atomic design - definition -

    folder structure - atom, molecule - organism - template, page 概要
  3. 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
  4. 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
  5. Confidential 8 ©Showcase Gig atomic design (atom, molecule, organism) component

    granularity general role atom, molecule fine-grained general ui organism coarse-grained specific business
  6. 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
  7. Confidential 13 ©Showcase Gig atomic design (organism, 1/3) organism: -

    coarse-grained - specific - abstract fine-grained general
  8. 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)
  9. 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
  10. Confidential 17 ©Showcase Gig Final Made mistakes and learned from

    them - Pro: deeper understanding of atomic design - Con: cost lots of time