How to build a solid UI

with Angular

1. Atoms

Build smallest UI components

  • Inputs must be very generic: label, title, hidden, disabled, item
  • Outputs must be very generic: clicked, closed, focused
  • No backend models here
  • Goal: maximize reusability

Atom examples

  • Button
  • Input
  • ListItem

2. Molecules

Build UI components using atoms

  • State for UI purposes only
  • The data are given from inputs (no API calls yet)
  • Wire atomic components together to build more complex UI
  • Inputs and Outputs are still very generic
  • Goal: encapsulate UI logic + maximize reusability

Molecule examples

  • SearchBox
  • List
  • TabsView
  • Menu

3. Organisms

Build UI components using molecules

  • State only for UI purposes
  • No API calls yet
  • You start seeing backend models (user, bookings...) in Inputs and Outputs
  • Wire atoms and molecules to build UI for your business
  • Goal: encapsulate complex UI logic

Organism examples

  • UserEditForm
  • BookingList
  • EventCalendar

4. Containers

Add life to organisms!

  • Wrap organisms to make them smart
  • Provide data to organism Inputs: by calling the APIs or linking your state manager
  • React to organism outputs
  • Heavy usage of dependency injection
  • No UI here
  • Goal: add business logic to UI

Container examples

  • <YOUR_ORGANISM>Container

5. Layouts

The skeleton of your page

  • @ViewChild, @ViewChildren and <ng-content> are your best friends here
  • Goal: reuse common layouts, add consistency to your pages

Layout examples

  • TwoColumnsLayout
  • RootLayout (w/ Header and Footer)

6. Pages

Link components to Angular Route

  • The first child is usually a layout
  • They are called by Angular router
  • Goal: wire routes to UI

Page examples

  • /events/overview → EventOverviewPage
  • /users/{id} → EditUserPage

Storybook

to build components "without distractions"

References

Keep in touch

mattian

matitalatina

blog.mattianatali.dev

www.mattianatali.it