SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
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
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?
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?
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.
premissas
- DRY
- componentes
- fontes e ícones
- comportamentos iguais em todo site
- possibilidade de temas
- baixa especi"cidade do CSS
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.
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