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

Guia prático de desenvolvimento front-end para django devs

Guia prático de desenvolvimento front-end para django devs

Davidson Fellipe

May 03, 2014
Tweet

More Decks by Davidson Fellipe

Other Decks in Programming

Transcript

  1. GUIA PRÁTICO DE
    DESENVOLVIMENTO
    FRONT-END PARA
    DJANGO DEVS
    davidson fellipe
    front-end engineer na globo.com

    View full-size slide

  2. - HTML ~ 2001
    - front-end engineer
    - globo.com ~ 2010
    - mais em fellipe.com
    me

    View full-size slide

  3. globo.com
    - + 35 times multidisciplinares
    - orientados a metodologias ágeis
    - grande comunidade opensource
    - opensource.globo.com

    View full-size slide

  4. globo.com
    - 3 times multidisciplinares
    - todos desenvolvem front-end
    área de esportes

    View full-size slide

  5. https://www.!ickr.com/photos/frontendbr/1691161875/sizes/o/
    POR QUE
    FRONT-END?

    View full-size slide

  6. 94%
    tempo de carregamento,
    neste exemplo,
    está ligado a componentes
    no lado cliente
    http://gtmetrix.com/har.html?inputUrl=http://gtmetrix.com/reports/globoesporte.globo.com/7eqNM2Z1/net.harp&expand=true&validate=false

    View full-size slide

  7. OTIMIZAR A
    EXPERIÊNCIA DO
    USUÁRIO

    View full-size slide

  8. http://www.reddit.com/r/javascript/comments/14zwpv/why_are_front_end_developers_so_high_in_demand_at/
    WHY ARE FRONT END DEVELOPERS
    SO HIGH IN DEMAND AT STARTUPS IF
    FRONT END DEVELOPMENT IS
    RELATIVELY EASIER THAN OTHER
    FIELDS OF ENGINEERING?

    View full-size slide

  9. CÓDIGO QUE
    FUNCIONA EM
    DEZENAS DE
    AMBIENTES

    View full-size slide

  10. DIFERENTES NAVEGADORES
    DIFERENTES VERSÕES
    DIFERENTES RESOLUÇÕES
    DIFERENTES DISPOSITIVOS

    View full-size slide

  11. HTML, CSS, JAVASCRIPT, FEATURE DETECTION,
    REPAINT, REFLOW, PRÉ-PROCESSADORES, HTTP,
    CSRF, XSS, TIME FUNCTIONS PARA ANIMAÇÕES,
    SVG, CANVAS, LOCALSTORAGE,
    WEBCOMPONENTS, WEBSOCKETS,
    SHADOW DOM, SISTEMAS DE GRIDS,
    SCHEMA.ORG, SEO...
    E PORQUE NÃO?
    GESTÃO DE DEPENDÊNCIAS, FRAMEWORKS MVC,
    TESTES, ANALISADORES DE QUALIDADE DE
    CÓDIGO, TASK RUNNERS, PERFORMANCE...

    View full-size slide

  12. http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg

    View full-size slide

  13. http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg

    View full-size slide

  14. É MUITO
    MAIS QUE
    JPG PARA HTML

    View full-size slide

  15. http:globoesporte.com

    View full-size slide

  16. - como carregar
    os escudos?
    - como desenvolver
    as abas?
    - o que acontece
    quando um time é
    carregado?
    - como buscar um
    novo time?
    - onde usar wai-aria?

    View full-size slide

  17. +
    juntando elementos

    View full-size slide

  18. exemplo de uma
    aplicação
    - divisão de
    responsabilidades
    - testes para cada app
    - instalação e gestão
    de dependências via
    pypi
    - dificuldade para
    separar depois de
    juntos em produção
    app
    core do produto
    app
    news
    app
    polls
    requirements.txt

    View full-size slide

  19. premissas
    - DRY
    - componentes
    - fontes e ícones
    - comportamentos iguais em todo site
    - possibilidade de temas
    - baixa especi"cidade do CSS

    View full-size slide

  20. pensamos em
    componentes


    Normal Bold

    read more


    HTML

    View full-size slide

  21. arrumando a casa
    (ge)davidson ➜ .../ge_ui/static (master) $ tree
    |-fonts
    |---icons
    |---opensans
    |-img
    |---ge_ui
    |-----placeholder
    |-----sprites
    |-js
    |---ge_ui
    |---vendor
    |-scss
    |---ge_ui
    |---vendor
    TERMINAL

    View full-size slide

  22. blocos para
    elementos
    {% extends "core/delivery.html" %}
    {% block css_delivery %}
    {{ block.super }}
    rel="stylesheet"
    media="screen"
    href="poll/css/delivery.css">
    {% endblock %}
    delivery.html
    TEMPLATE
    app core
    TEMPLATE
    app poll

    View full-size slide

  23. CRIE
    TEMPLATE TAGS

    View full-size slide

  24. template tag
    # -*- coding: utf-8 -*-
    from django.template import Library
    register = Library()
    @register.inclusion_tag('components/dropdown.html')
    def ge_ui_dropdown(dropdown):
    return {'dropdown': dropdown}
    ge_ui_dropdown.is_safe = True
    register.filter(ge_ui_dropdown)

    View full-size slide

  25. dropdown.html

    {{dropdown.title}}

    {% for item in dropdown.itens %}

    title="{{item.label}}"
    {% for meta in item.meta %}
    data-{{meta.label}}="{{meta.valor}}"
    {% endfor %}>{{item.label}}

    {% endfor %}


    iteração

    View full-size slide

  26. NÃO QUER
    CRIAR UM PADRÃO?

    View full-size slide

  27. CSS
    VS
    PRÉ-PROCESSADOR

    View full-size slide

  28. vantagens
    - produtividade
    - facilidade de trabalhar
    com módulos
    - uso de mixins

    View full-size slide

  29. PÉSSIMAS PRÁTICAS
    COM CSS, PODEM SER
    PIORADAS COM
    PRÉ-PROCESSADORES

    View full-size slide

  30. fazendo o mal com scss
    .bisavo {
    .avo {
    .pai {
    #wtf {
    color: #f60;
    }
    }
    }
    }
    .bisavo .avo .pai #wtf {
    color: #f60;
    }
    SCSS CSS

    View full-size slide

  31. AUTOMATIZANDO
    TAREFAS

    View full-size slide

  32. vamos de grunt?

    View full-size slide

  33. grunt.js
    - fácil de usar
    - grande número de plugins
    - imensa comunidade open source

    View full-size slide

  34. con"gurar node?

    View full-size slide

  35. $ make grunt-con"g
    grunt-config:
    @if [ ! $$(which node) ]; then echo "✖ installing node..."; brew
    install node; else echo "node ✔"; fi
    @if [ ! $$(which npm) ]; then echo '✖ installing npm...'; sudo curl
    https://npmjs.org/install.sh -k | sh; else echo "npm ✔"; fi
    @if [ ! $$(which grunt) ]; then echo '✖ installing grunt...'; sudo npm
    install -g grunt-cli; else echo "grunt ✔"; fi
    @sudo npm i --save-dev
    MAKEFILE
    grunt-config:
    @if [ ! $$(which node) ]; then echo "✖ installing node...";
    brew install node; else echo "node ✔"; fi
    @if [ ! $$(which npm) ]; then echo '✖ installing npm...'; sudo
    curl https://npmjs.org/install.sh -k | sh; else echo "npm ✔"; fi
    @if [ ! $$(which grunt) ]; then echo '✖ installing grunt...';
    sudo npm install -g grunt-cli; else echo "grunt ✔"; fi
    @sudo npm i --save-dev
    MAKE

    View full-size slide

  36. tasks
    - testes
    - pré-processadores
    - js/css lint
    - criar sprites
    - concatenação

    View full-size slide

  37. package
    .json
    {
    "name": "poll",
    "version": "0.0.1",
    "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-jshint": "~0.6.5",
    "grunt-contrib-uglify": "~0.2.7",
    "grunt-contrib-watch": "~0.5.3",
    "load-grunt-tasks": "~0.2.0",
    "grunt-contrib-compass": "~0.6.0",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-shell": "~0.6.1"
    }
    }
    JS

    View full-size slide

  38. Grunt"le
    .js
    module.exports = function(grunt) {
    grunt.initConfig({
    pkg: grunt.file
    .readJSON('package.json'),
    pathBase: 'poll/static/poll/',
    pathSrc: '<%= pathBase %>src/',
    pathBuild: '<%= pathBase %>build/',
    compass: {},
    uglify: {},
    clean: {},
    concat: {},
    copy: {},
    shell: {}
    });
    require('load-grunt-tasks')(grunt);
    grunt.registerTask('build',
    ['compass:min','concat','clean','copy',
    'uglify','shell']);
    };
    JS

    View full-size slide

  39. VAMOS CRIAR UM
    PADRÃO DE
    CODIFICAÇÃO?

    View full-size slide

  40. padrões
    - aspas, chaves, ponto e vírgula
    - espaçoes vs tabulações
    - aspas simples vs apas duplas
    - nomenclaturas para functions,
    Object Literal, conditional
    statement...

    View full-size slide

  41. https://github.com/rwaldron/idiomatic.js/

    View full-size slide

  42. https://github.com/airbnb/javascript

    View full-size slide

  43. http://csslint.net/

    View full-size slide

  44. http://www.broofa.com/Tools/JSLitmus/

    View full-size slide

  45. http://pitomba.org/

    View full-size slide

  46. https://github.com/django-compressor/django-compressor

    View full-size slide

  47. https://github.com/davidsonfellipe/keepfast/

    View full-size slide

  48. http://browserdiet.com/pt

    View full-size slide

  49. Qual impacto da
    performance?
    - baixas conversões
    - baixo engajamento
    - altas taxas de rejeição

    View full-size slide

  50. - fellipe.com/talks
    - github.com/davidsonfellipe
    - twitter.com/davidsonfellipe
    obrigado

    View full-size slide