Search code examples
angularatomic-design

Angular 8 + Atomic Design

I have some questions about atomic design in angular. The basics are understandable, I create the smallest atomic components, then link into larger ones, up to the page. When should I implement display at different resolutions in templates? Let's say I have a login page or home page for an even better example that will look completely different on the mobile and desktop. I create a template home and here in CSS I specify the display for each resolution? Is template just the right place for it?

The second question about providing data from the backend is these components. When I already have a template, then I use it in the Home page and in home.component.ts injects some services for, say, articles, profile, notifications and then I get this data by @Input () and give it down? Rather, this will result in such a redundant chain of data (Data must go through each component to reach the bottom). How should this work? What is the approach to the topic?

Solution

  • (You should stick to a single question, and post 2 topics, so that StackOverflow is easily searchable for questions/answers).

    Those are interesting questions though and important design decisions.

    The best practices to go with your two questions:

    1. To design responsive pages: using Angular Flex-layout. It allows you to specialize the display depending on the size of the viewport. I never encountered a page where design would be so different that it requires to have specific components for each. But in any case, you can always use some fxShow / fxHide combinations to achieve your needs, given it doesn't incur perf issues.

    2. Depending on the actual data volume you need to share between components, you can go with several solutions (you have more choices, look at the official docs):

      • Light: go the way you describe. You share data down the components hierarchy. As you hint to, it does not scale well because changing somewhere in the chain incur changes elsewhere.
      • Medium: use a Service to store & make data available (last part of the previous page).
      • Large: use ngrx-store. Your app then has an asynchronous store which plays the role of the service in the previous scenario. It standardizes the way you access this data from any component, and is a single point of truth. This is the best practice and idiom, comes with a lot of benefits. But the learning curve & initial setup overhead is not appropriate for all projects and/or level of experience (you need to be especially ok with RxJs - go with the Service way if you're not sure yet).