Skip to content

WaldiirNeto/eu-cidadao

BranchesTags

Repository files navigation

Eu cidadão - FRONTEND -ANGULAR

Olá frontends, esse README tem o intuito de auxiliar vocês para alguns padrões e diretivas que devemos seguir no projeto.

Upgrade do Angular CLI

Usaremos a versão mais atualizada, (Não se preocupe isso não afetará os outros projetos com versões mais antigas)

npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

Instalando dependências do projeto

Entre na pasta EUCIDADAOFRONTEND e digite o seguinte comando

npm install

Com isso você já é capaz de rodar o projeto

Rodando o projeto local

Vou deixar alguns comando que podemos rodar de acordo com o ambiente

ng s (por enquanto sem ambientes)

HTML5 - GUIDELINE

Nesse tópico abordaremos alguns conceitos e semânticas do HTML 5 no projeto

1.<section>

O elemento HTML <section> representa uma seção genérica contida em um documento HTML, geralmente com um título, quando não existir um elemento semântico mais específico para representá-lo.

Por exemplo, um menu de navegação deve estar dentro um elemento <nav>, mas uma lista de resultados de pesquisa ou a exibição de um mapa e seus controles não possuem elementos específicos, e podem ser colocados dentro de uma <section>.

✔️ BOM

<section>
  <h1>Mussum Ipsum</h1>
  <p>Mussum Ipsum, cacilds vidis litro abertis.</p>
</section>

❌ RUIM

<div>
  <h1>Mussum Ipsum</h1>
  <p>Mussum Ipsum, cacilds vidis litro abertis.</p>
</div>

Um Exemplo mais detalhado: :heavy_check_mark: BOM

<section>
  <header>
    <h1>Page Title Goes Here</h1>
    <p>Tagline!</p>
    <nav>
      <a href="example.com">Mussum Ipsum</a>
      <a href="example.com">Mussum Ipsum</a>
      <a href="example.com">Mussum Ipsum</a>
    </nav>
  </header>
</section>

❌ RUIM

<div class="header">
  <h1 class="page-title">Page Title Goes here</h1>
  <p>Tagline!</p>
  <div class="header-menu">
    <ul>
      <li><a href="example.com">Home Page Link</a></li>
      <li><a href="example.com">Blog Page Link</a></li>
      <li><a href="example.com">Podcast Page Link</a></li>
    </ul>
  </div>
</div>

CSS GUIDELINE

Neste tópico abordaremos algumas boas práticas que devemos ter ao criar estilos no projeto

2. Não use seletores <ID>

Não há realmente necessidade de usar seletores de ID — eles são menos flexíveis (você não pode adicionar mais se você descobrir que precisa de mais de um), e são mais difíceis de substituir se necessário, sendo de uma especificidade maior do que as classes.

✔️ BOM

.table-user {
  ...;
}

❌ RUIM

#table-user {
  ...;
}

2.1 Matenha uma declaração por linha

✔️ BOM

h1,
h2,
h3 {
  font-family: sans-serif;
  text-align: center;
}

❌ RUIM

h1,
h2,
h3 {
  font-family: sans-serif;
  text-align: center;
}

2.2 Evite especificar unidades que são de valores zero

✔️ BOM

 color: #ffffff;
  margin: 0;

❌ RUIM

 color: #ffffff;
  margin: 0px;

2.3 As propriedades devem ser criadas em ordem alfabética

✔️ BOM

.selector {
  background: #fff;
  border: #333 solid 1px;
  color: #333;
  display: flex;
  height: 200px;
  margin: 5px;
  padding: 5px;
  width: 200px;
}

❌ RUIM

.selector {
  padding: 5px;
  height: 200px;
  background: #fff;
  margin: 5px;
  width: 200px;
  color: #333;
  border: #333 solid 1px;
  display: flex;
}

2.4 sem preguiça! nomes significativos para as classes separadas por traços

✔️ BOM

.button {
  ...;
}
.progress-bar {
  ...;
}

❌ RUIM

.bnt {
  ...;
}
.prgss {
  ...;
}

2.5 Convenção de nomeação BEM

A BEM divide as classes dos componentes em três grupos:

  • Bloco: A única raiz do componente.
  • Elemento: Uma parte componente do Bloco.
  • Modificador: Uma variante ou extensão do Bloco.

Exemplo:

.page-header {
  ...;
}
.page-header__title {
  ...;
}
.page-header--active {
  ...;
}

E no SASS? segue o exemplo:

.page-header {
  &__title {
    ...;
  }
  &--active {
    ...;
  }
}

2.6 Não use valores de cores diretamente nos elementos, use variáveis SASS (no nosso caso)

✔️ BOM

.button {
  color: $button-color-primary;
}

❌ RUIM

.button {
  color: #fff;
}

2.7 Não estilize diretamente os elementos, gera conflitos e dores de cabeça

✔️ BOM

.form-control {
  ...;
}
.header {
  ...;
}
.section {
  ...;
}

❌ RUIM

nav
header
input[type="text"] { ... }
section

3. JAVASCRIPT GUIDELINE

3.1 Não use semicolon

✔️ BOM

console.log("test");

❌ RUIM

console.log("test");

3.1 Sempre usar aspas simples

