Workshop de Clean Code, Angular & Mocks

Palestra que ocorreu no nosso #10 workshop que foi realizado pelo nosso amigo Carlos Gomes (https://br.linkedin.com/in/carlosalgms) nesse encontro ele abordou sobre Clean Code, Angular e Mockup utilizando o MaterialAngular.

Transcript

1. Workshop Clean Code, Angular e Mocks Carlos A. Gomes
2. Carlos A. Gomes Desenvolvedor Front-end - Atuando em TI desde 2005 Cursando Análise e Desenvolvimento de sistemas - UNIP c.a.gomes @carlos_algms https://br.linkedin.com/in/carlosalgms https://github.com/carlos-algms
3. Clean Code Robert C. Martin AKA: Uncle BOB cleancoders.com/
4. Clean Code John Papa johnpapa.net/
5. Clean Code ➢ ‘use strict’ 'use strict'; x = 3; // Erro de variável não definida function calcular(a, a) { // parâmetros com nome duplicado .... } var eval = 123; // eval é uma palavra protegida
6. Clean Code ➢ Use aspas simples 'use strict'; var nome = 'carlos'; var url = ['api', 'pessoa', 'telefones'].join('/'); var link = '<a href="http://site.com.br/" />';
7. Clean Code ➢ variáveis e funções devem ser camelCase ➢ classes devem ser CamelCaseUcFirst 'use strict'; var nomePessoa = 'John Doe'; function calcularIdade( anoNascimento ) { ..... } function Pessoa() { this.nome = ''; this.dataNascimento = ''; this.fazerLogin = function () { ...... }
8. Clean Code ➢ Funções devem ser usadas primeiro, depois criadas 'use strict'; var media = calcularMedia( 5, 10, 30 ); var diferencaDias = calcularDiferencaDias( dataInicio, dataFim ); var pessoa = new Pessoa(); //////////////// function calcularMedia() { ........... } function calcularDiferencaDias() { ............. } function Pessoa() { ............... }
9. Clean Code ➢ As funções devem ser single-responsability 'use strict'; function criarItem( imgUrl ) { var item = document.createElement('li'); inserirImagem(item, imgUrl); return item; } function inserirImagem(item, imgUrl) { var img = document.createElement('img'); img.src = imgUrl; item.appendChild(img); return img; }
10. Clean Code ➢ Pensar na memória, na performance e na bateria $(function () { var canvasContext; resizeCanvas(); $(window).resize(function () { resizeCanvas(); }); function resizeCanvas() { var w = window.innerWidth / 1.2; var h = window.innerHeight / 1.2; var canvasString = '<canvas id="mainCanvas" ></canvas>'; $('#contentHolder').empty(); $(canvasString).appendTo('#contentHolder'); canvasContext = $('#mainCanvas').get(0).getContext(); $('#mainCanvas').bind('tap', function (event) { ..... }); } });
11. Clean Code ➢ IIFE - Immediately Invoked Function Expression 'use strict'; var a = 'bar'; (function () { var a = 'foo'; var b = 'john'; })();
12. NPM Node Package Manager • gerencia pacotes • executa scripts Utilizar o bower seria redundante.
13. Iniciando projeto $ npm init Responda as perguntas, ao final digite yes e dê o enter. As configurações de seu projeto são armazenadas no arquivo: package.json
14. Depencies X DevDependencies Dependencies: • São pacotes que serão instalados junto com o seu projeto quando o mesmo for instalado para uso. DevDependencies: • São pacotes que só são instalados durante o desenvolvimento. • Necessitam ser exportados ou concatenados e minificados para ficarem disponíveis em produção.
15. Instalar pacotes • Salvar como dependencies $ npm install --save <PACOTE> • Salvar como devDependencies $ npm install --save-dev <PACOTE>
16. AngularJS Composto por: • Services • Controllers • Directives
17. AngularJS - Services São dado que podem ser compartilhados entre os diversos ambientes do angular. Podem ser: • Objetos • Arrays • Funções São todos singleton O Angular provê vários serviços para agilizar o desenvolvimento
18. AngularJS - Directive Manipulação de DOM dentro do angular. • Componentes ◦ injetam mais nodes no DOM e pode ou não adicionar comportamento • Decorativas ◦ Adicionam comportamento aos nodes ( click, hover, animaçõe ) e/ou estilos
19. AngularJS - Controllers Controlam em mantem os dados e métodos • expõem dados para os views html • mantem os dado do form antes de enviar ao backend ( Model ) • expõem funções e métodos para os views ( click, submit, etc)
21. //TODO Codificar agora!!!
22. Promises Implementada no ES6 (vulgo ECMAScript 2015) Utilizadas para processamentos que necessitam serem resolvidos ou rejeitados Sempre será assíncrono
23. Promises Ganhar na Loteria
24. var minhaPromessa = new Promise(maiorDeIdade); function maiorDeIdade(reject, resolve) { var idade = parseInt( Math.random() * 25 ); idade > 18 ? resolve('acesso liberado!') : reject('acesso negado, menor de idade'); } minhaPromessa .then(liberarAcesso) .catch(notificarErro); function liberarAcesso(resposta) { console.log('sucesso:', resposta); redirectPaginaProtegida(); } function notificarErro(erro) { console.error('falha: ', erro); alert(erro); }
25. Promises no Angular $http.get('/url/back-end') .then( exibirResultados ) .catch( redirecionaLogin ); $http.post('/url/back-end') .then( redirecionaLista ) .catch( notificarErro );
26. Q KRIS KOWAL https://about.me/kriskowal O único nome de desenvolvedor citado na documentação do angular A General Theory of Reactivity https://github.com/kriskowal/gtor Singular e Espacial, Plural e Temporal
27. Mocks “ Objetos Mock, objetos simulado ou simplesmente Mock (do inglês Mock object) em desenvolvimento de software são objetos que simulam o comportamento de objetos reais de forma controlada. São normalmente criados para testar o comportamento de outros objetos. Em outras palavras, os objetos mock são objetos “falsos” que simulam o comportamento de uma classe ou objeto “real” para que possamos focar o teste na unidade a ser testada. Fonte: Wikipédia
28. Mock - Vantagens • Desenvolvimento independente de back-end • Velocidade de resposta instantânea • Foco no resultado • Força uma maior comunicação entre o front-end e - back-end • Obrigatório teste de integração
29. //TODO Codificar mais ; )
30. Isto é tudo pessoal !