frontend workflow

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

time-machine

web 2.0

• tag-clouds
• user participation
• all about the user
• cloud
• not userfriendly

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

adding functionality

exercise

configure autoprefixer

1. create src dir
2. add css
3. install gulp-autoprefixer
4. configure autoprefixer task in gulp
   ( remember where the build result should be? )
5. run gulp

configure css minifier

1. install gulp-minify-css
2. configure minify css task in gulp
   ( add to existing css pipe )
3. run gulp

configure watch, browsersync & html task

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