Front-End Meta Languages (Dutch)

Front-end meta languages Voor gelukkigere front- én back-enders.

Roy Tomeij 80beans & SliceCraft @roy [email protected]

Wat zijn front-end meta languages? Front-end meta languages zijn talen
die compileren naar HTML, CSS of JavaScript maar dat zelf niet zijn.

Waarom?

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

Welke talen?

Welke talen? • Haml • Sass (& Compass) • CoffeeScript

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 (miniﬁed, quote-stijl, etc.)

!!! 5 %section#about %h1 About us %p.introduction Welcome! #carousel.projects :javascript
alert('initialize carousel'); %form{:method => 'post'} %fieldset %legend Some form... <!DOCTYPE html> <section id="about"> <h1>About us</h1> <p class="introduction">Welcome!</p> <div id="carousel" class="projects"> <script> <![CDATA[ alert('initialize carousel'); ]]> </script> </div> <form method="post"> <fieldset> <legend>Some form...</legend> </fieldset> </form> </section>

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 (miniﬁed, etc.)

section color: #ff0 p.introduction font-size: 2em #carousel font-weight: bold &.projects
background: #000 section { color: #ff0; } section p.introduction { font-size: 2em; } #carousel { font-weight: bold; } #carousel.projects { background: #000; } Sass CSS

section color: #ff0 p.introduction font-size: 2em #carousel font-weight: bold &.projects
background: #000 section { color: #ff0; p.introduction { font-size: 2em; } } #carousel { font-weight: bold; &.projects { background: #000; } } Sass SCSS

Sass (fancy stuff) • Variables • Mixins • Partials •
Operations & functions (math, kleurberekening, etc.)

$contrast: #ff0 $hover: #ccc @mixin link-with-border($side: top) color: $hover border-#{$side}:
solid 1px $contrast a color: $contrast &:hover @include link-with-border &.alternative @include link-with-border(bottom) // Importeer _homepage.sass en voeg deze // toe aan het gecompileerde CSS-bestand. @import "homepage" a { color: #ff0; } a:hover { color: #ccc; border-top: solid 1px #ff0; } a.alternative { color: #ccc; border-bottom: solid 1px #ff0; } <inhoud van _homepage.sass>

$color: white p width: ceil(10.4px) color: complement(green) color: $color color:
desaturate(red, 20%) color: mix(rgba(255, 0, 0, 0.5), #00f) &:hover color: darken($color, 50%) p { width: 11px; color: purple; color: white; color: #e61919; color: rgba(63, 0, 191, 0.75); } p:hover { color: gray; }

Compass • Collectie van veelgebruikte Sass mixins • Diverse helpers
• Genereert o.a. image sprites • Mixins voor CSS frameworks zoals Blueprint, YUI, 960.gs

@import "compass/css3/border-radius" .foo @include border-radius(10px) .bar background-image: inline-image("saturn.gif") .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 { background-image: url('data:image/ ↵ gif;base64,R0lGODlhMAAwAP(...)'); }

$icons: sprite-map("icons/*.png", $spacing: ↵ 20px) .icon1 background: sprite($icons, uranus) .icon2
background: sprite($icons, venus) .icon1 { background: url('/images/ ↵ icons-95344cc129.png') 0 0; } .icon2 { background: url('/images/ ↵ icons-95344cc129.png') 0 -68px; }

CoffeeScript • Geen JS library • Werkt probleemloos samen met
JS library’s • Gecompileerde code is JS Lint-vriendelijk • Partials

some_var = 10 $('a').each -> console.log('foo') foo = (bar) ->
return false unless bar "Bar has #{bar} as value." this.available_globally = -> alert(some_var) (function() { var foo, some_var; some_var = 10; $('a').each(function() { return console.log('foo'); }); foo = function(bar) { if (!bar) { return false; } return "Bar has " + bar + " as value."; }; this.available_globally = function() { return alert(some_var); }; }).call(this);

# Assignment number = 42 opposite = true # Conditions
number = -42 if opposite # Existence alert "I knew it!" if elvis? (function() { var number, opposite; number = 42; opposite = true; if (opposite) { number = -42; } if (typeof elvis != "undefined" && elvis !== null) { alert("I knew it!"); } }).call(this);

# Object fronteers = penningmeester: name: "Krijn" age: 26 algemeen:
name: "Matijs" age: 9 # Eat lunch eat food for food in ['chips', 'nootjes'] (function() { var food, fronteers, _i, _len, _ref; fronteers = { penningmeester: { name: "Krijn", age: 26 }, algemeen: { name: "Matijs", age: 9 } }; _ref = ['chips', 'nootjes']; for (_i = 0, _len = _ref.length; _i < _len; _i++) { food = _ref[_i]; eat(food); } }).call(this);

Happy back-enders

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.

Vragen? (of opmerkingen)

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

Front-End Meta Languages (Dutch)

Front-End Meta Languages (Dutch)

Roy Tomeij

More Decks by Roy Tomeij

Other Decks in Programming

Featured

Transcript

Front-end meta languages Voor gelukkigere front- én back-enders.

Roy Tomeij 80beans & SliceCraft @roy [email protected]

Wat zijn front-end meta languages? Front-end meta languages zijn talen

Waarom?

Waarom? • Snellere productie • DRY (Don’t Repeat Yourself) •

Welke talen?

Welke talen? • Haml • Sass (& Compass) • CoffeeScript

Haml • Volwassen; versie 1.0 stamt uit 2006 • Draait

!!! 5 %section#about %h1 About us %p.introduction Welcome! #carousel.projects :javascript

Sass • Maakt onderdeel uit van Haml • Wordt in

section color: #ff0 p.introduction font-size: 2em #carousel font-weight: bold &.projects

section color: #ff0 p.introduction font-size: 2em #carousel font-weight: bold &.projects

Sass (fancy stuff) • Variables • Mixins • Partials •

$contrast: #ff0 $hover: #ccc @mixin link-with-border($side: top) color: $hover border-#{$side}:

$color: white p width: ceil(10.4px) color: complement(green) color: $color color:

Compass • Collectie van veelgebruikte Sass mixins • Diverse helpers

@import "compass/css3/border-radius" .foo @include border-radius(10px) .bar background-image: inline-image("saturn.gif") .foo {

$icons: sprite-map("icons/*.png", $spacing: ↵ 20px) .icon1 background: sprite($icons, uranus) .icon2

CoffeeScript • Geen JS library • Werkt probleemloos samen met

some_var = 10 $('a').each -> console.log('foo') foo = (bar) ->

# Assignment number = 42 opposite = true # Conditions

# Object fronteers = penningmeester: name: "Krijn" age: 26 algemeen:

Happy back-enders

Happy back-enders • Meta languages zijn duidelijker voor back-enders (en

Vragen? (of opmerkingen)

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 •