BrunchWithCoffee is a framework for building HTML5 applications using CoffeeScript, Backbone.js, Underscore.js and other libraries. It uses CoffeeScript for code, Stylus for CSS preprocessing and Eco for templating. Apps are configured via a config.yaml file and common dependencies are specified. The framework emphasizes elegance, simplicity and structure using CommonJS for modularity. Examples include a Todo app and a Sushi ordering app built with BrunchWithCoffee.

1. BrunchWithCoffee
http://brunchwithcoffee.com/
Sébastien Gruhier
paris.js
31/08/2011

2. Sébastien Gruhier
http://xilinus.com
http://v2.maptimize.com
sgruhier
sgruhier@gmail.com

3. BrunchWithCoffee
“A lightweight approach to building HTML5
applications with emphasis on elegance and simplicity.”
Créé en Janvier 2011
Thomas Schranz (http://www.blossom.io/)

4. BrunchWithCoffee

5. BrunchWithCoffee
HTML5 Stitch
jQuery
CommonJS Javascript HAML
zepto.js
Mustache
ECO SproutCore
backbone.js CoffeeScript
CSS
SASS SCSS
Templating Engine sencha Stylus
underscore.js

6. BrunchWithCoffee
HTML5 jQuery Stitch
CommonJS
zepto.js
HAML Javascript
ECO Mustache
SproutCore
backbone.js CoffeeScript CSS
SASS SCSS
Templating Engine
sencha
Stylus
underscore.js

7. Aperçu

8. Aperçu
CoffeeScript (little language that compiles into JavaScript)

9. Aperçu
CoffeeScript (little language that compiles into JavaScript)
Backbone.js (supplies structure to JavaScript-heavy applications)

10. Aperçu
CoffeeScript (little language that compiles into JavaScript)
Backbone.js (supplies structure to JavaScript-heavy applications)
Underscore.js (utility-belt library for JavaScript)

11. Aperçu
CoffeeScript (little language that compiles into JavaScript)
Backbone.js (supplies structure to JavaScript-heavy applications)
Underscore.js (utility-belt library for JavaScript)
Stitch(your CommonJS modules together for the browser)

12. Aperçu
CoffeeScript (little language that compiles into JavaScript)
Backbone.js (supplies structure to JavaScript-heavy applications)
Underscore.js (utility-belt library for JavaScript)
Stitch(your CommonJS modules together for the browser)
Eco (Embedded CoffeeScript templates)

13. Aperçu
CoffeeScript (little language that compiles into JavaScript)
Backbone.js (supplies structure to JavaScript-heavy applications)
Underscore.js (utility-belt library for JavaScript)
Stitch(your CommonJS modules together for the browser)
Eco (Embedded CoffeeScript templates)
Stylus (Expressive, dynamic, robust CSS)

14. Aperçu
CoffeeScript (little language that compiles into JavaScript)
Backbone.js (supplies structure to JavaScript-heavy applications)
Underscore.js (utility-belt library for JavaScript)
Stitch(your CommonJS modules together for the browser)
Eco (Embedded CoffeeScript templates)
Stylus (Expressive, dynamic, robust CSS)
jQuery (fast and concise JavaScript Library that simplifies HTML
document traversing, event handling, animating, and Ajax interactions for
rapid web development)

15. Installation
npm install brunch -g
brunch new <APP>
brunch watch <APP>
brunch build -m <APP>

16. Structure
config.yaml
index.html
src/
app/
├── collections
├── main.coffee
├── models
├── routers
│ └── main_router.coffee
├── styles
│ ├── main.styl
│ └── reset.styl
├── templates
│ └── home.eco
└── views
└── home_view.coffee
vendor/
├── ConsoleDummy.js
├── backbone-0.5.2.js
├── jquery-1.6.2.js
└── underscore-1.1.7.js

17. config.yaml
dependencies:
- ConsoleDummy.js
- jquery-1.6.2.js
- underscore-1.1.7.js
- backbone-0.5.2.js
dependencies
buildPath
minify

18. Stylus
body {
font: 12px Helvetica, Arial, sans-serif;
}
a.button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

19. Stylus
body
font: 12px Helvetica, Arial, sans-serif;
a.button
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
Sans les accolades

20. Stylus
body
font: 12px Helvetica, Arial, sans-serif
a.button
-webkit-border-radius: 5px
-moz-border-radius: 5px
border-radius: 5px
Sans les points-virgule

21. Stylus
body
font 12px Helvetica, Arial, sans-serif
a.button
-webkit-border-radius 5px
-moz-border-radius 5px
border-radius 5px
Sans les deux points

22. Stylus
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments
body
font 12px Helvetica, Arial, sans-serif
a.button
border-radius 5px

23. Eco
Template Engine comme ERB mais avec du
CoffeeScript dans <% ... %>
https://github.com/sstephenson/eco

24. CoffeeScript
CommonJS
RestaurantView = require('views/restaurant_view').RestaurantView
class exports.ApplicationRouter extends Backbone.Router
routes :
"" : "home"
home: ->
restaurantView = new RestaurantView(collection: app.restaurant)
$.insertContent($(restaurantView.render().el), direction: -1)

25. CoffeeScript
CommonJS
RestaurantView = require('views/restaurant_view').RestaurantView
class exports.ApplicationRouter extends Backbone.Router
routes :
"" : "home"
home: ->
restaurantView = new RestaurantView(collection: app.restaurant)
$.insertContent($(restaurantView.render().el), direction: -1)

26. CoffeeScript
CommonJS
RestaurantView = require('views/restaurant_view').RestaurantView
class exports.ApplicationRouter extends Backbone.Router
routes :
"" : "home"
home: ->
restaurantView = new RestaurantView(collection: app.restaurant)
$.insertContent($(restaurantView.render().el), direction: -1)

27. index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sushi Bill</title>
<link rel="apple-touch-icon-precomposed" href="images/icon.png">
<link rel="apple-touch-startup-image" href="images/startup.png">
<meta name="viewport"
content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" href="web/css/main.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/iphone.css" type="text/css" media="screen">
<script src="web/js/app.js"></script>
<script>require('main');</script>
</head>
<body>
</body>

28. demos
Todo :
- http://brunch.github.com/example-todos/brunch/build/
SushiBill
- https://github.com/sgruhier/sushi
- http://sushibill.xilinus.com

29. Extra
Zepto Extension
<body>
<div></div> <!-- Content -->
</body>
(($) ->
$.insertContent= (content, options = direction: 1) ->
$.flip= (content) ->
$.flipBack= () ->
# Setup iScroll for a content if need be and if available
$.setupIScroll= (element = null) ->
# Convert rgb(12,5,200) to <prefix>0c05c8
$.hexColorFromString = (color, prefix = '') ->
)(Zepto)