DEV Community: Timothy Alcaide

Turbocharge your Angular project: A config tutorial

Timothy Alcaide — Thu, 09 May 2024 17:56:45 +0000

Introduction

Welcome aboard, Angular aficionados! You've embarked on a journey to supercharge your Angular project with some configurations and tools I like to use.

In this tutorial, we'll guide you through setting up essential configurations, integrating handy tools, and optimizing your workflow for a smoother development experience. Get ready to elevate your Angular game to the next level!

Setting Up Your Angular Project

To kick things off, let's create a new Angular project using the Angular CLI.

Open your terminal and run the following command:

ng new your_project --minimal --standalone --package-manager=pnpm

This command initializes a new Angular project named 'your_project' with minimal setup (without tests) using standalone and 'pnpm' as the package manager (pnpm site). Ignore this flag if you prefer using npm or yarn.

Integrating Tailwind CSS

Tailwind CSS offers a utility-first approach to styling your applications. Let's integrate it into our project. Run the following commands in your terminal:

bashCopy code
pnpm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

These commands install Tailwind CSS and its dependencies and initialize a Tailwind configuration file.

Add to your style.scss:

@tailwind base;
@tailwind components;
@tailwind utilities;

Don't forget to add to tailwind.config.js:

content: ['./src/**/*.{html,ts}']

Adding ESLint for Code Linting

Code quality matters! Let's add ESLint, a popular code linter, to our project. Execute the following command:

ng add @angular-eslint/schematics

This command integrates ESLint into your Angular project seamlessly.

Incorporating Prettier for Code Formatting

Next up, let's enhance code formatting using Prettier. Run the following command to install Prettier:

pnpm install -D prettier

Additionally, we need to prevent conflicts between Prettier and ESLint. Execute the following commands to install necessary plugins:

pnpm install -D prettier-eslint eslint-config-prettier eslint-plugin-prettier

Fine-tuning Tailwind CSS with Prettier

Tailwind CSS and Prettier can work harmoniously together. Let's ensure Tailwind classes are formatted correctly. Install the Tailwind Prettier plugin using the command:

pnpm install -D prettier-plugin-tailwindcss

Optimizing Configuration Files

Now, let's optimize our configuration files for a seamless development experience. Follow the steps below:

Add a .prettierignore file and copy-paste the contents of your .gitignore file into it.
Ignore node_modules in ESLint by echoing "node_modules" > .eslintignore into your terminal.
Verify and update your .eslintrc file with the provided JSON configuration.

{
  "root": true,
  "ignorePatterns": ["projects/**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "plugin:prettier/recommended"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ]
      }
    },
    {
      "files": ["*.html"],
      "extends": [
        "plugin:@angular-eslint/template/recommended",
        "plugin:@angular-eslint/template/accessibility",
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {}
    }
  ]
}

Enhancing Visual Studio Code Setup

Visual Studio Code is our development playground. Let's configure it for optimal productivity. Update your .vscode/extensions.json and .vscode/settings.json files with the provided configurations.

Add to .vscode/extensions.json to recommend and install extensions:

{
  "recommendations": [
    "angular.ng-template",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss"
  ]
}

Add to .vscode/extensions.json:

{
  "editor.formatOnSave": true,
  "eslint.validate": ["json"],
  "files.autoSave": "onFocusChange",
  "[html, scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true},
  "files.exclude": {
    "node_modules/": true,
    "dist/": false,
    ".angular/": true}
}

The files.exclude true option helps to save memory during builds.

Optimizing Angular Schematics

Customize Angular schematics to generate elements in the format that interests us. Update your angular.json file with the provided schematics configurations.

"schematics": {
  "@schematics/angular:component": {
    "inlineTemplate": false,
    "inlineStyle": false,
    "style": "scss",
    "skipTests": true,
    "standalone": true,
    "changeDetection": "OnPush"
  },
  "@schematics/angular:class": {
    "skipTests": true},
  "@schematics/angular:directive": {
    "skipTests": true,
    "standalone": true},
  "@schematics/angular:guard": {
    "skipTests": true,
    "functional": true},
  "@schematics/angular:interceptor": {
    "skipTests": true},
  "@schematics/angular:pipe": {
    "skipTests": true,
    "standalone": true},
  "@schematics/angular:resolver": {
    "skipTests": true,
    "functional": true},
  "@schematics/angular:service": {
    "skipTests": true}
}

