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

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 !