We want our components to be lean, mean Angular-powered machines. Cover photo by Alessandro Ranica on Unsplash.
Original publication date: 2019-09-23.
So you’ve been developing Angular projects for a couple of years and you feel like you’ve got everything under control. You break your applications into components and services. You even follow the official style guide—at least you think so. This is all there is to it, right?
Wrong!
Where did I go so wrong?
I’m glad you asked, grasshopper. Let’s discuss a robust component architecture. Let’s define lean Angular components.
Tutorials teach the basics
You might have learned Angular through the Tour of Heroes tutorial or even the Getting Started guide which was published with the release of Angular version 8.
While fine for Angular beginners, the tutorials do not teach us how to structure and architect large or complex applications. If you believe they teach you everything there is to know, think again!
This is the issue we’re going to address in this article—too many tutorials and guides teach us only the basics. If basics are all we ever learn, how will we ever advance our skills?
A component-based application architecture has been a major part of all popular frameworks for half a decade, starting with React in 2013. But what are components really? The Angular team tells us that:
An application is a collection of components.
This barely tells us anything. I would even argue that an application isn't a component collection but rather a component composition. This aligns with the fact that an application at any point in time has a component tree which is made up of all activated components—that is the components that are active on the current page in its current state.