Angular is one of the biggest frameworks in 2020. Lots of developer love Angular because it provides a lot of features out-of-the-box, which means there are quite a few concepts to be able to master if from top to bottom. Our Melbourne Web Developer had curated few of the most impactful concept for you. Since most of us still in quarantine and working from home, you can use this article as a guide when improving your Angular Skill at home.
Below are three concepts we think every Angular developer should explore in-depth in order to master Angular.
1) Module/Library Architecture
Angular’s Module architecture is a bit unique, and probably one of the most difficult parts to fully understand for beginners. The most confusing concept about it is that we’re already using a module architecture on top of it, like ES imports. It’s important to keep them as much related as possible Because Angular Modules add an additional layer of logical grouping.
There are different types of Angular Modules you should know:
- Declarations/Widget Module
- Services Module
- Routing Module
- Domain/Feature Module
- Core/Shared Module
“Which one to use? library or module?”
You might find yourself ask this question. The answer is it depends on your project type, and whether you are using a mono-repo or a multi-repo project.
Determine what sort of module you’re going to write will help you choose between module and library. If you can’t make the decision, you should familiarize yourself with the different types of modules we listed above.
- It’s highly likely you’ll need one or two types of modules, so the answer may very well be two modules: Routing and Service
- Should this module be its own library or should it be simply a module? This is a little bit harder to answer: if you’re using a mono-repo, my opinion is that building libraries would be a better option in the long run
2) Separation of Concerns between Components, Services, and Directives
In theory, separating concerns should be simple, but it is not that simple in practice. We’ve been taught to keep components “lean” and services “fat” since the Angular.js days and fundamentally it is still the best approach to implement now. It is still important to understand what exactly belongs into Components and what belongs into Services, and why Directives may just be an incredibly underrated feature.
State
In order to place state effectively, you need to understand whether the data is accessed and shared outside of a component or whether it is local and encapsulated.
- If the state is meant to be shared between components, or it needs to be accessed from various services, then place your state in a service.
- If the state is local (ex. a form) and only used within a component, then simply store it in a component
DOM Manipulation
Most DOM Manipulation should probably happen within Directives. For example, you want to add a Drag and Drop functionality to one of your components.
Sure, you can create a component and bind events from there, but at that point, you’re mixing two things:
- how the component looks
- how a certain component’s feature behaves
Or you can use directives as alternative. Directives can be used to take off lots of responsibility from Components. Directives are a powerful feature in Angular because its reusability feature but I haven’t seen them used properly in almost every project I have worked on.
3) Change Detection and Rendering
Angular is a fairly magical framework when it comes to re-rendering user interface. OnPush Change detection is the best practice to optimize performance. But sometimes some unexpected problems might occur, especially when you’re not using Observables and the async pipe within your templates.
Here are some tips you can use to master change detection.
- Treat all your data as immutable; using Rx-Powered State Management libraries helps a lot with this
- Use only (or mostly) Observables to display data in your templates. If you’re using local state, use a BehaviorSubject
If you want to build with high performance, mastering change detection is a mandatory. By mastering change detection, not only you need to make sure to update when needed, but you also need to make sure to update only when needed.
These three components are the area you need to explore and learn from home in order to become a highly proficient Angular developer.