Adding Pre-commit Hooks and lint-staged

Ensure code quality before each commit using pre-commit hooks. Install Husky and lint-staged with the commands:

pnpm i -D husky lint-staged
npx husky init

Add at the end of your package.json:

"lint-staged": {
  "*.(ts|js|html|css|scss|json|md)": [
    "prettier --write"
  ],
  "*.(ts|js)": [
    "eslint --fix"
  ]
}

Then, update your .husky/pre-commit file with the provided script:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

Implementing Commit Linting

Maintain a consistent commit message format with commitlint.

pnpm i D @commitlint/cli @commitlint/config-conventional

Create a commitlint.config.js file with the provided configuration.

touch commitlint.config.js

And add it:

module.exports = {
  extends: ['@commitlint/config-conventional']
};

Additionally, update your .husky/commit-msg file with the provided script:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no -- commitlint --edit ${1}

Conclusion

Congratulations! You've successfully configured your Angular project with essential tools and optimizations. With Tailwind CSS for styling, ESLint and Prettier for code quality, and seamless integration of pre-commit hooks and commit linting, your development workflow is now smoother and more efficient than ever.

Let us know in the comments if there are any tools or configurations you like to use in your projects?

Happy coding!

🚀 Follow me on X.com or GitHub for more tips and updates on Angular development!

Un opérateur RXJS pour debugger avec élégance ?

Timothy Alcaide — Wed, 27 Sep 2023 17:26:29 +0000

Tous les développeurs utilisant RXJS qui ont voulu déboguer ont déjà fait :

obs$.pipe(tap((v) => console.log("data", v)))
// ou pour les plus malins.
obs$.pipe(tap(console.log))

C'est pas très fun. Pour y remédier, on va créer un opérateur personnalisé qui nous permettra d'avoir :

Plus sympa comme logs non ?
Pour l'utiliser, il suffit de le passer dans le pipe :

import { debug } from './custom.operators.ts'

obs$.pipe(debug("data"));

Côté implémentation, c’est simple :

export function debug<T>(tag = 'Untitled') {
  if (environment.production) {
    return tap<T>();
  }

  const t = tag[0].toUpperCase() + tag.slice(1);

  return tap<T>({
    next(value: T) {
      console.log(
        `%c[${t}: Next]`,
        'background: #84cc16; color: #fff; padding: 3px; font-size: 9px; font-weight: 500;',
        value
      );
    },
    error(error) {
      console.log(
        `%[${t}: Error]`,
        'background: #ef4444; color: #fff; padding: 3px; font-size: 9px; font-weight: 500;',
        error
      );
    },
    complete() {
      console.log(
        `%c[${t}]: Complete`,
        'background: #6b7280; color: #fff; padding: 3px; font-size: 9px; font-weight: 500;'
      );
    },
  });
}

En bonus, j'ai ajouté une petite ligne en haut pour ne pas logger en production.

Voilà :) Happy coding !

Unsubscribe, un jeu d’enfant avec takeUntilDestroyed

Timothy Alcaide — Wed, 26 Jul 2023 07:50:00 +0000

Avoir un moyen d'unsubscribe à une observable facilement ça vous dis ?

En effet, tout développeur Angular c’est un jour trouvé confronté à répéter du code pour unsubscribe à des observables qui ont été subscribes manuellement (c’est-à-dire sans utiliser le pipe async fourni par Angular qui s’occupe d’unsubscribe automatiquement à notre place).

Et oui, qui dit observable dit subscribe et qui dit subscribe dit unsubscribe ! Tout oubli d'unsubscribe implique une fuite de mémoire et les pertes de performance qui vont avec.

Unsubscribe peut vite devenir un processus répétitif qui va réduire la lisibilité de notre code. Mais ça c’était avant !

Depuis Angular v16 l'opérateur takeUntilDestroyed va nous permettre de nous simplifier la vie.

Pour l’utiliser, c’est simple, tu l’importes depuis @angular/core/rxjs-interop et tu le chaines à une observable. Par exemple :

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component({ ... })
export class ExempleComponent {

  constructor() {
    interval(1000).pipe(takeUntilDestroyed()).subscribe(console.log);
  }
}

L'opérateur takeUntilDestroyed est conçu pour être utilisé à l'intérieur d'un contexte d'injection. C’est pourquoi il est utilisé dans le constructeur de ExempleComponent

