Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Guia prático de desenvolvimento front-end para ...

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

Davidson Fellipe

May 03, 2014
Tweet

More Decks by Davidson Fellipe

Other Decks in Programming

Transcript

  1. - HTML ~ 2001 - front-end engineer - globo.com ~

    2010 - mais em fellipe.com me
  2. globo.com - + 35 times multidisciplinares - orientados a metodologias

    ágeis - grande comunidade opensource - opensource.globo.com
  3. 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
  4. 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...
  5. - como carregar os escudos? - como desenvolver as abas?

    - o que acontece quando um time é carregado? - como buscar um novo time? - onde usar wai-aria?
  6. 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
  7. premissas - DRY - componentes - fontes e ícones -

    comportamentos iguais em todo site - possibilidade de temas - baixa especi"cidade do CSS
  8. 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
  9. 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
  10. 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
  11. 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)
  12. 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
  13. fazendo o mal com scss .bisavo { .avo { .pai

    { #wtf { color: #f60; } } } } .bisavo .avo .pai #wtf { color: #f60; } SCSS CSS
  14. $ 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
  15. 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
  16. 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
  17. 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...