Workshop de Clean Code, Angular & Mocks

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.

B2519015997dff04abe2568ebb2cf729?s=128

opensanca

March 12, 2016
Tweet

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)
  20. None
  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 !