Brunch With Coffee

4,570 views

Published on

Brunch With Coffee slides for my presentation at ParisJS (August 31st, 2012)

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,570
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
27
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Brunch With Coffee

    1. 1. BrunchWithCoffee http://brunchwithcoffee.com/ Sébastien Gruhier paris.js 31/08/2011
    2. 2. Sébastien Gruhier http://xilinus.com http://v2.maptimize.com sgruhier sgruhier@gmail.com
    3. 3. BrunchWithCoffee “A lightweight approach to building HTML5applications with emphasis on elegance and simplicity.” Créé en Janvier 2011 Thomas Schranz (http://www.blossom.io/)
    4. 4. BrunchWithCoffee
    5. 5. BrunchWithCoffee HTML5 Stitch jQuery CommonJS Javascript HAML zepto.js Mustache ECO SproutCorebackbone.js CoffeeScript CSS SASS SCSS Templating Engine sencha Stylus underscore.js
    6. 6. BrunchWithCoffee HTML5 jQuery Stitch CommonJS zepto.js HAML Javascript ECO Mustache SproutCorebackbone.js CoffeeScript CSS SASS SCSS Templating Engine sencha Stylus underscore.js
    7. 7. Aperçu
    8. 8. AperçuCoffeeScript (little language that compiles into JavaScript)
    9. 9. AperçuCoffeeScript (little language that compiles into JavaScript)Backbone.js (supplies structure to JavaScript-heavy applications)
    10. 10. AperçuCoffeeScript (little language that compiles into JavaScript)Backbone.js (supplies structure to JavaScript-heavy applications)Underscore.js (utility-belt library for JavaScript)
    11. 11. AperçuCoffeeScript (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. 12. AperçuCoffeeScript (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. 13. AperçuCoffeeScript (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. 14. AperçuCoffeeScript (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 HTMLdocument traversing, event handling, animating, and Ajax interactions forrapid web development)
    15. 15. Installationnpm install brunch -gbrunch new <APP>brunch watch <APP>brunch build -m <APP>
    16. 16. Structureconfig.yamlindex.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. 17. config.yaml dependencies: - ConsoleDummy.js - jquery-1.6.2.js - underscore-1.1.7.js - backbone-0.5.2.jsdependenciesbuildPathminify
    18. 18. Stylusbody { font: 12px Helvetica, Arial, sans-serif;}a.button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
    19. 19. Stylusbody font: 12px Helvetica, Arial, sans-serif;a.button -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; Sans les accolades
    20. 20. Stylusbody font: 12px Helvetica, Arial, sans-serifa.button -webkit-border-radius: 5px -moz-border-radius: 5px border-radius: 5px Sans les points-virgule
    21. 21. Stylusbody font 12px Helvetica, Arial, sans-serifa.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px Sans les deux points
    22. 22. Stylusborder-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius argumentsbody font 12px Helvetica, Arial, sans-serifa.button border-radius 5px
    23. 23. EcoTemplate Engine comme ERB mais avec duCoffeeScript dans <% ... %>https://github.com/sstephenson/eco
    24. 24. CoffeeScript CommonJSRestaurantView = require(views/restaurant_view).RestaurantViewclass exports.ApplicationRouter extends Backbone.Router  routes :    "" : "home"          home: ->    restaurantView = new RestaurantView(collection: app.restaurant)    $.insertContent($(restaurantView.render().el), direction: -1)      
    25. 25. CoffeeScript CommonJSRestaurantView = require(views/restaurant_view).RestaurantViewclass exports.ApplicationRouter extends Backbone.Router  routes :    "" : "home"          home: ->    restaurantView = new RestaurantView(collection: app.restaurant)    $.insertContent($(restaurantView.render().el), direction: -1)      
    26. 26. CoffeeScript CommonJSRestaurantView = require(views/restaurant_view).RestaurantViewclass exports.ApplicationRouter extends Backbone.Router  routes :    "" : "home"          home: ->    restaurantView = new RestaurantView(collection: app.restaurant)    $.insertContent($(restaurantView.render().el), direction: -1)      
    27. 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. 28. demosTodo :- http://brunch.github.com/example-todos/brunch/build/SushiBill- https://github.com/sgruhier/sushi- http://sushibill.xilinus.com
    29. 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)

    ×