Front-end meta languages

80beans application development

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

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 zelf niet zijn.

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 performance (minder HTTP-requests) "out of the box"

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

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, Java en Perl

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

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 <!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>

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• Indentation based (.sass) én CSS-based (.scss)

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.)

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; }

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; } }

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; }@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"

$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; }

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 frameworks zoals Blueprint,YUI, 960.gs

@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(...)); }

$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; }

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• Partials

Happy back-enders

Happy back-enders• Meta languages zijn duidelijker voor back-enders (en dus sneller te implementeren), mits ze de talen kennen.

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.

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).

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

by Roy Tomeij on Mar 04, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 2

Statistics

Front-end meta languages — Presentation Transcript

http://www.80beans.com	1
http://trunk.ly	1