1) O documento discute estratégias e ferramentas para desenvolvimento front-end em Django, incluindo HTML, CSS, JavaScript, pré-processadores, frameworks, automação de tarefas e padrões de codificação. 2) É destacada a importância da performance no front-end e são apresentadas ferramentas para teste e otimização como JSLitmus e Pitomba. 3) O autor fornece seus contatos e recursos adicionais para aqueles interessados no tópico.

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

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

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

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?

33. CSS
VS
PRÉ-PROCESSADOR

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

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