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

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

054c583ad5dc09a861874e14dcb43e4c?s=128

Davidson Fellipe

May 03, 2014
Tweet

Transcript

  1. GUIA PRÁTICO DE DESENVOLVIMENTO FRONT-END PARA DJANGO DEVS davidson fellipe

    front-end engineer na globo.com
  2. - HTML ~ 2001 - front-end engineer - globo.com ~

    2010 - mais em fellipe.com me
  3. globo.com - + 35 times multidisciplinares - orientados a metodologias

    ágeis - grande comunidade opensource - opensource.globo.com
  4. globo.com - 3 times multidisciplinares - todos desenvolvem front-end área

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

  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
  7. OTIMIZAR A EXPERIÊNCIA DO USUÁRIO

  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?
  9. CÓDIGO QUE FUNCIONA EM DEZENAS DE AMBIENTES

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

  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...
  12. http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg

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

  14. É MUITO MAIS QUE JPG PARA HTML

  15. None
  16. http:globoesporte.com

  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?
  18. + juntando elementos

  19. None
  20. CRIE APPS!

  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
  22. None
  23. premissas - DRY - componentes - fontes e ícones -

    comportamentos iguais em todo site - possibilidade de temas - baixa especi"cidade do CSS
  24. pensamos em componentes <header class="geui-title"> <h1 class="geui-title-label"> Normal <span class="geui-title-bold">Bold</span>

    </h1> <a href="#" class="geui-title-more geui-color-default">read more</a> <span class="geui-title-bar geui-color-default"></span> </header> HTML
  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
  26. blocos para elementos {% extends "core/delivery.html" %} {% block css_delivery

    %} {{ block.super }} <link type="text/css" rel="stylesheet" media="screen" href="poll/css/delivery.css"> {% endblock %} delivery.html TEMPLATE app core TEMPLATE app poll
  27. CRIE TEMPLATE TAGS

  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)
  29. dropdown.html <div class="geui-dropdown"> <span class="geui-dropdown-title">{{dropdown.title}}</span> <ul class="geui-dropdown-list"> {% for item

    in dropdown.itens %} <li class="geui-dropdown-list-item"> <a href="{{item.link}}" class="geui-dropdown-list-link" title="{{item.label}}" {% for meta in item.meta %} data-{{meta.label}}="{{meta.valor}}" {% endfor %}>{{item.label}}</a> </li> {% endfor %} </ul> </div> iteração
  30. NÃO QUER CRIAR UM PADRÃO?

  31. None
  32. None
  33. CSS VS PRÉ-PROCESSADOR

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

    uso de mixins
  35. None
  36. None
  37. None
  38. None
  39. PÉSSIMAS PRÁTICAS COM CSS, PODEM SER PIORADAS COM PRÉ-PROCESSADORES

  40. fazendo o mal com scss .bisavo { .avo { .pai

    { #wtf { color: #f60; } } } } .bisavo .avo .pai #wtf { color: #f60; } SCSS CSS
  41. AUTOMATIZANDO TAREFAS

  42. vamos de grunt?

  43. grunt.js - fácil de usar - grande número de plugins

    - imensa comunidade open source
  44. con"gurar node?

  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
  46. tasks - testes - pré-processadores - js/css lint - criar

    sprites - concatenação
  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
  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
  49. VAMOS CRIAR UM PADRÃO DE CODIFICAÇÃO?

  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...
  51. https://github.com/rwaldron/idiomatic.js/

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

  53. http://csslint.net/

  54. PERFORMANCE

  55. #todosamam

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

  57. http://pitomba.org/

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

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

  60. http://browserdiet.com/pt

  61. Qual impacto da performance? - baixas conversões - baixo engajamento

    - altas taxas de rejeição
  62. - fellipe.com/talks - github.com/davidsonfellipe - twitter.com/davidsonfellipe obrigado