What we can learn from Angular Material UI component library

Angular Material UI component library is an open source library with a set of high-quality UI components build with Angular and Type Script following the Material Design spec.

Components are

• internationalized and accessible so that all users can use them
• The API is straightforward
• behave as expected across a wide variety of use-cases without bugs
• well-tested with unit and integration tests
• easy to customize within the bounds of the Material Design specification
• performance cost is minimized

Angular Material UI component library is written by guys from Google (you can find it here https://github.com/angular/components ) so it is one of the best places where to look and learn how to work with Angular.

So I look up in the source code and decide to share with you some of good principles and practices that guys in Google used to create Angular Material library, they can help you in your daily work.

This first post in the series contains advice on basic but important thinks such as comments, CSS…

How to write comments ?

Do not only explain what some block of code does, go level up and write comments that explain why some block of code exist at all, or does something the way it does, because why is difficult of sometime impossible to track down.

When to write comments ?

Write comments only for functions that are more complicated than a simple getter/setter

On CSS classes when it is not super obvious what a class represents.

CSS

The end-use of a component should be the one to decide how much margin a component has around it, so never set a margin on a host element.

To make an end-user easier to override styles prefer styling the host element than element inside the template.

Components and modules

Less is more so prefer small, focused modules. This means you should practice single responsibility principle when creating modules and components, then the code is easier to test consume and maintain.

Also prefer more focused granular components vs. complex configurable.

Next

In the next post we will see how the basic components such as button and card are implemented and what we can use learn from theses implementations to make our angular app better