Angular architecture and best practices for modular design

Your application performance is based on how well you make an architectural design of it. The scalability of the application and future enhancements can be easier with solid yet simple architecture. The loading time and the ease of expansion are the most important areas of any application.

We can design the app with the different modules broadly as follows:

Core Module - This should include all the Guards, Services, Interceptors
Feature Module - should have all the feature components or modules
Shared Library - should have all the reusable dynamic components
Public Module - should have the components which are visible without authentication
Theme Module - should include all the dependencies of the UI libraries like ng-material

These are the modular changes that once implemented can create a significant difference in the app performance. Also, it's quite easy for developers to read the code and enhance it further. There are some of the points which can be considered to optimize the performance as follows:

All the modules should be lazily loaded so as to avoid increased loading time.
All the logical manipulation and computation should be inside the services and the methods of the components should have the display functionality only.
Use of the component lifecycle methods to unsubscribe from the observables to avoid unnecessary memory leaks.
AOT compiler at the time of build creation can also cause tree shaking and reduces the unnecessary asynchronous calls.
If any of the external scripts are used then that can also be added with defer and async options as per the requirements.

Thus, for better scalability and modularity of the application, these are the standard practice that can be recommended for faster development as well. You can watch the whole demonstration here - https://youtu.be/oQY6BdKhc6g

Angular architecture and best practices for modular design

Comments

More from this blog

Inside the loop

The Parallel Universe

The safe space

Adulting the other way round

Observe the observer

Command Palette

Comments

More from this blog