Transferir como PDF, PPTX
![$ 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](https://image.slidesharecdn.com/guiapraticodedesenvolvimentofront-endparadjangodevs-140503182333-phpapp02/75/Guia-pratico-de-desenvolvimento-front-end-para-django-devs-45-2048.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](https://image.slidesharecdn.com/guiapraticodedesenvolvimentofront-endparadjangodevs-140503182333-phpapp02/75/Guia-pratico-de-desenvolvimento-front-end-para-django-devs-48-2048.jpg)
Carregado porDavidson Fellipe
Guia prático de desenvolvimento front-end para django devs
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.
Mais conteúdo relacionado
Semelhante a 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-ENDPARA 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 - + 35times multidisciplinares - orientados a metodologias ágeis - grande comunidade opensource - opensource.globo.com
- 4. globo.com - 3 timesmultidisciplinares - todos desenvolvem front-end área de esportes
- 5.
- 6. 94% tempo de carregamento, nesteexemplo, 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.
- 8. http://www.reddit.com/r/javascript/comments/14zwpv/why_are_front_end_developers_so_high_in_demand_at/ WHY ARE FRONTEND 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 DEZENASDE AMBIENTES
- 10. DIFERENTES NAVEGADORES DIFERENTES VERSÕES DIFERENTESRESOLUÇÕ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.
- 13.
- 14. É MUITO MAIS QUE JPGPARA HTML
- 16.
- 17. - como carregar osescudos? - como desenvolver as abas? - o que acontece quando um time é carregado? - como buscar um novo time? - onde usar wai-aria?
- 18.
- 20.
- 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"> <h1class="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.
- 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> <ulclass="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 UMPADRÃO?
- 33.
- 34. vantagens - produtividade - facilidadede trabalhar com módulos - uso de mixins
- 39. PÉSSIMAS PRÁTICAS COM CSS,PODEM SER PIORADAS COM PRÉ-PROCESSADORES
- 40. fazendo o malcom scss .bisavo { .avo { .pai { #wtf { color: #f60; } } } } .bisavo .avo .pai #wtf { color: #f60; } SCSS CSS
- 41.
- 42.
- 43. grunt.js - fácil deusar - grande número de plugins - imensa comunidade open source
- 44.
- 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ÃODE 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.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 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