Client side architecture basics guide to testable flexible maintainable react

Click for: original source

Though the tools we use to build client-side web apps have changed substantially over the years, the fundamental principles behind designing robust software have remained relatively the same. By Khalil Stemmler.

Developers are confused about where to start and what to choose when they start learning to write high-quality React applications. They want a strong foundation of knowledge and the confidence to architect React applications at scale built to current industry standards.

This guide teaches you client-side architecture fundamentals. It’s the result of my research using first principles on how to design and develop robust, flexible, testable, and maintainable client-side applications.

Modern Model View Presenter


During my experience working on client-side apps of varying sizes, I’ve realized that some serious upfront design on the architecture can have a significant impact on the quality of the code for the duration of its life. From simple dashboards to multi-layered apps with rendering layers, domain logic, multiple types of users - this guide teaches you the essential design principles front-end developers inadvertently code around within their everyday programming jobs.

The main bits this guide covers:

  • Prerequisites
  • Architecture
    • Model View Controller (MVC) explained
    • Model View Presenter (MVP) explained
    • MVC & MVP are too generic
    • Tasks of the model
    • Tools used within the model (React hooks, Redux, Context API, Apollo client …)
  • Principles
  • Layers
    • Presentation components
    • UI logic
    • Container/controller

… and much more. Excellent source of the information for anybody in the frontend development. Author honestly thinks that reading books and learning from the past is one of the best ways to avoid future mistakes. Design principles are great. You don’t need to always follow them, but know the rules before deciding whether you want to break ‘em. Great source of knowledge!

[Read More]

Tags open-source react ux software-architecture web-development nodejs