Skip to the content.
1. Problem Statement
- Non Scalable
- Tightly Coupled
- Difficult to write Unit Test
- Performance Issues
2. Exploring the Solution
- Understanding Frontend ecosystem
- Whats Common?
- All Frameworks have evolved to component system
- All Frameworks use some sort of state management
- CSS Frameworks have Matured
3. Segregation through UI and UX
- UI and UX Designer
- 4 UI and UX Developer
- 5 UI and UX Enterprise
6. Atomic Design
- Atoms
- Description: Building block of elements
- Responibility: Single Purpose Component
- Molecules
- description: Group of atoms
- Responsibility: Serve iterable content
- Skeletons
- desciption: Basic Layout and loading components
- responsibility: Provides UX during loading state
- Organisms
- description: Molecule used within Template Container
- responsibility: provides CRUD operation interactivity to application
- Templates
- description: Layout component with organisms
- Provides responsiveness to the UI
- Pages
- description: Proves a function page to website or app
- routes and connects to app state to organisms via containers
7. Basic State Management
- Basic State management image
- Logo of redux, pinia and ngrx
8. UI Server and State Terminology
9. Development Process
- slides to showcase steps of development
- 10 slides to showcase steps of development
- 11 slides to showcase steps of development
- 12 slides to showcase steps of development
13. Solution and Benefits
- Scalable
- Modular
- Easy Performance Enhancement via Component
- Clean and coverable unit test mechanism
- Managable UI upgrades
- Work only on application logic. 90% code can be auto generated
14. Thank you