Suggest best practices and interesting ideas for an Angular app

Question

In my company, we have an angular dart application that was initially built by backend engineers that became frontend engineers, next week, we have a brainstorming session of how we can improve our application, in all aspects not just code wise, I have suggested a few things as :

• Using Facade services for Redux calls (Since we dispatch actions in components)
• (Maybe) apply inheritance in components and have a "BaseComponent"
• Using a common css grid system (We only use vanilla HTML/CSS)

We do use:

• OnPush change detection
• TrackBy in loops
• NgZone

Can you please provide more ideas ? This will help me leave a good impression in my new team

Answer 1

To your suggestions:

1. Using Facades for the Redux implementation is a very good idea, it decouples code and makes it much easier to test as well.
2. Inheritance in Angular Component is rather cumbersome since you cannot inherit templates and need specific selectors anyhow. If you have common logic, use services via DI instead, if there is common UI logic, use subcomponents, maybe in combination with ng-content instead.
3. The CSS system is a matter of choice and taste.
4. Using trackBy and OnPush is great, I still consider it should be the default in new projects.

What else I would suggest?

1. Since you get a lot of async sources when using a Redux pattern, consider using the pattern as described in https://blog.angular-university.io/angular-2-smart-components-vs-presentation-components-whats-the-difference-when-to-use-each-and-why/ I made very good experiences with this since it seperates data from presentation cleanly. It results in a lot of components but they have very clear responsibilities and are easy to test since there is no GUI and async hassle in the same test.
2. Use a formatter, e.g. prettier.
3. https://github.com/ngneat/spectator is my favorite testing tool. It takes care of a lot of boilerplate code for Angular Component tests.
4. If there is a lot of backend developers in your team, try to make sure you are not using typescript/javascript features too hard. From my experience, things as the truthy/falsy mechanism are really hard to grasp if you come from another programming language and tbh, there is no need to.
5. Use typescript strict mode if you do not already.
6. Edit: do not use methods in templates, it counters change detection.