brunch.io

brunch.io Jökull Sólberg Twitter: @jokull SVEF Reykjavík 26. apríl 2012

My projects:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html
xmlns="http://www.w3.org/1999/xhtml"> 5 × <link rel=”stylesheet” .... 7 × <script ...

<!doctype html> normalize.css, Blueprint, grid.css $(“document”).ready(function(){}); .click(), function(){function(){function(){gubb}}}

HTML5 + Backend •Today’s browser is doing a lot •JavaScript
turns out to be a good language for this work (async and nally a good syntax — Coffee) •The backend delivers a bundled app, a minimal DOM and answers API calls •Development time was around 50/50 backend/ frontend, but today it’s closer to 20/80

<!doctype html> Less $ lessc styles.less > styles.css CoffeeScript coffee
-o ../scripts -cw *.coffee $ -> ($ “.user”).on “click”, (event) -> ...

Naming conventions? .gitignore output? Minify production? Command line overhead watch,
minify, etc. etc.

Brunch A lightweight approach to building HTML5 applications with emphasis
on elegance and simplicity

•Programming languages: JavaScript, CoffeeScript, IcedCoffeeScript, Roy •Pre-compiled templates: Handlebars.js, Jade,
Mustache, Eco •Styles: CSS, Stylus, LESS, Sass •Mini ers: uglify.js, clean-css Brunch is smart about extensions and does the right thing

$ brunch new myspace -s git://github.com/jokull/brunch-template.git 26 Apr 17:09:26 -
info: Created brunch directory layout 26 Apr 17:09:26 - info: Installing packages... $ cd myspace/ $ brunch watch 26 Apr 17:11:30 - info: compiled. $ npm install -g brunch $ brunch new $ brunch watch

A great new feature in Brunch to bootstrap “the right
way” •Handlebars.js vs. Eco? •Stylus vs. LESS? •Spine vs. Backbone.js? •Zepto.js vs. jQuery? •Other built-in features? Django people will recognize this from: django-admin.py --template= $ brunch new --skeleton …

.jpg, .ttf .. .styl stylesheets zepto.js, underscore.js, modernizr.js o.fl.

minify, concatenate, output path, and more tweaking ... basically what
the Rails Asset Pipeline does, except ngerprint con g.coffee

If you host your static assets on a CDN you
might want to: 1.Fingerprint assets 2.Upload assets to CDN at http://host/{fingerprint}/static 3.Easily tell a production instance about a new assets (I use a Redis key) ssh production 'redis set myapp:fingerprint 2v9329vee32' Bonus if you are a Flask person https://gist.github.com/2508588

„extends Model“ Backbone.Event FTW jQuery/Zepto.js just to deal with the
DOM stuff Freebies! Backbone.Model.set auth is a service provider (Facebook JS SDK)

DOM event bindings Rerender on updates remember Model.set from last
slide? userTpl = require 'templates/user'

@views.user = new UserView model: user

http://brunch.io http://github.com/jokull http://backbonejs.org http://calepin.co http://www.furtrade.is/holster Jökull Sólberg Twitter: @jokull

brunch.io

brunch.io

Jökull Sólberg Auðunsson

More Decks by Jökull Sólberg Auðunsson

Other Decks in Programming

Featured

Transcript

brunch.io Jökull Sólberg Twitter: @jokull SVEF Reykjavík 26. apríl 2012

My projects:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html

<!doctype html> normalize.css, Blueprint, grid.css $(“document”).ready(function(){}); .click(), function(){function(){function(){gubb}}}

HTML5 + Backend •Today’s browser is doing a lot •JavaScript

<!doctype html> Less $ lessc styles.less > styles.css CoffeeScript coffee

Naming conventions? .gitignore output? Minify production? Command line overhead watch,

Brunch A lightweight approach to building HTML5 applications with emphasis

•Programming languages: JavaScript, CoffeeScript, IcedCoffeeScript, Roy •Pre-compiled templates: Handlebars.js, Jade,

$ brunch new myspace -s git://github.com/jokull/brunch-template.git 26 Apr 17:09:26 -

A great new feature in Brunch to bootstrap “the right

.jpg, .ttf .. .styl stylesheets zepto.js, underscore.js, modernizr.js o.fl.

minify, concatenate, output path, and more tweaking ... basically what

If you host your static assets on a CDN you

„extends Model“ Backbone.Event FTW jQuery/Zepto.js just to deal with the

DOM event bindings Rerender on updates remember Model.set from last

@views.user = new UserView model: user

http://brunch.io http://github.com/jokull http://backbonejs.org http://calepin.co http://www.furtrade.is/holster Jökull Sólberg Twitter: @jokull