Angular Coding Style Guide: Part 2 (Small Functions)🚀

Continuando o ultimo artigo, iremos continuar a percorrer o Style Guide do Angular.

Small functions (Pequenas Funções):

A primeira dica é bem simples, Do, defina pequenas funções.

Depois disso temo que levar em consideração (Consider) que essas funções, classes não passem de 75 linhas. Eu sei que algumas vezes não temos como prever isso, tudo depende da quantidade de regras que essa função vai ter, mas podemos tentar fazer o máximo para seguir essa dica do Style Guide colocando o necessário para chegarmos ao resultado esperado. Ok?

Agora por que devemos seguir as recomendações? Pequenas funções são mais fáceis de testar, especialmente quando têm um propósito. Mais um ponto positivo é que usar small functions facilitam a reutilização. Funções curtas são mais fáceis de ler e mais fáceis de manter.

Outro ponto positivo, funções pequenas ajudam a evitar bugs que podem surgir, que vêm com funções grandes que compartilham variáveis com escopo externo, criam fechamentos indesejados ou acoplamento indesejado com dependências. Imagine essa situação uma função que tem duas responsabilidades, realizar uma requisição POST e um PUT, veja o exemplo abaixo:

createUpdate(product: Product): Observable<Product> {
    if (this.baseUrl === 'create') {
      return this.http.post<Product>(this.baseUrl, product).pipe(
        map((obj) => obj),
        catchError((e) => this.errorHandler(e))
      );
    } 
      return this.http.put<Product>(url, product).pipe(
        map((obj) => obj),
        catchError((e) => this.errorHandler(e))
      );
  }

Fica claro que é desnecessário ter uma função que tem duas responsabilidades de criar e atualizar, podemos separar em duas funções uma para o POST e PUT:

 create(product: Product): Observable<Product> {
    return this.http.post<Product>(this.baseUrl, product).pipe(
      map((obj) => obj),
      catchError((e) => this.errorHandler(e))
    );
  }

 update(product: Product): Observable<Product> {
    return this.http.put<Product>(this.baseUrl, product).pipe(
      map((obj) => obj),
      catchError((e) => this.errorHandler(e))
    );
  }

Fica mais claro agora a importância de separarmos as responsabilidades. Isso facilita para que no futuro qualquer desenvolvedor que irá fazer uma manutenção ou terá que implementar algo novo na aplicação faça isso sem grandes problemas.

Fico por aqui neste artigo, caso queira contribuir com algum conteúdo, por favor entre em contato. Muito obrigado por ler até aqui e até o próximo!

Referencias: angular.io/guide/styleguide#style-01-02