modern build workflows with broccoli - scotland js 2014

Broccoli build tool

#sjsJo

Scotland JS 2014

@jo_liss

!

Background

#sjsJo

.coffee

.scss

concat

minify

.handlebars

#sjsJo

grunt watch

#sjsJo

...

#sjsJo

10 sec

#sjsJo

Broccoli

#sjsJo

Part 1: Demo Part 2: Plugin API Part 3: Ecosystem

#sjsJo

Part 1: demo time

#sjsJo

‘lib’

libCompiledCoffeeScript

‘vendor’

javascripts

appJs

concat

‘styles’Sass

appCss ‘public’

output

#sjsJo

#sjsJo

⚠ beta software ahead

#sjsJo

Part 2: Plugin API#sjsJo

tiny API !

big helper libraries

#sjsJo

broccoli-writer

#sjsJo

broccoli-filter !

for 1:1 file relationships

#sjsJo

broccoli-filter: !

processString = function (string) { return newString }

#sjsJo

// CoffeeFilter subclasses Filter !

!

CoffeeFilter.prototype.extensions = ['coffee'] CoffeeFilter.prototype.targetExtension = 'js' !

CoffeeFilter.prototype.processString = function (string) { return coffeeScript.compile(string) }

#sjsJo

broccoli-filter has cache :)

Part 3: Ecosystem !

#sjsJo

Broccoli is a small library

#sjsJo

Broccoli <3 Grunt

#sjsJo

grunt-broccoli

#sjsJo

Integrate with backends

#sjsJo

default stacks e.g. ember-cli

!

bit.ly/broccoli-architecture

#sjsJo

@jo_liss