Si tu souhaites utiliser l'opérateur en dehors d’un contexte d’injection, tu dois lui passer explicitement le fournisseur DestroyRef. Voici un exemple :

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component({
  ...
})
export class ExempleComponent implements OnInit {
  private destroyRef = inject(DestroyRef);

  ngOnInit() {
    interval(1000).pipe(
      takeUntilDestroyed(this.destroyRef)
    ).subscribe(console.log);
  }
}

En conclusions, on a vu que l’opérateur takeUntilDestroyed nous permet de complete automatiquement et simplement un observable lorsque le contexte d'appel est détruit. Cela contribue donc à éviter les fuites de mémoire et améliore l’expérience de dev en apportant un code plus lisible.

Merci d'être ici 😇 n'oublier pas de liker, commenter ou partager ça m'aide à continuer de poster du contenu 👨🏻‍💻

L’option transform des inputs Angular 🪄

Timothy Alcaide — Sun, 23 Jul 2023 11:56:00 +0000

Depuis Angular v16.1.0, il existe une alternative facile à l’utilisation de setter et getter pour transformer les inputs.

Le décorateur @Input inclut désormais une option de transformation qui accepte une fonction permettant de transformer l'input avant de l'affecter à l'instance du composant (ou directive).

A quoi ça sert me direz-vous ?

Voici un premier exemple pour comprendre :

Imaginons que nous ayons un composant TowerComponent qui représente une tour (une simple div avec un gris en background 😅) le composant prend en input une hauteur.

function toNumber(value: string | number) {
    return isNumber(value) ? value : parseInt(value);
}

@Component({
    standalone: true,
    selector: 'app-tower',
    template: `<div class="tower"[style.height.px]="height"></div>`,
  styles: [`
    .tower {
      background: #555;
      width: 10px;
    }
  `]
})
export class TowerComponent {
    @Input({ transform: toNumber }) height: number;
}

Alors qu'avec le pattern setter/getter on aurait eu :

export class ButtonComponent {
 @Input()
 get height() {
    return this._height;
  }
 set height(value: string | number) {
    this._height = toNumber(value)
 }
 private _height = false;
}

Plus lisible avec transform n'est-ce pas ?

La fonction de transformation toNumber se chargera de la conversion, transformant ainsi la valeur de string en nombre.

Dans le composant parent on aura :

<app-tower height="42" />

C'est pas tout, Angular fournit également des fonctions utilitaires dans @angular/core permettant de couvrir les cas d’utilisation courant :

numberAttribute
booleanAttribute

On peut donc supprimer la fonction toNumber et refactoriser notre TowerComponent en :

export class TowerComponent {
    @Input({ transform: numberAttribute }) height: number;
}

Un autre scénario où cette fonctionnalité est pratique est lors de la manipulation d'attributs HTML.

Les attributs booléens sont considérés comme vrais s'ils sont présents sur un nœud DOM et comme faux s'ils sont omis.

Cependant, Angular interprète tous les attributs statiques comme des chaînes de caractères, ce qui entraîne souvent un problème. Par exemple, le code suivant disabled renverrait une chaîne vide :

@Component({
    standalone: true,
    selector: 'app-button',
    // ... 
})
export class ButtonComponent {
    @Input() disabled: boolean;
}

<app-button disabled />

L’utilisation de l’utilitaire booleanAttribute avec l’option de transformation permet de résoudre ce problème sans utiliser le pattern setter/getter.

@Component({
    standalone: true,
    selector: 'app-button',
    // ... 
})
export class ButtonComponent {
    @Input({ transform: booleanAttribute }) disabled: boolean = false;
}

La fonction de transformation booleanAttribute s’occupe de gérer la conversion en booléen. Grâce à ça, lorsque nous utilisons le composant ButtonComponent et que nous spécifions l'attribut disabled :

<app-button disabled />

La fonction de transformation interprétera correctement la présence de l'attribut comme vrai.

Pour conclure nous avons vu que l'option de transformation dans le décorateur @Input simplifie le processus de transformation d'Input, offrant une approche qui rend notre code plus lisible par rapport à l’approche traditionnelles. L'utilisation des fonctions numberAttribute et booleanAttribute nous permet de couvrir la majorité des cas d’utilisation.