$30 off During Our Annual Pro Sale. View Details »

Angular - The good Patterns

Angular - The good Patterns

Evento: LabTalks

Apresentação sobre o framework AngularJS e suas boas práticas nos quesitos de organização, eventos, nomenclatura e performance.

Thulio Philipe

August 29, 2016
Tweet

More Decks by Thulio Philipe

Other Decks in Programming

Transcript

  1. • Evite a utilização de jQuery • http://youmightnotneedjquery.com/ • Atenção

    nos operadores js
 !=, ===, == • Atenção nos erros do JSHint • promises para fluxo de execução assíncrono. • princípio da responsabilidade única.
  2. • Uma declaração por arquivo, facilita na manutenção, leitura, testes

    e para realizar mocs. • Defina funções pequenas, que realizam poucas atividades, facilita em manter e no reaproveitamento. • Envolva seu código angular em uma IIFE, evitando variáveis globais.
  3. • As definições de um módulo não devem reservar uma

    variável. • Divida sua aplicação em sub-módulos de módulos. • Use um nome único para os sub- módulos app.algumaCoisa • O módulo principal deve herdar outros sub-módulos. angular.module()
  4. • Utilize a syntax controllerAs para realizar o bind da

    view com o controller, diretamente no $routeProvider. • Ao utilizar o controllerAs, você acessa o $scope do seu controller utilizando o this. • Guarde o contexto do controller utilizando vm. • Evite escrever lógica no controller, para isto utilize services e factories. angular.controller()
  5. • Evite funções anônimas como callback. • Utilize menos angular

    e mais javascript. • Defina um controller para uma view e tente não reusar o controller para outras views. • Defina os nomes dos controllers em UpperCamelCase é convencional para objetos que podem ser instanciados usando um construtor. Ex.: new angular.controller()
  6. • Utilize o sufixo MainController ou MainCtrl. • Exponha os

    elementos que recebem bind no início da declaração da função. • Defina a função do método antes de instanciar o próprio método. 
 jslint: function was declared before used • Utilize on-time-binding sempre que possível. angular.controller()
  7. • Service é uma função construtora e será instanciada utilizando

    o new (por debaixo dos panos) • Exponha os métodos que são retornados pelo objeto do método no topo da declaração. • Utilize em operações que tenham persistência de informação. 
 Ex.: localStorage, angular.value() • Devem ser como classes, utilizando o this torna a função mais consistente. • É um tipo de serviço do angular. angular.service()
  8. • São singletons e retornam um objeto que contém os

    membros do serviço. • Utilize factory quando houver requisições XHR (por exemplo) • É um tipo de serviço do angular. • Guarda toda a lógica de negócios. 
 endpoints da api, manipulações no Banco. • Deverá retornar um objeto angular.factory()
  9. • Exponha os métodos que são retornados pelo factory no

    topo da declaração. angular.factory()
  10. • manipulações do DOM, deverão ser realizadas utilizando diretivas. •

    método link da diretiva é o responsável pelo código da manipulação. • O nome das diretivas devem ser em camelCase sendo a primeira letra minúscula. • Adicione um prefixo para as suas diretivas. • Evite diretivas como classes ou comentários. angular.directive()
  11. • Utilize como atributo, caso seja manipulação de estilo. •

    Utilize como elemento, caso seja manipulação ou inserção do DOM. • Utilize a syntax controllerAs também nas diretivas. • Utilize bindToController = true quando utilizar controllerAs na diretiva. • Angular utiliza por default uma versão do jQuery mais resumida, chamada de jQlite, facilitando a manipulação. angular.directive()
  12. • Locating our code is easy • Identify code at

    a glance • Flat structure as long as we can • Try to stay DRY (Don’t Repeat Yourself) or T-DRY LIFT
  13. • Envolva todo o seu código em uma IIFE, isto

    evita poluição no escopo global. • Mantenha o nome dos arquivos legíveis e consistentes, auxiliam na manutenção e na hora de achar alguma coisa em algum lugar. • Separe as pastas e arquivos por módulos. • ng-annotate é indicado para injeção das dependências e minificação. • Otimize o binding da view com o one- timing-biding. vanilla js e angular
  14. • Resolva as dependências do controller utilizando o resolve do

    $routeProvider. • Crie filtros globais: angular.filter(), nunca dentro de controllers ou services. • Para gerar documentação com comentário no código, utilize o ngDocs ou jsDoc. • Trabalhe com promises. • Trate erros relacionados a rotas com $routeChangeError vanilla js e angular
  15. • Use convenções clara para nomenclatura dos arquivos.
 feature.type.js (arquivos)


    feature.type.spec.js (testes) • Gerencie todas as suas dependências de forma automatizadas (bower, npm). • Crie pequenos módulos que encapsulam uma responsabilidade • Mantenha o app.js limpo e claro, ele servirá como um "manifesto" contendo o que tem e o que não tem injetado na sua aplicação. vanilla js e angular
  16. • Utilize a notação @ngInject para injetar de forma automática

    as dependências. (ponto negativo por ser um comentário) • Para injetar de forma manual, utilize o provider $inject. • Utilize ng-if ao invés de ng-show. • Utilize ngRepeat + track-by • Habilite patterns assíncronos com ngModelOptions. Ex.: debounce vanilla js e angular
  17. • Não utilize ng-include em ng-repeat. (em loops de iteração)

    • Evite filtrar/tratar dados no template. • Utilize $log ao invés de console. • $timeOut ao invés de setTimeOut. • $interval ao invés de setInterval. • Evite múltiplas declarações, no javascript cada declaração é uma operação. vanilla js e angular
  18. • Apenas utilize $scope para delegar eventos. ($emit, $broadcast, $on)

    • Evite utilizar $scope.$watch, para ser mais performático utilize a diretiva ng-change. • Na injeção de dependências, adicione primeiro os providers do Angular, depois adicione os seus. vanilla js e angular