Best Angular practises at Sweet Mustard
Smart and dumb components
To make sure we have a scalable architecture, we distinguish between smart components and dumb components. Dumb components on the one hand are used for layout purposes. These components don’t know anything about the application and only communicate to their parents. They can show data but doesn’t fetch the data. Smart components on the other hand know about the state and data of the application and pass this state and data to their child components. We also call them containers. You can read more about this on https://blog.strongbrew.io/A-scalable-angular2-architecture/.
An organised folder structure can make a huge difference in large applications. The biggest advantage is that it shows the structure of the application and thus makes everything easy to find.
We use a modules folder for the biggests parts of the applications. These modules tell which substantial parts are used in the applications. Ideally, it contains a containers-, components- and sandboxes folder. The containers split the module in smaller parts. This makes it easier to follow along and avoids that one has to jump from top to bottom to understand what the code does.
For the styles of the application layout we work with atomic design. This ensures the styles are nicely structured.
Next to the best practices we just mentioned, we also use Angular CLI, a tool used in Angular applications for developers. The tool makes it easy to interact with the application and to create a new application. Some of the features are:
- Creating a new application
- Adding components, modules, services, routing-module, guard, …
- Updating angular version
The Angular CLI is basically a command line interface developed by the Angular team which works together with Angular schematics. These schematics describe what a command should do. For example, when we execute a command ‘ng new’, a new application template as described in the Angular schematics is created.
By doing so, we don’t have to create the application ourselves and we don’t have to create files and folders manually.
Angular created these general schematics so that everyone can use this in their projects and it is a good starting point. We, at Sweet Mustard built upon this to be fully satisfied. As it’s not possible with the Angular schematics to generate containers, sandboxes and the folder structure we need, we built a custom schematic. These custom schematics are based on the Angular schematics and generate or add features predefined by our best practices. We call them Sweet Schematics.
@sweet/schematics has the following features:
- Generate a new application with our folder structure and jest as unit testing framework
- Add modules with default folder structure
- Add containers
- Add sandboxes
Next to this, there is also the possibility to generate the elements the Angular schematics have and the ones the @sweet/schematics doesn’t. @sweet/schematics doesn’t includes these items because these things doesn’t need to be changed.
Be sure to check it out!