Guia prático de desenvolvimento front-end para django devs
-
Upload
davidson-fellipe -
Category
Technology
-
view
1.110 -
download
0
description
Transcript of Guia prático de desenvolvimento front-end para django devs
![Page 1: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/1.jpg)
davidson fellipefront-end engineer na globo.com
GUIA PRÁTICO DE DESENVOLVIMENTO
FRONT-END PARA DJANGO DEVS
![Page 2: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/2.jpg)
- HTML ~ 2001
- front-end engineer
- globo.com ~ 2010
- mais em fellipe.com
me
![Page 3: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/3.jpg)
globo.com
- + 35 times multidisciplinares
- orientados a metologias ágeis
- grande comunidade opensource
- opensource.globo.com
![Page 4: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/4.jpg)
globo.com
- 3 times multidisciplinares
- todos desenvolvem front-end
área de esportes
![Page 5: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/5.jpg)
https://www.!ickr.com/photos/frontendbr/1691161875/sizes/o/
POR QUEFRONT-END?
![Page 6: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/6.jpg)
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
![Page 7: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/7.jpg)
OTIMIZAR AEXPERIÊNCIA DO
USUÁRIO
![Page 8: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/8.jpg)
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?
![Page 9: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/9.jpg)
CÓDIGO QUE FUNCIONA EM DEZENAS DE AMBIENTES
![Page 10: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/10.jpg)
DIFERENTES NAVEGADORESDIFERENTES VERSÕESDIFERENTES RESOLUÇÕESDIFERENTES DISPOSITIVOS
![Page 11: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/11.jpg)
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...
![Page 12: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/12.jpg)
http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg
![Page 13: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/13.jpg)
http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg
![Page 14: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/14.jpg)
É MUITOMAIS QUE
JPG PARA HTML
![Page 15: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/15.jpg)
![Page 16: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/16.jpg)
http:globoesporte.com
![Page 17: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/17.jpg)
http:globoesporte.com
![Page 18: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/18.jpg)
- como carregar os escudos?
- como desenvolver as abas?
- o que acontece quando um time é carregado?
- como buscar um time?
- onde usar wai-aria?
![Page 19: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/19.jpg)
+juntando elementos
![Page 20: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/20.jpg)
![Page 21: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/21.jpg)
CRIEAPPS!
![Page 22: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/22.jpg)
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
appcore do produto
appnews
apppolls
requirements.txt
![Page 23: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/23.jpg)
![Page 24: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/24.jpg)
premissas- DRY
- componentes
- fontes e icones
- comportamentos iguais em todo site
- possibilidade de temas
- baixa especi"cidade do CSS
![Page 25: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/25.jpg)
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
![Page 26: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/26.jpg)
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
![Page 27: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/27.jpg)
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
TEMPLATEapp core
TEMPLATEapp poll
![Page 28: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/28.jpg)
CRIETEMPLATE TAGS
![Page 29: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/29.jpg)
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 = Trueregister.filter(ge_ui_dropdown)
![Page 30: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/30.jpg)
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
![Page 31: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/31.jpg)
NÃO QUER CRIAR UM PADRÃO?
![Page 32: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/32.jpg)
![Page 33: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/33.jpg)
![Page 34: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/34.jpg)
CSSVS
PRÉ-PROCESSADOR
![Page 35: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/35.jpg)
vantagens
- produtividade
- facilidade de trabalhar com módulos
- uso de mixins
![Page 36: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/36.jpg)
![Page 37: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/37.jpg)
![Page 38: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/38.jpg)
![Page 39: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/39.jpg)
![Page 40: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/40.jpg)
PÉSSIMAS PRÁTICAS COM CSS, PODEM SER
PIORADAS COM PRÉ-PROCESSADORES
![Page 41: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/41.jpg)
fazendo o mal com scss
.bisavo {
.avo {
.pai {
#wtf {
color: #f60;
}
}
}
}
.bisavo .avo .pai #wtf {
color: #f60;
}
SCSS CSS
![Page 42: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/42.jpg)
AUTOMATIZANDOTAREFAS
![Page 43: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/43.jpg)
vamos de grunt?
![Page 44: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/44.jpg)
grunt.js
- fácil de usar
- grande número de plugins
- imensa comunidade open source
![Page 45: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/45.jpg)
con"gurar node?
![Page 46: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/46.jpg)
$ 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
![Page 47: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/47.jpg)
tasks
- testes
- pré-processadores
- js/css lint
- criar sprites
- concatenação
![Page 48: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/48.jpg)
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
![Page 49: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/49.jpg)
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
![Page 50: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/50.jpg)
VAMOS CRIAR UM PADRÃO DE
CODIFICAÇÃO?
![Page 51: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/51.jpg)
ASPAS, CHAVES, PONTO E VÍRGULA
SPACE VS TAB
SINGLE QUOTE VS DOUBLE QUOTES
NOMENCLATURAS PARA
FUNCTIONS, OBJECT LITERAL,
CONDITIONAL STATEMENT...
![Page 52: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/52.jpg)
https://github.com/rwaldron/idiomatic.js/
![Page 53: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/53.jpg)
https://github.com/airbnb/javascript
![Page 55: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/55.jpg)
PERFORMANCE
![Page 56: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/56.jpg)
#todosamam
![Page 57: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/57.jpg)
http://www.broofa.com/Tools/JSLitmus/
![Page 59: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/59.jpg)
https://github.com/django-compressor/django-compressor
![Page 60: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/60.jpg)
https://github.com/davidsonfellipe/keepfast/
![Page 61: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/61.jpg)
http://browserdiet.com/pt
![Page 62: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/62.jpg)
Qual impacto da performance?- baixas conversões
- baixo engajamento
- altas taxas de rejeição
![Page 63: Guia prático de desenvolvimento front-end para django devs](https://reader035.fdocuments.us/reader035/viewer/2022062300/554f642eb4c905c8088b4c46/html5/thumbnails/63.jpg)
- fellipe.com/talks
- github.com/davidsonfellipe
- twitter.com/davidsonfellipe
obrigado