Atomic Design Software Architecture Illustrated with Angular 2
summary
Shows how to implement Atomic Design in Angular 2 by mapping UI parts to atoms, molecules, organisms and templates, scaffolding directory structure with Angular generators, and composing small components (e.g., checkbox + label molecules inside organism wrappers) into a settings demo that compiles to a single bundled JS file. Describes practical breakpoints, cautions that real projects can create 20–40 CSS modules, recommends a module-per-component folder structure, and points to living styleguide tools (KSS/styleguide generators) for documenting and testing the result.
AI-written summary · about
chapters (15)
- 0:00Welcome
- 2:55Atomic Design goals
- 6:54Naming and structure
- 9:28Software structure
- 12:18Angular 2 example
- 13:43Settings block example
- 16:59Project setup and components
- 20:19Label and checkbox
- 22:48Double-label component
- 24:40Settings block organism
- 25:44Templates and routing
- 27:56Summary and benefits
- 29:02Living Style Guides
- 31:20Live demo: SC5 Style Guide
- 35:23Q&A
related talks
32mAtomic Design Theory in Practice
24mAtomic Design : A recipe for success
30mAtomic Design: Breaking Up is Hard to Do
44mAtomic Design and Storybook to Boost Frontend Dev Productivity
28mBetween Design and Implementation in Atomic Design
37mIs Atomic Design Dead?
28mFrom Scratch to Screen: The Art of Component Design in Angular
27mAngular Architecture: From Patterns to Implementation