✔️ BOM

const project = "ASUS";

❌ RUIM

const project = "ASUS";

3.2 Faça comparações rigorosas

✔️ BOM

if (string === "string") {
  statement;
}

❌ RUIM

if (string == "string") {
  statement;
}

3.3 Use variáveis com nomes claros e que sejam pronunciavéis em inglês

✔️ BOM

const userList = ["user1", "user2"];

❌ RUIM

const lista = ["user1", "user2"];

3.4 variáveis para validações

✔️ BOM

const checkUserActive = user.isActive && user.isLogged;
if (checkUserActive) {
  statement;
}

❌ RUIM

if (user.isActive && user.isLogged) {
  statement;
}

3.5 Evite múltiplos IF's

✔️ BOM

 errorCode(Error: string): string {
   return {
     'ERROR-01': 'Erro 01 encontrado',
     'ERROR-02': 'Erro 02 encontrado',

   }[error]
 }

❌ RUIM

 errorCode(Error:): string {
   if(error === 'ERROR-01') {
      return 'ERRO 01 encontrado'
   }
    if(error === 'ERROR-02') {
      return 'ERRO 02 encontrado'
   }
 }

3.6 váriaveis e injeções de dependências privadas devem começar com _

✔️ BOM

private _loading: boolean
constructor(private _userService: UserService) {}

❌ RUIM

private loading: boolean
constructor(private userService: UserService) {}

4. ANGULAR - GUIDELINE

4.1 RXJS

4.1.1 Memory leak - RXJS

No angular usaremos RXJS para observar eventos, requisições e posteriormente acabamos liberando memoria para suprir esses observers, para nos ajudar com isso, devemos limpar a memória toda vez que o component for destruído

Pra facilitar o entendimento irei deixar um artigo AQUI

Exemplo básico:

export class LoginComponent implements Oninit, OnDestroy {

  public userList: UserList
  private destroy$: Subject<void> = new Subject<void>()

 ...

  ngOninit(): void {
    this.userService.getUsers().pipe(TakeUntil(this.destroy$)).subscribe((userList: UserList) => {
        this.userList = userList
    })
  }

  ngOnDestroy(): void {
    this.destroy$.next()
    this.destroy$.complete()

  }
}

4.1.2 Sempre use pipeAsync para renderizar listas no template

Usando essa prática não precisaremos nos preocupar com vazamentos de mémoria já que o Angular faz automáticamente com o AsyncPipe 🎉

✔️ BOM

export class LoginComponent implements Oninit{

  public userList$:  Observable<UserList>

...

  ngOninit(): void {
    this.userList  = this.userService.getUsers();
  }

}
<table>
  <tr *ngFor="let list of this.userList | async">
    ...
  </tr>
</table>

❌ RUIM

export class LoginComponent implements Oninit, OnDestroy {

  private destroy$: Subject<void> = new Subject<void>()
  public userList: UserList

...

  ngOninit(): void {
    this.userService.getUsers().pipe(TakeUntil(this.destroy$)).subscribe((userList) => {
        this.userList = userList
    })
  }

  ngOnDestroy(): void {
    this.destroy$.next()
    this.destroy$.complete()

  }
}
<table>
  <tr *ngFor="let list of this.userList">
    ...
  </tr>
</table>

4.1.3 Utilize o finalize quando o observável for concluído

✔️ BOM

export class LoginComponent implements Oninit, OnDestroy {
  private _destroy$: Subject<void> = new Subject<void>()
  private _loading: false

  createUser(): void {
    private _loading = true
   this._authenticationService
   .auth(this.form.value)
   .pipe(
   takeUntil(this._destroy$),
   finalize(() => { this._loading = false; }) )
   .subscribe({ next: (user: AccountModel) => { .... },
   error: (helpError:ErrorResponseHelper) => { .... } })
   }
   ngOnDestroy(): void {
   this._destroy$.next()
   this._destroy$.complete() }
}

5. ANGULAR - STYLE GUIDES

  • No máximo 75 linhas por funções. Por que? Funções pequenas são mais fáceis de testar, especialmente quando fazem uma coisa e servem a um propósito.

  • Overall structural guidelines Comece pequeno, mas tenha em mente para onde a aplicação está indo.

    • Tenha uma visão de curto prazo da implementação e uma visão de longo prazo.

    • Coloque todo o código do aplicativo em uma pasta chamada .src

    • Considere criar uma pasta para um componente quando ele tiver vários arquivos de acompanhamento (, , e )..ts.html.css.spec

    • Por que? Ajuda a manter a estrutura de aplicação pequena e fácil de manter nos estágios iniciais, ao mesmo tempo em que é fácil evoluir à medida que a aplicação cresce.

    • Por que? Os componentes geralmente têm quatro arquivos (por exemplo, , , e ) e podem desordenar uma pasta rapidamente. (html,css,ts,spec)

Aqui está uma pasta compatível e estrutura de arquivos:

  • app
    • pages
      • user
        • components
          • button
          • table
        • user-list

REFERÊNCIAS

Angular - styleguide
Juntos somos mais
Memory Leak
RXJS
Mozilla
CSS - BEM

About

freela para demosntração

Resources

Readme
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages