application of atomic design

by ryoktg

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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.

Slide 3

Slide 3 text

Confidential 3 ©Showcase Gig O:der Hub

Slide 4

Slide 4 text

Confidential 4 ©Showcase Gig - atomic design - definition - folder structure - atom, molecule - organism - template, page 概要

Slide 5

Slide 5 text

Confidential 5 ©Showcase Gig atomic design (definition) https://bradfrost.com/wp-content/uploads/2013/06/atomic-design.png

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Confidential 8 ©Showcase Gig atomic design (atom, molecule, organism) component granularity general role atom, molecule fine-grained general ui organism coarse-grained specific business

Slide 9

Slide 9 text

Confidential 9 ©Showcase Gig atomic design (atom, molecule 1/4)

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Confidential 13 ©Showcase Gig atomic design (organism, 1/3) organism: - coarse-grained - specific - abstract fine-grained general

Slide 14

Slide 14 text

Slide 15

Slide 15 text

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)

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Confidential 17 ©Showcase Gig Final Made mistakes and learned from them - Pro: deeper understanding of atomic design - Con: cost lots of time