Pagar.me Tech Talks

Angularjs styleguide

A IMPORTÂNCIA DE UM STYLEGUIDE

Styleguides base

RESPONSABILIDADE UNICA

Cada file deve conter um componente somente

BAD!

GOOD!

IIFE

Immediately-Invoked Function Expression

IIFE

• Ajuda a não poluir o escopo global e evita que variáveis e funções vivam mais que deveriam
• Evita eventuais de colisões de nome na minificação
• Mantém tudo em um escopo de função

GOOD!

FUGIR DE FUNÇÕES ANÔNIMAS

• Melhora leitura
• Evita o "callback hell"
• Permite melhor organização do código

IMPLEMENTAÇÃO NO FUNDO

• Melhora leitura
• Através do topo do arquivo você já tem uma idéia do que acontece
• Para detalhes você procura pelas funções no fim do arquivo
• Independe da ordem de declaração (hoisting)

BAD!

GOOD!

MODULES

• Separar sub-módulo por "." para evitar colisão de nomes (EX.: app.controllers)
• Não atribuir module getter/setter a uma variável (com um componente por file isso fica inútil)
• Caso tenha, utilizar chaining
• Setar módulos somente uma vez

BAD!

GOOD!

BAD!

GOOD!

CONTROLLERS

CONTROLLER AS

• Encapsula dados
• Dá mais contexto e leitura
• Ajuda a evitar colisão de variáveis
• Mais fácil de referenciar cada controllers em casos que estão aninhados

BAD!

GOOD!

Variavel ViewModel: vm

• this pode ter vários contextos diferentes dependendo do escopo
• Guardar this em uma variável
• var vm = this;

BAD!

GOOD!

DEFINIÇÃO DE CONTROLLERS

Tanto controller quanto controllerAs deve ser especificado na rota

Com a diretiva ng-controller a view fica obrigatóriamente linkada a aquele controller.

BAD!

GOOD!

ABSTRAIR LÓGICA DO CONTROLLER

• Colocar lógica do controller em um service/factory
• Services são mais fáceis de testar
• Enxuga dependências e deixa detalhes de implementação abstraídos
• Lógica pode ser re-utilizada
• Deixa o controller sucinto e focado

BAD!

GOOD!

FACTORIES OU SERVICES?

• Muito semelhantes, ambos são singletons
• Service é "newed" quando injetado
• Factory você tem a opção de implementação para criar diversas instâncias
• Utilizar somente Factory para manter consistência

BAD!

GOOD!

DIRETIVAS

• Uma diretiva por arquivo
• Sempre desregistrar eventos no $destroy
• Linkar somente via Atributo ou Tag-name
• Utilizar controllers para simular model, inclusive com notação de controllerAs

GOOD!

DEPENDENCY INJECTION

Utilizar o array $inject

• Melhora leitura
• Amigável para minificação

BAD!

GOOD!

ROUTE RESOLVE

Tem dados que deveriam necessariamente estar em um controller

ROUTE RESOLVE

• Ao invés de resolver promises na compilação do controller, resolver na rota
• A página não é mostrada até a promise ser resolvida
• Permite tratar o erro com uma tela específica
• Dados são injetados no controller

GOOD!

GOOD!

O QUE EU MUDARIA NA DASH

• Abandonar o classy :(
• controllerAs
• Controllers mais enxutos
• Route resolve
• Adotar um styleguide