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.

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
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
59. Thulio Philipe thulioph.com