guia prático de desenvolvimento front-end para django devs
DESCRIPTION
Guia prático de desenvolvimento front-end para django devsTRANSCRIPT
davidson fellipefront-end engineer na globo.com
GUIA PRÁTICO DE DESENVOLVIMENTO
FRONT-END PARA DJANGO DEVS
- HTML ~ 2001
- front-end engineer
- globo.com ~ 2010
- mais em fellipe.com
me
globo.com
- + 35 times multidisciplinares
- orientados a metologias ágeis
- grande comunidade opensource
- opensource.globo.com
globo.com
- 3 times multidisciplinares
- todos desenvolvem front-end
área de esportes
https://www.!ickr.com/photos/frontendbr/1691161875/sizes/o/
POR QUEFRONT-END?
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
OTIMIZAR AEXPERIÊ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 DEVELOPERS SO HIGH IN DEMAND AT STARTUPS IF
FRONT END DEVELOPMENT IS RELATIVELY EASIER THAN OTHER
FIELDS OF ENGINEERING?
CÓDIGO QUE FUNCIONA EM DEZENAS DE AMBIENTES
DIFERENTES NAVEGADORESDIFERENTES VERSÕESDIFERENTES RESOLUÇÕESDIFERENTES DISPOSITIVOS
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...
http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg
http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg
É MUITOMAIS QUE
JPG PARA HTML
http:globoesporte.com
http:globoesporte.com
- como carregar os escudos?
- como desenvolver as abas?
- o que acontece quando um time é carregado?
- como buscar um time?
- onde usar wai-aria?
+juntando elementos
CRIEAPPS!
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
premissas- DRY
- componentes
- fontes e icones
- comportamentos iguais em todo site
- possibilidade de temas
- baixa especi"cidade do CSS
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
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
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
CRIETEMPLATE TAGS
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)
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
NÃO QUER CRIAR UM PADRÃO?
CSSVS
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
AUTOMATIZANDOTAREFAS
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 "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
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.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
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
VAMOS CRIAR UM PADRÃO DE
CODIFICAÇÃO?
ASPAS, CHAVES, PONTO E VÍRGULA
SPACE VS TAB
SINGLE QUOTE VS DOUBLE QUOTES
NOMENCLATURAS PARA
FUNCTIONS, OBJECT LITERAL,
CONDITIONAL STATEMENT...
https://github.com/rwaldron/idiomatic.js/
https://github.com/airbnb/javascript
PERFORMANCE
#todosamam
http://www.broofa.com/Tools/JSLitmus/
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