GUIA PRÁTICO DE
DESENVOLVIMENTO
FRONT-END PARA
DJANGO DEVS
davidson fellipe
front-end engineer na globo.com
- HTML ~ 2001
- front-end engineer
- globo.com ~ 2010
- mais em fellipe.com
me
globo.com
- + 35 times multidisciplinares
- orientados a metodologias ágeis
- grande comunidade opensource
- opensource.gl...
globo.com
- 3 times multidisciplinares
- todos desenvolvem front-end
área de esportes
https://www.!ickr.com/photos/frontendbr/1691161875/sizes/o/
POR QUE
FRONT-END?
94%
tempo de carregamento,
neste exemplo,
está ligado a componentes
no lado cliente
http://gtmetrix.com/har.html?inputUrl=...
OTIMIZAR A
EXPERIÊNCIA DO
USUÁRIO
http://www.reddit.com/r/javascript/comments/14zwpv/why_are_front_end_developers_so_high_in_demand_at/
WHY ARE FRONT END DE...
CÓDIGO QUE
FUNCIONA EM
DEZENAS DE
AMBIENTES
DIFERENTES NAVEGADORES
DIFERENTES VERSÕES
DIFERENTES RESOLUÇÕES
DIFERENTES DISPOSITIVOS
HTML, CSS, JAVASCRIPT, FEATURE DETECTION,
REPAINT, REFLOW, PRÉ-PROCESSADORES, HTTP,
CSRF, XSS, TIME FUNCTIONS PARA ANIMAÇÕ...
http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2....
http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2....
É MUITO
MAIS QUE
JPG PARA HTML
http:globoesporte.com
- como carregar
os escudos?
- como desenvolver
as abas?
- o que acontece
quando um time é
carregado?
- como buscar um
novo...
+
juntando elementos
CRIE
APPS!
exemplo de uma
aplicação
- divisão de
responsabilidades
- testes para cada app
- instalação e gestão
de dependências via
p...
premissas
- DRY
- componentes
- fontes e ícones
- comportamentos iguais em todo site
- possibilidade de temas
- baixa espe...
pensamos em
componentes
<header class="geui-title">
<h1 class="geui-title-label">
Normal <span class="geui-title-bold">Bol...
arrumando a casa
(ge)davidson ➜ .../ge_ui/static (master) $ tree
|-fonts
|---icons
|---opensans
|-img
|---ge_ui
|-----plac...
blocos para
elementos
{% extends "core/delivery.html" %}
{% block css_delivery %}
{{ block.super }}
<link type="text/css"
...
CRIE
TEMPLATE TAGS
template tag
# -*- coding: utf-8 -*-
from django.template import Library
register = Library()
@register.inclusion_tag('com...
dropdown.html
<div class="geui-dropdown">
<span class="geui-dropdown-title">{{dropdown.title}}</span>
<ul class="geui-drop...
NÃO QUER
CRIAR UM PADRÃO?
CSS
VS
PRÉ-PROCESSADOR
vantagens
- produtividade
- facilidade de trabalhar
com módulos
- uso de mixins
PÉSSIMAS PRÁTICAS
COM CSS, PODEM SER
PIORADAS COM
PRÉ-PROCESSADORES
fazendo o mal com scss
.bisavo {
.avo {
.pai {
#wtf {
color: #f60;
}
}
}
}
.bisavo .avo .pai #wtf {
color: #f60;
}
SCSS CSS
AUTOMATIZANDO
TAREFAS
vamos de grunt?
grunt.js
- fácil de usar
- grande número de plugins
- imensa comunidade open source
con"gurar node?
$ make grunt-con"g
grunt-config:
@if [ ! $$(which node) ]; then echo "✖ installing node..."; brew
install node; else echo ...
tasks
- testes
- pré-processadores
- js/css lint
- criar sprites
- concatenação
package
.json
{
"name": "poll",
"version": "0.0.1",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-jshint": "~0.6....
Grunt"le
.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file
.readJSON('package.json'),
pathBase: 'p...
VAMOS CRIAR UM
PADRÃO DE
CODIFICAÇÃO?
padrões
- aspas, chaves, ponto e vírgula
- espaçoes vs tabulações
- aspas simples vs apas duplas
- nomenclaturas para func...
https://github.com/rwaldron/idiomatic.js/
https://github.com/airbnb/javascript
http://csslint.net/
PERFORMANCE
#todosamam
http://www.broofa.com/Tools/JSLitmus/
http://pitomba.org/
https://github.com/django-compressor/django-compressor
https://github.com/davidsonfellipe/keepfast/
http://browserdiet.com/pt
Qual impacto da
performance?
- baixas conversões
- baixo engajamento
- altas taxas de rejeição
- fellipe.com/talks
- github.com/davidsonfellipe
- twitter.com/davidsonfellipe
obrigado
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
Upcoming SlideShare
Loading in...5
×

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

1,210

Published on

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

Published in: Technology

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

  1. 1. GUIA PRÁTICO DE DESENVOLVIMENTO FRONT-END PARA DJANGO DEVS davidson fellipe front-end engineer na globo.com
  2. 2. - HTML ~ 2001 - front-end engineer - globo.com ~ 2010 - mais em fellipe.com me
  3. 3. globo.com - + 35 times multidisciplinares - orientados a metodologias ágeis - grande comunidade opensource - opensource.globo.com
  4. 4. globo.com - 3 times multidisciplinares - todos desenvolvem front-end área de esportes
  5. 5. https://www.!ickr.com/photos/frontendbr/1691161875/sizes/o/ POR QUE FRONT-END?
  6. 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. 7. OTIMIZAR A EXPERIÊNCIA DO USUÁRIO
  8. 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. 9. CÓDIGO QUE FUNCIONA EM DEZENAS DE AMBIENTES
  10. 10. DIFERENTES NAVEGADORES DIFERENTES VERSÕES DIFERENTES RESOLUÇÕES DIFERENTES DISPOSITIVOS
  11. 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. 12. http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg
  13. 13. http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg
  14. 14. É MUITO MAIS QUE JPG PARA HTML
  15. 15. http:globoesporte.com
  16. 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. 17. + juntando elementos
  18. 18. CRIE APPS!
  19. 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. 20. premissas - DRY - componentes - fontes e ícones - comportamentos iguais em todo site - possibilidade de temas - baixa especi"cidade do CSS
  21. 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. 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. 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. 24. CRIE TEMPLATE TAGS
  25. 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. 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. 27. NÃO QUER CRIAR UM PADRÃO?
  28. 28. CSS VS PRÉ-PROCESSADOR
  29. 29. vantagens - produtividade - facilidade de trabalhar com módulos - uso de mixins
  30. 30. PÉSSIMAS PRÁTICAS COM CSS, PODEM SER PIORADAS COM PRÉ-PROCESSADORES
  31. 31. fazendo o mal com scss .bisavo { .avo { .pai { #wtf { color: #f60; } } } } .bisavo .avo .pai #wtf { color: #f60; } SCSS CSS
  32. 32. AUTOMATIZANDO TAREFAS
  33. 33. vamos de grunt?
  34. 34. grunt.js - fácil de usar - grande número de plugins - imensa comunidade open source
  35. 35. con"gurar node?
  36. 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. 37. tasks - testes - pré-processadores - js/css lint - criar sprites - concatenação
  38. 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. 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. 40. VAMOS CRIAR UM PADRÃO DE CODIFICAÇÃO?
  41. 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. 42. https://github.com/rwaldron/idiomatic.js/
  43. 43. https://github.com/airbnb/javascript
  44. 44. http://csslint.net/
  45. 45. PERFORMANCE
  46. 46. #todosamam
  47. 47. http://www.broofa.com/Tools/JSLitmus/
  48. 48. http://pitomba.org/
  49. 49. https://github.com/django-compressor/django-compressor
  50. 50. https://github.com/davidsonfellipe/keepfast/
  51. 51. http://browserdiet.com/pt
  52. 52. Qual impacto da performance? - baixas conversões - baixo engajamento - altas taxas de rejeição
  53. 53. - fellipe.com/talks - github.com/davidsonfellipe - twitter.com/davidsonfellipe obrigado
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×