Guia prático de desenvolvimento front-end para django devs
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 1,187 views

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

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

Statistics

Views

Total Views
1,187
Views on SlideShare
1,177
Embed Views
10

Actions

Likes
6
Downloads
13
Comments
0

3 Embeds 10

https://twitter.com 4
http://www.slideee.com 4
http://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Guia prático de desenvolvimento front-end para django devs Presentation 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. http:globoesporte.com
  • 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?
  • 17. + juntando elementos
  • 18. CRIE APPS!
  • 19. 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
  • 20. premissas - DRY - componentes - fontes e ícones - comportamentos iguais em todo site - possibilidade de temas - baixa especi"cidade do CSS
  • 21. 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
  • 22. 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
  • 23. 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
  • 24. CRIE TEMPLATE TAGS
  • 25. 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)
  • 26. 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
  • 27. NÃO QUER CRIAR UM PADRÃO?
  • 28. CSS VS PRÉ-PROCESSADOR
  • 29. vantagens - produtividade - facilidade de trabalhar com módulos - uso de mixins
  • 30. PÉSSIMAS PRÁTICAS COM CSS, PODEM SER PIORADAS COM PRÉ-PROCESSADORES
  • 31. fazendo o mal com scss .bisavo { .avo { .pai { #wtf { color: #f60; } } } } .bisavo .avo .pai #wtf { color: #f60; } SCSS CSS
  • 32. AUTOMATIZANDO TAREFAS
  • 33. vamos de grunt?
  • 34. grunt.js - fácil de usar - grande número de plugins - imensa comunidade open source
  • 35. con"gurar node?
  • 36. $ 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
  • 37. tasks - testes - pré-processadores - js/css lint - criar sprites - concatenação
  • 38. 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
  • 39. 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
  • 40. VAMOS CRIAR UM PADRÃO DE CODIFICAÇÃO?
  • 41. 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...
  • 42. https://github.com/rwaldron/idiomatic.js/
  • 43. https://github.com/airbnb/javascript
  • 44. http://csslint.net/
  • 45. PERFORMANCE
  • 46. #todosamam
  • 47. http://www.broofa.com/Tools/JSLitmus/
  • 48. http://pitomba.org/
  • 49. https://github.com/django-compressor/django-compressor
  • 50. https://github.com/davidsonfellipe/keepfast/
  • 51. http://browserdiet.com/pt
  • 52. Qual impacto da performance? - baixas conversões - baixo engajamento - altas taxas de rejeição
  • 53. - fellipe.com/talks - github.com/davidsonfellipe - twitter.com/davidsonfellipe obrigado