80beans  application  development
Front-end meta languages   Voor gelukkigere front- én back-enders.
Roy Tomeij80beans & SliceCraft@royroy@80beans.com
Roy Tomeij80beans & SliceCraft@royroy@80beans.com
Wat zijn front-end meta languages? Front-end meta languages zijn talen die compilerennaar HTML, CSS of JavaScript maar dat...
Waarom?
Waarom?•   Snellere productie
Waarom?•   Snellere productie•   DRY (Don’t Repeat Yourself)
Waarom?•   Snellere productie•   DRY (Don’t Repeat Yourself)•   Minder ruimte voor het maken van fouten
Waarom?•   Snellere productie•   DRY (Don’t Repeat Yourself)•   Minder ruimte voor het maken van fouten•   Betere performa...
Waarom?•   Snellere productie•   DRY (Don’t Repeat Yourself)•   Minder ruimte voor het maken van fouten•   Betere performa...
Welke talen?
Welke talen?•   Haml
Welke talen?•   Haml•   Sass (& Compass)
Welke talen?•   Haml•   Sass (& Compass)•   CoffeeScript
Haml•   Volwassen; versie 1.0 stamt uit 2006
Haml•   Volwassen; versie 1.0 stamt uit 2006•   Draait op Ruby (plugin voor Rails)
Haml•   Volwassen; versie 1.0 stamt uit 2006•   Draait op Ruby (plugin voor Rails)•   Geport naar o.a. PHP, Python, .NET, ...
Haml•   Volwassen; versie 1.0 stamt uit 2006•   Draait op Ruby (plugin voor Rails)•   Geport naar o.a. PHP, Python, .NET, ...
Haml•   Volwassen; versie 1.0 stamt uit 2006•   Draait op Ruby (plugin voor Rails)•   Geport naar o.a. PHP, Python, .NET, ...
!!! 5                                 <!DOCTYPE html>%section#about                        <section id="about">  %h1 About...
Sass•   Maakt onderdeel uit van Haml
Sass•   Maakt onderdeel uit van Haml•   Wordt in versie 3.1 losgekoppeld van Haml
Sass•   Maakt onderdeel uit van Haml•   Wordt in versie 3.1 losgekoppeld van Haml•   Kan in ieder project gebruikt worden
Sass•   Maakt onderdeel uit van Haml•   Wordt in versie 3.1 losgekoppeld van Haml•   Kan in ieder project gebruikt worden•...
Sass•   Maakt onderdeel uit van Haml•   Wordt in versie 3.1 losgekoppeld van Haml•   Kan in ieder project gebruikt worden•...
Sass                   CSSsection                section {  color: #ff0            color: #ff0;                       }  p...
Sass                   SCSSsection                section {  color: #ff0            color: #ff0;                          ...
Sass (fancy stuff)•   Variables
Sass (fancy stuff)•   Variables•   Mixins
Sass (fancy stuff)•   Variables•   Mixins•   Partials
Sass (fancy stuff)•   Variables•   Mixins•   Partials•   Operations & functions (math, kleurberekening, etc.)
$contrast: #ff0                             a {$hover: #ccc                                  color: #ff0;                 ...
$color: whitep                                            p {    width: ceil(10.4px)                        width: 11px;  ...
Compass•   Collectie van veelgebruikte Sass mixins
Compass•   Collectie van veelgebruikte Sass mixins•   Diverse helpers
Compass•   Collectie van veelgebruikte Sass mixins•   Diverse helpers•   Genereert o.a. image sprites
Compass•   Collectie van veelgebruikte Sass mixins•   Diverse helpers•   Genereert o.a. image sprites•   Mixins voor CSS f...
@import "compass/css3/border-radius".foo  @include border-radius(10px)                   .foo {                           ...
$icons: sprite-map("icons/*.png", $spacing: ↵20px).icon1                                          .icon1 {  background: sp...
$icons: sprite-map("icons/*.png", $spacing: ↵20px).icon1                                          .icon1 {  background: sp...
$icons: sprite-map("icons/*.png", $spacing: ↵20px).icon1                                          .icon1 {  background: sp...
CoffeeScript•   Geen JS library
CoffeeScript•   Geen JS library•   Werkt probleemloos samen met JS library’s
CoffeeScript•   Geen JS library•   Werkt probleemloos samen met JS library’s•   Gecompileerde code is JS Lint-vriendelijk
CoffeeScript•   Geen JS library•   Werkt probleemloos samen met JS library’s•   Gecompileerde code is JS Lint-vriendelijk•...
(function() {some_var = 10                   var foo, some_var;                                some_var = 10;$(a).each -> ...
(function() {                                 var number, opposite;# Assignmentnumber = 42                     number = 42...
(function() {                                              var food, fronteers, _i, _len, _ref;# Objectfronteers =        ...
Happy back-enders
Happy back-enders•   Meta languages zijn duidelijker voor back-enders (en dus sneller te    implementeren), mits ze de tal...
Happy back-enders•   Meta languages zijn duidelijker voor back-enders (en dus sneller te    implementeren), mits ze de tal...
Happy back-enders•   Meta languages zijn duidelijker voor back-enders (en dus sneller te    implementeren), mits ze de tal...
Happy back-enders•   Meta languages zijn duidelijker voor back-enders (en dus sneller te    implementeren), mits ze de tal...
Vragen? (of opmerkingen)
Credits•   http://laserey.es/•   http://www.flickr.com/photos/piechnik/4686817259•   http://www.flickr.com/photos/lwr/487670...
Credits•   http://laserey.es/•   http://www.flickr.com/photos/piechnik/4686817259•   http://www.flickr.com/photos/lwr/487670...
Upcoming SlideShare
Loading in …5
×

Front-end meta languages

2,288 views

Published on

Slides (Dutch) for my presentation for Fronteers on front-end meta languages like Haml and Sass.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,288
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • Eigen definitie.\n
  • \n
  • Snellere productie: SliceCraft\n
  • Snellere productie: SliceCraft\n
  • Snellere productie: SliceCraft\n
  • Snellere productie: SliceCraft\n
  • Snellere productie: SliceCraft\n
  • \n
  • Geen LESS omdat 80beans een Rails-shop is.\n
  • Geen LESS omdat 80beans een Rails-shop is.\n
  • Geen LESS omdat 80beans een Rails-shop is.\n
  • Hampton Catlin\n
  • Hampton Catlin\n
  • Hampton Catlin\n
  • Hampton Catlin\n
  • Hampton Catlin\n
  • Duidelijke structuur door indentation. Daardoor duidelijke relatie markup / css (selectors). Error bij fouten.\n
  • &amp;#x201C;Haml voor CSS&amp;#x201D;\n
  • &amp;#x201C;Haml voor CSS&amp;#x201D;\n
  • &amp;#x201C;Haml voor CSS&amp;#x201D;\n
  • &amp;#x201C;Haml voor CSS&amp;#x201D;\n
  • &amp;#x201C;Haml voor CSS&amp;#x201D;\n
  • SCSS volgende slide.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Operations &amp; functions. Laatste is blauw + rood.\n
  • Chris Eppstein\n
  • Chris Eppstein\n
  • Chris Eppstein\n
  • Chris Eppstein\n
  • \n
  • Timestamp in sprite filename.\n
  • Timestamp in sprite filename.\n
  • \n
  • \n
  • \n
  • \n
  • this = window\n
  • \n
  • \n
  • \n
  • Als een back-ender geen HTML of HAML kent, leer dan HAML.\n
  • Als een back-ender geen HTML of HAML kent, leer dan HAML.\n
  • Als een back-ender geen HTML of HAML kent, leer dan HAML.\n
  • Als een back-ender geen HTML of HAML kent, leer dan HAML.\n
  • \n
  • \n
  • Front-end meta languages

    1. 1. 80beans application development
    2. 2. Front-end meta languages Voor gelukkigere front- én back-enders.
    3. 3. Roy Tomeij80beans & SliceCraft@royroy@80beans.com
    4. 4. Roy Tomeij80beans & SliceCraft@royroy@80beans.com
    5. 5. Wat zijn front-end meta languages? Front-end meta languages zijn talen die compilerennaar HTML, CSS of JavaScript maar dat zelf niet zijn.
    6. 6. Waarom?
    7. 7. Waarom?• Snellere productie
    8. 8. Waarom?• Snellere productie• DRY (Don’t Repeat Yourself)
    9. 9. Waarom?• Snellere productie• DRY (Don’t Repeat Yourself)• Minder ruimte voor het maken van fouten
    10. 10. Waarom?• Snellere productie• DRY (Don’t Repeat Yourself)• Minder ruimte voor het maken van fouten• Betere performance (minder HTTP-requests) "out of the box"
    11. 11. Waarom?• Snellere productie• DRY (Don’t Repeat Yourself)• Minder ruimte voor het maken van fouten• Betere performance (minder HTTP-requests) "out of the box"• Makkelijker overdraagbaar en onderhoudbaar
    12. 12. Welke talen?
    13. 13. Welke talen?• Haml
    14. 14. Welke talen?• Haml• Sass (& Compass)
    15. 15. Welke talen?• Haml• Sass (& Compass)• CoffeeScript
    16. 16. Haml• Volwassen; versie 1.0 stamt uit 2006
    17. 17. Haml• Volwassen; versie 1.0 stamt uit 2006• Draait op Ruby (plugin voor Rails)
    18. 18. Haml• Volwassen; versie 1.0 stamt uit 2006• Draait op Ruby (plugin voor Rails)• Geport naar o.a. PHP, Python, .NET, Java en Perl
    19. 19. Haml• Volwassen; versie 1.0 stamt uit 2006• Draait op Ruby (plugin voor Rails)• Geport naar o.a. PHP, Python, .NET, Java en Perl• Indentation based
    20. 20. Haml• Volwassen; versie 1.0 stamt uit 2006• Draait op Ruby (plugin voor Rails)• Geport naar o.a. PHP, Python, .NET, Java en Perl• Indentation based• Output naar keuze (minified, quote-stijl, etc.)
    21. 21. !!! 5 <!DOCTYPE html>%section#about <section id="about"> %h1 About us <h1>About us</h1> %p.introduction Welcome! <p class="introduction">Welcome!</p> #carousel.projects <div id="carousel" class="projects"> :javascript <script> alert(initialize carousel); <![CDATA[ alert(initialize carousel); ]]> </script> </div> %form{:method => post} <form method="post"> %fieldset <fieldset> %legend Some form... <legend>Some form...</legend> </fieldset> </form> </section>
    22. 22. Sass• Maakt onderdeel uit van Haml
    23. 23. Sass• Maakt onderdeel uit van Haml• Wordt in versie 3.1 losgekoppeld van Haml
    24. 24. Sass• Maakt onderdeel uit van Haml• Wordt in versie 3.1 losgekoppeld van Haml• Kan in ieder project gebruikt worden
    25. 25. Sass• Maakt onderdeel uit van Haml• Wordt in versie 3.1 losgekoppeld van Haml• Kan in ieder project gebruikt worden• Indentation based (.sass) én CSS-based (.scss)
    26. 26. Sass• Maakt onderdeel uit van Haml• Wordt in versie 3.1 losgekoppeld van Haml• Kan in ieder project gebruikt worden• Indentation based (.sass) én CSS-based (.scss)• Output naar keuze (minified, etc.)
    27. 27. Sass CSSsection section { color: #ff0 color: #ff0; } p.introduction section p.introduction { font-size: 2em font-size: 2em; }#carousel #carousel { font-weight: bold font-weight: bold; } &.projects #carousel.projects { background: #000 background: #000; }
    28. 28. Sass SCSSsection section { color: #ff0 color: #ff0; p.introduction { p.introduction font-size: 2em; font-size: 2em } }#carousel font-weight: bold #carousel { font-weight: bold; &.projects &.projects { background: #000 background: #000; } }
    29. 29. Sass (fancy stuff)• Variables
    30. 30. Sass (fancy stuff)• Variables• Mixins
    31. 31. Sass (fancy stuff)• Variables• Mixins• Partials
    32. 32. Sass (fancy stuff)• Variables• Mixins• Partials• Operations & functions (math, kleurberekening, etc.)
    33. 33. $contrast: #ff0 a {$hover: #ccc color: #ff0; }@mixin link-with-border($side: top) color: $hover a:hover { border-#{$side}: solid 1px $contrast color: #ccc; border-top: solid 1px #ff0;a } color: $contrast a.alternative { &:hover color: #ccc; @include link-with-border border-bottom: solid 1px #ff0; } &.alternative @include link-with-border(bottom) <inhoud van _homepage.sass>// Importeer _homepage.sass en voeg deze// toe aan het gecompileerde CSS-bestand.@import "homepage"
    34. 34. $color: whitep p { width: ceil(10.4px) width: 11px; color: complement(green) color: purple; color: $color color: white; color: desaturate(red, 20%) color: #e61919; color: mix(rgba(255, 0, 0, 0.5), #00f) color: rgba(63, 0, 191, 0.75); } &:hover p:hover { color: darken($color, 50%) color: gray; }
    35. 35. Compass• Collectie van veelgebruikte Sass mixins
    36. 36. Compass• Collectie van veelgebruikte Sass mixins• Diverse helpers
    37. 37. Compass• Collectie van veelgebruikte Sass mixins• Diverse helpers• Genereert o.a. image sprites
    38. 38. Compass• Collectie van veelgebruikte Sass mixins• Diverse helpers• Genereert o.a. image sprites• Mixins voor CSS frameworks zoals Blueprint,YUI, 960.gs
    39. 39. @import "compass/css3/border-radius".foo @include border-radius(10px) .foo { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; }.bar .bar { background-image: inline-image("saturn.gif") background-image: url(data:image/ ↵ gif;base64,R0lGODlhMAAwAP(...)); }
    40. 40. $icons: sprite-map("icons/*.png", $spacing: ↵20px).icon1 .icon1 { background: sprite($icons, uranus) background: url(/images/ ↵ icons-95344cc129.png) 0 0;.icon2 } background: sprite($icons, venus) .icon2 { background: url(/images/ ↵ icons-95344cc129.png) 0 -68px; }
    41. 41. $icons: sprite-map("icons/*.png", $spacing: ↵20px).icon1 .icon1 { background: sprite($icons, uranus) background: url(/images/ ↵ icons-95344cc129.png) 0 0;.icon2 } background: sprite($icons, venus) .icon2 { background: url(/images/ ↵ icons-95344cc129.png) 0 -68px; }
    42. 42. $icons: sprite-map("icons/*.png", $spacing: ↵20px).icon1 .icon1 { background: sprite($icons, uranus) background: url(/images/ ↵ icons-95344cc129.png) 0 0;.icon2 } background: sprite($icons, venus) .icon2 { background: url(/images/ ↵ icons-95344cc129.png) 0 -68px; }
    43. 43. CoffeeScript• Geen JS library
    44. 44. CoffeeScript• Geen JS library• Werkt probleemloos samen met JS library’s
    45. 45. CoffeeScript• Geen JS library• Werkt probleemloos samen met JS library’s• Gecompileerde code is JS Lint-vriendelijk
    46. 46. CoffeeScript• Geen JS library• Werkt probleemloos samen met JS library’s• Gecompileerde code is JS Lint-vriendelijk• Partials
    47. 47. (function() {some_var = 10 var foo, some_var; some_var = 10;$(a).each -> $(a).each(function() { console.log(foo) return console.log(foo); });foo = (bar) -> foo = function(bar) { return false unless bar if (!bar) { "Bar has #{bar} as value." return false; } return "Bar has " + bar + " as value."; };this.available_globally = -> this.available_globally = function() { alert(some_var) return alert(some_var); }; }).call(this);
    48. 48. (function() { var number, opposite;# Assignmentnumber = 42 number = 42;opposite = true opposite = true;# Conditionsnumber = -42 if opposite if (opposite) { number = -42; }# Existencealert "I knew it!" if elvis? if (typeof elvis != "undefined" && elvis !== null) { alert("I knew it!"); } }).call(this);
    49. 49. (function() { var food, fronteers, _i, _len, _ref;# Objectfronteers = fronteers = { penningmeester: penningmeester: { name: "Krijn" name: "Krijn", age: 26 age: 26 algemeen: }, name: "Matijs" algemeen: { age: 9 name: "Matijs", age: 9 } };# Eat luncheat food for food in [chips, nootjes] _ref = [chips, nootjes]; for (_i = 0, _len = _ref.length; _i < _len; _i++) { food = _ref[_i]; eat(food); } }).call(this);
    50. 50. Happy back-enders
    51. 51. Happy back-enders• Meta languages zijn duidelijker voor back-enders (en dus sneller te implementeren), mits ze de talen kennen.
    52. 52. Happy back-enders• Meta languages zijn duidelijker voor back-enders (en dus sneller te implementeren), mits ze de talen kennen.• Back-enders durven beter aanpassingen te maken.
    53. 53. Happy back-enders• Meta languages zijn duidelijker voor back-enders (en dus sneller te implementeren), mits ze de talen kennen.• Back-enders durven beter aanpassingen te maken.• De kans dat een back-ender je code sloopt is kleiner. Maak je iets kapot, dan krijg je een error (mét stack trace).
    54. 54. Happy back-enders• Meta languages zijn duidelijker voor back-enders (en dus sneller te implementeren), mits ze de talen kennen.• Back-enders durven beter aanpassingen te maken.• De kans dat een back-ender je code sloopt is kleiner. Maak je iets kapot, dan krijg je een error (mét stack trace).• Meta languages moeten wél in je ontwikkel- en buildproces passen.
    55. 55. Vragen? (of opmerkingen)
    56. 56. Credits• http://laserey.es/• http://www.flickr.com/photos/piechnik/4686817259• http://www.flickr.com/photos/lwr/4876706955• http://www.flickr.com/photos/scottvanderchijs/3630946389• http://www.flickr.com/photos/uggboy/4446226921• http://www.flickr.com/photos/donotlick/4222601003• http://www.flickr.com/photos/arjaneising/5001584040
    57. 57. Credits• http://laserey.es/• http://www.flickr.com/photos/piechnik/4686817259• http://www.flickr.com/photos/lwr/4876706955• http://www.flickr.com/photos/scottvanderchijs/3630946389• http://www.flickr.com/photos/uggboy/4446226921• http://www.flickr.com/photos/donotlick/4222601003• http://www.flickr.com/photos/arjaneising/5001584040

    ×