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
   

   View Slide

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
   

   View Slide

3. Clean Code
   Robert C. Martin
   AKA: Uncle BOB
   cleancoders.com/
   

   View Slide

4. Clean Code
   John Papa
   johnpapa.net/
   

   View Slide

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
   

   View Slide

6. Clean Code
   ➢ Use aspas simples
   'use strict';
   var nome = 'carlos';
   var url = ['api', 'pessoa', 'telefones'].join('/');
   var link = '';
   

   View Slide

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 () { ...... }
   

   View Slide

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() { ............... }
   

   View Slide

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;
   }
   

   View Slide

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 = '';
    $('#contentHolder').empty();
    $(canvasString).appendTo('#contentHolder');
    canvasContext = $('#mainCanvas').get(0).getContext();
    $('#mainCanvas').bind('tap', function (event) {
    .....
    });
    }
    });
    

    View Slide

11. Clean Code
    ➢ IIFE - Immediately Invoked Function Expression
    'use strict';
    var a = 'bar';
    (function () {
    var a = 'foo';
    var b = 'john';
    })();
    

    View Slide

12. NPM
    Node Package Manager
    ● gerencia pacotes
    ● executa scripts
    Utilizar o bower seria redundante.
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

15. Instalar pacotes
    ● Salvar como dependencies
    $ npm install --save
    ● Salvar como devDependencies
    $ npm install --save-dev
    

    View Slide

16. AngularJS
    Composto por:
    ● Services
    ● Controllers
    ● Directives
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

20. View Slide

21. //TODO Codificar agora!!!
    

    View Slide

22. Promises
    Implementada no ES6 (vulgo ECMAScript 2015)
    Utilizadas para processamentos que necessitam
    serem resolvidos ou rejeitados
    Sempre será assíncrono
    

    View Slide

23. Promises
    Ganhar na
    Loteria
    

    View Slide

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);
    }
    

    View Slide

25. Promises no Angular
    $http.get('/url/back-end')
    .then( exibirResultados )
    .catch( redirecionaLogin );
    $http.post('/url/back-end')
    .then( redirecionaLista )
    .catch( notificarErro );
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

29. //TODO Codificar mais ; )
    

    View Slide

30. Isto é tudo pessoal !
    

    View Slide