Angular Schematics 23 Feb 2019

Angular Schematics 23 Feb 2019

Sweet Mustard Angular schematics are born!

At Sweet Mustard, we mostly use Angular when building web applications for customers. These applications can get quite large and often don’t come without some struggles when building them. This is why there’s a big focus on writing clean code and keeping things organised. By doing so, everyone at Sweet Mustard is able to follow the structure of an application. A big part of this structure is making sure the folder structure is built up in a very organised way. We also have best practices to keep things easy to find and easy to work with. Let’s have a closer look at them what these best practised are.

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/.

Folder structure

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.

Angular CLI

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:

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

@sweet/schematics has the following features:

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.

@sweet/schematics is an open source library and can be found at github and npm. You can find more details about @sweet/schematics and how to use it at the readme located at our github repo.

Be sure to check it out!