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

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