Vida de programador front-end

  • HTML
  • assets

Vida de programador front-end

  • HTML
  • assets
  • JS
  • CSS

Vida de programador front-end

  • HTML
  • assets
  • JS
  • SCSS->CSS

Vida de programador front-end

  • HTML
  • assets
  • CoffeeScript->JS
  • SCSS->CSS

Vida de programador front-end

  • HTML
  • assets
  • libs e frameworks
  • CoffeeScript->JS
  • SCSS->CSS

Vida de programador front-end

  • I18N->HTML
  • assets
  • libs e frameworks
  • CoffeeScript->JS
  • SCSS->CSS

Vida de programador front-end

  • I18N->HTML
  • assets
  • libs e frameworks
  • CoffeeScript->JS->minification/obfuscation
  • SCSS->CSS->minification

Vida de programador front-end

  • I18N->HTML
  • assets: sprites
  • libs e frameworks
  • CoffeeScript->JS->minification/obfuscation
  • SCSS->CSS->minification

Vida de programador front-end

  • I18N->HTML
  • assets: sprites, image optim
  • libs e frameworks
  • CoffeeScript->JS->minification/obfuscation
  • SCSS->CSS->minification

Vida de programador front-end

  • I18N->HTML
  • assets: sprites, image optim
  • libs e frameworks
  • CoffeeScript->JS->minification/obfuscation
  • SCSS->CSS->minification
  • build: teste, homologação, produção

Vida de programador front-end

  • I18N->HTML
  • assets: sprites, image optim
  • libs e frameworks
  • CoffeeScript->JS->minification/obfuscation
  • SCSS->CSS->minification
  • testes unitários
  • regressão em headless browser
  • build: teste, homologação, produção

Vida de programador front-end

  • I18N->HTML
  • assets: sprites, image optim
  • libs e frameworks
  • CoffeeScript->JS->minification/obfuscation
  • SCSS->CSS->minification
  • testes unitários
  • regressão em headless browser
  • build: teste, homologação, produção
  • deploy: teste, homologação, produção

Vida de programador front-end

  • I18N->HTML
  • assets: sprites, image optim
  • libs e frameworks
  • CoffeeScript->JS->minification/obfuscation
  • SCSS->CSS->minification
  • testes unitários
  • regressão em headless browser
  • build: teste, homologação, produção
  • versionamento
  • deploy: teste, homologação, produção

Vida de programador front-end

  • I18N->HTML
  • assets: sprites, image optim
  • libs e frameworks
  • CoffeeScript->JS->minification/obfuscation
  • SCSS->CSS->minification
  • testes unitários
  • regressão em headless browser
  • build: teste, homologação, produção
  • versionamento
  • deploy: teste, homologação, produção

Vida de programador front-end

  • I18N->HTML; assets: sprites, image optim; libs e frameworks; CoffeeScript->JS->minification/obfuscation; SCSS->CSS->minification; testes unitários; regressão em headless browser; build: teste, homologação, produção; versionamento; deploy: teste, homologação, produção!

  • grunt build, grunt test, ...

GRUNT
The JavaScript Task Runner

Vida de programador front-end

Bootstrap 3.0 saiu, você precisa atualizar!

  • (fica sabendo pelo Twitter)
  • Navega pro site do Bootstrap
  • Faz download do zip
  • Localiza CSSs e JavaScripts e copia para o seu projeto
  • Descobre incompatibilidades
  • Atualiza libs dependentes

Vida de programador front-end

  • (fica sabendo pelo Twitter); Navega pro site do Bootstrap; Faz download do zip; Localiza CSSs e JavaScripts e copia para o seu projeto; Descobre incompatibilidades; Atualiza libs dependentes

  • bower update bootstrap

BOWER
Package manager for the web

Vida de programador front-end

Mês seguinte, projeto novo:

  • copy and paste do projeto antigo, muda HTMLs, JSs, CSSs, assets
  • reza um terço
  • executa grunt build
    • I18N->HTML
    • assets: sprites, image optim
    • libs e frameworks
    • CoffeeScript->JS->minification/obfuscation
    • SCSS->CSS->minification
    • testes unitários
    • regressão em headless browser
    • build: teste, homologação, produção
    • versionamento
    • deploy: teste, homologação, produção

Technical debt: "an obligation incurred when you choose a design or construction approach that's expedient in the short term but that increases complexity and is more costly in the long term." Ward Cunningham

Vida de programador front-end

Mês seguinte, projeto novo:

  • copy and paste do projeto antigo, muda HTMLs, JSs, CSSs, assets; reza um terço; executa grunt build, ...

  • yo webapp
  • yo mycompany-webapp

YEOMAN. Modern workflows for modern webapps

Yeoman

  • Automatiza a criação de apps
  • Configura dependências
  • Configura workflows
  • Fieis parceiros: Bower e Grunt

Yeoman

  • Generators: 

    npm search yeoman-generator
npm install generator-NAME
yo NAME

  • Criar um novo: 

    npm install generator-generator
yo generator
...

(is this Paul Irish?)
criando uma webapp
yo webapp
yo angular
yo angular:view

(of course not! Paul Irish would never dance like this... would him?)
deploy no Heroku
yo heroku

criando generators
yo generator

Roadmap:
participante especial, Addy Osmani

<Thank You!>

Proudly created and presented in a Chromebook Pixel. No (feline) animals were harmed in the making of this preso.