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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

  7. OTIMIZAR A
    EXPERIÊNCIA DO
    USUÁRIO

    View 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 Slide

  9. CÓDIGO QUE
    FUNCIONA EM
    DEZENAS DE
    AMBIENTES

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

  14. É MUITO
    MAIS QUE
    JPG PARA HTML

    View Slide

  15. View Slide

  16. http:globoesporte.com

    View Slide

  17. - 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 Slide

  18. +
    juntando elementos

    View Slide

  19. View Slide

  20. CRIE
    APPS!

    View Slide

  21. 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 Slide

  22. View Slide

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

    View Slide

  24. pensamos em
    componentes


    Normal Bold

    read more


    HTML

    View Slide

  25. 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 Slide

  26. 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 Slide

  27. CRIE
    TEMPLATE TAGS

    View Slide

  28. 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 Slide

  29. 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 Slide

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

    View Slide

  31. View Slide

  32. View Slide

  33. CSS
    VS
    PRÉ-PROCESSADOR

    View Slide

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

    View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

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

    View Slide

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

    View Slide

  41. AUTOMATIZANDO
    TAREFAS

    View Slide

  42. vamos de grunt?

    View Slide

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

    View Slide

  44. con"gurar node?

    View Slide

  45. $ 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 Slide

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

    View Slide

  47. 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 Slide

  48. 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 Slide

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

    View Slide

  50. 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 Slide

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

    View Slide

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

    View Slide

  53. http://csslint.net/

    View Slide

  54. PERFORMANCE

    View Slide

  55. #todosamam

    View Slide

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

    View Slide

  57. http://pitomba.org/

    View Slide

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

    View Slide

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

    View Slide

  60. http://browserdiet.com/pt

    View Slide

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

    View Slide

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

    View Slide