mat3e / js-arch

JS Clean Architecture: folder-by-feature, MVC, APIs at the top

JS Clean Architecture

My tech talk, example slides

Context

• Focuses on React as this is the most popular solution looking at weekly npm downloads
• It was like that almost since 2016, evidence :D
• At the same time React doesn't have as many conventions as e.g. Angular (~framework vs. lib)

Level 1 - Clean Code

Single file level

• Uncle Bob: most important things on top
• johnpapa/angular-styleguide with similar hints
• TypeScript to introduce more hints on your APIs

Level 2 - Clean Architecture

Organizing files

• Recommendation from Dan Abramov :D
• LIFT in the previous Style Guide
• Folders-by-Feature

Files responsibility

• Presentational and Container Components
• MVC
  • Model - external API & processing
  • View - JSX
  • Controller - .service.ts
• Exporting public APIs (available to use outside the directory) with index.ts files

Level 3 - Clean System Architecture

Introducing own packages

• Introduce layout part of the system
  • Treat it as a future design system
• Try to have self-sufficient subdirectories, easy to extract as packages
• Gradually introduce monorepos and actual external packages (when needed)