Save 37% off PRO during our Black Friday Sale! »

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.

7418428588f726b3a8a59f910afc1b9c?s=128

Thulio Philipe

August 29, 2016
Tweet

Transcript

  1. Angularjs The Good Patterns

  2. O que iremos ver?

  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.
  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.
  5. Styleguides

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

  8. angular.module() Módulos

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

  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()
  11. Let's do it!

  12. EVITE

  13. PREFIRA

  14. PREFIRA

  15. Controllers angular.controller()

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

  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()
  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()
  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()
  20. • Utilize o sufixo MainController ou MainCtrl. • Evite manipulação

    de dados na view. angular.controller()
  21. Let's do it!

  22. EVITE

  23. PREFIRA

  24. PREFIRA

  25. Services angular.service()

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

  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()
  28. Let's do it!

  29. EVITE

  30. PREFIRA

  31. Factory angular.factory()

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

  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()
  34. • Exponha os métodos que são retornados pelo factory no

    topo da declaração. angular.factory()
  35. Let's do it!

  36. EVITE

  37. PREFIRA

  38. Directives angular.directive()

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

  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()
  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()
  42. Let's do it!

  43. EVITE

  44. PREFIRA

  45. PREFIRA

  46. Gerais vanilla js e angular

  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
  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
  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
  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
  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
  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
  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
  54. Let's do it!

  55. PREFIRA

  56. PREFIRA

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

  58. None
  59. Thulio Philipe thulioph.com