Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Opensanca

March 12, 2016
Tweet

More Decks by Opensanca

Other Decks in Programming

Transcript

  1. Workshop
    Clean Code, Angular e Mocks
    Carlos A. Gomes

    View full-size 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 full-size slide

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

    View full-size slide

  4. Clean Code
    John Papa
    johnpapa.net/

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

  20. //TODO Codificar agora!!!

    View full-size slide

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

    View full-size slide

  22. Promises
    Ganhar na
    Loteria

    View full-size slide

  23. 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 full-size slide

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

    View full-size slide

  25. 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 full-size slide

  26. 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 full-size slide

  27. 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 full-size slide

  28. //TODO Codificar mais ; )

    View full-size slide

  29. Isto é tudo pessoal !

    View full-size slide