frontend workflow – rob van der burgt – kasper reijnders

View Github Repository Open presentation in a new window

kaspereden

See all presentation from kaspereden

frontend workflow – rob van der burgt – kasper reijnders

0 0

workflow-presentation-HU

Presentation about workflows given at the Hogeschool Utrecht

On Github kaspereden / workflow-presentation-HU

frontend workflow

Created by Rob van der Burgt & Kasper Reijnders

rob van der burgt

kasper reijnders

incentro

#worldofincentro

If you want to know more or if you're interested in an internship mail Rob or Kasper

what is frontend?

frontend is everything that has to do with browser behaviour.

question of the day

time-machine

a brief history
first website
then came design from the press
sites got body

web 2.0

  • tag-clouds
  • user participation
  • all about the user
  • cloud
  • not userfriendly
ship appeared -> web 2.0
sites got responsive
sites got adaptive

so where are we now?

  • accessibility
  • adaptive
  • analytics
  • build process
  • conversion
  • design
  • different browsers
  • pre-processors
  • responsive
  • sea
  • seo
  • speed
  • smartphones
  • smartwatches
  • technology
  • testability
  • tracking
  • user experience
  • and so on...

two challenges

1: high knowledge level

  • Large initial investment
  • High experience required

2: manual actions

  • High error risk
  • Time consuming
  • Difficult handover

existing solution

libraries

  • jQuery
  • dom.js
  • ..

frameworks

  • Backbone.js
  • Angular
  • Ember.js
  • ..

preprocessors

  • SCSS
  • Less
  • Autprefixer
  • ..

minifiers

  • YUI compresor
  • css optim
  • ..

build scripts

  • ant
  • maven
  • ..

All set

Tough luck

task runners

sugar, spice, and everything nice!

grunt

gulp

enter node.js

$

install node.js

Windows go to nodejs.org download nodejs install nodejs Mac OSX install homebrew http://brew.sh/ run brew install node

try $ node --version or $ npm --version

when a version number shows up you are done

https://github.com/kaspereden/workflow-example

install Gulp

and add it to package.json

$ npm install gulp --save-dev

adding functionality

exercise

configure autoprefixer

create src dir add css install gulp-autoprefixer configure autoprefixer task in gulp( remember where the build result should be? ) run gulp

configure css minifier

install gulp-minify-css configure minify css task in gulp( add to existing css pipe ) run gulp

configure watch, browsersync & html task

create task to copy html from source to build directory create watch task wich starts browsersync and automatically executes tasks install browsersync, serve files from build directory run gulp

#worldofincentro

If you want to know more or if you're interested in an internship mail Rob or Kasper