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