$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. Angularjs
    The Good Patterns

    View Slide

  2. O que iremos ver?

    View Slide

  3. • 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.

    View Slide

  4. • 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.

    View Slide

  5. Styleguides

    View Slide

  6. View Slide

  7. @John_Papa
    John Papa
    https://github.com/johnpapa/
    @toddmotto
    Todd Motto
    https://github.com/toddmotto
    VS

    View Slide

  8. angular.module()
    Módulos

    View Slide

  9. O que são módulos?
    https://docs.angularjs.org/guide/module

    View Slide

  10. • 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()

    View Slide

  11. Let's do it!

    View Slide

  12. EVITE

    View Slide

  13. PREFIRA

    View Slide

  14. PREFIRA

    View Slide

  15. Controllers
    angular.controller()

    View Slide

  16. O que são controllers?
    https://docs.angularjs.org/guide/controller

    View Slide

  17. • 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()

    View Slide

  18. • 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()

    View Slide

  19. • 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()

    View Slide

  20. • Utilize o sufixo MainController ou
    MainCtrl.
    • Evite manipulação de dados na view.
    angular.controller()

    View Slide

  21. Let's do it!

    View Slide

  22. EVITE

    View Slide

  23. PREFIRA

    View Slide

  24. PREFIRA

    View Slide

  25. Services
    angular.service()

    View Slide

  26. O que são services?
    https://docs.angularjs.org/guide/services

    View Slide

  27. • 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()

    View Slide

  28. Let's do it!

    View Slide

  29. EVITE

    View Slide

  30. PREFIRA

    View Slide

  31. Factory
    angular.factory()

    View Slide

  32. O que são Factory?
    https://docs.angularjs.org/guide/services

    View Slide

  33. • 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()

    View Slide

  34. • Exponha os métodos que são
    retornados pelo factory no topo da
    declaração.
    angular.factory()

    View Slide

  35. Let's do it!

    View Slide

  36. EVITE

    View Slide

  37. PREFIRA

    View Slide

  38. Directives
    angular.directive()

    View Slide

  39. https://docs.angularjs.org/guide/directive
    O que são Diretivas?

    View Slide

  40. • 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()

    View Slide

  41. • 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()

    View Slide

  42. Let's do it!

    View Slide

  43. EVITE

    View Slide

  44. PREFIRA

    View Slide

  45. PREFIRA

    View Slide

  46. Gerais
    vanilla js e angular

    View Slide

  47. • 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

    View Slide

  48. • 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

    View Slide

  49. • 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

    View Slide

  50. • 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

    View Slide

  51. • 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

    View Slide

  52. • 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

    View Slide

  53. • 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

    View Slide

  54. Let's do it!

    View Slide

  55. PREFIRA

    View Slide

  56. PREFIRA

    View Slide

  57. Demo
    https://github.com/thulioph/labcodes

    View Slide

  58. View Slide

  59. Thulio Philipe
    thulioph.com

    View Slide