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

transcript

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

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

É MUITOMAIS 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 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

Normal <span class="geui-title-bold">Bold</span>

</header> HTML

|-scss |---ge_ui |---vendor TERMINAL

blocos para elementos

{% extends "core/delivery.html" %}

{% block css_delivery %}

{% 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?

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

- 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"

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']);

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

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

Technology