Elke ontwikkelaar zet weleens een simpele HTML pagina in elkaar. Of dit nou als reden heeft om een HTML prototype in elkaar te zetten of om een custom jQuery plugin in een minimale omgeving te testen, de situatie doet zich vaak genoeg voor. Rails staat tot beschikking van elke Rubyist, maar in een dergelijke omstandigheid is het een te zwaar en log framework. Sinatra is in zo’n geval een betere keus om eenvoudige websites zonder al te veel effort neer te zetten. Vaak is de eenvoud van Sinatra een graag geziene eigenschap, maar zijn de vele functionaliteiten uit frameworks zoals Rails een gemis. Middleman brengt beide werelden (en vele andere) samen in een klein pakket, zoals een behoorlijk tussenpersoon betaamt.

Wat is Middleman?

Volgens de officiële website maakt Middleman het ontwikkelen van websites eenvoudig. Middleman is een Ruby gem gemaakt voor front-end ontwikkelaars. In beginsel is Middleman een statische website generator die gebruik maakt van hulpmiddelen uit de moderne web development wereld. De regelneef is een Rack applicatie gebaseerd op Padrino wat zijn grondslag weer vindt bij Sinatra en maakt gebruik van diverse Rails handigheden, zoals de welbekende link_to en image_tag view helpers.

De statische website generator ondersteund verschillende meta talen waaronder Haml (of Slim), Sass en CoffeeScript. Ook is het CSS framework Compass een mogelijk hulpmiddel bij het eenvoudig en vooral snel ontwikkelen van websites. Daarnaast beschikt Middleman nog over een enorm arsenaal aan geavanceerde opties, zoals lokalisatie (i18n), leesbare URL’s op basis van Directory Indexes, cache mogelijkheden en bestandsgrootte optimalisatie. Uit eerdere artikelen op dit weblog blijkt wel dat ik enthousiast word van meta talen en frameworks als de eerder genoemde voorbeelden. Middleman brengt al deze geweldige tools samen onder één dak met de mogelijkheid om third-party Ruby gems daar aan toe te voegen om het ontwikkelen nog eenvoudiger te maken.

Inmiddels ben ik meermaals in aanraking gekomen met Middleman en ben zeer te spreken over de eenvoud en flexibiliteit van het framework in combinatie met de snelheid waarmee er ontwikkeld kan worden. De flexibiliteit uit zich in het feit dat werkelijk alles configurabel is. De manier waarop het project gestructureerd wordt, de compressie die gebruikt wordt voor JavaScript bestanden, noem het maar op. Ook al is het uiteindelijke resultaat van de generator een statische website, met name de mogelijkheid om dynamisch data in te laden in het project is een fijne toevoeging. Dit klinkt misschien wat raar, maar in een later voorbeeld zal duidelijk worden waarom dit het geval is.

Hoe werkt het?

Het is vrij eenvoudig om met Middleman aan de slag te gaan. Het installeren is niet meer dan het uitvoeren van het volgende commando:

  gem install middleman

Zodra het proces is afgerond, beschik je als ontwikkelaar over een drietal commando’s: middleman init, middleman server en middleman build die elk hun eigen toepassing hebben.

Initialisatie

Het starten van een nieuw project begint met het maken van een folder waarin Middleman zijn gang kan gaan. Hierbij wordt het eerste commando toegepast. Dit kan gebruikt worden in een al bestaande folder, maar is ook te hanteren om een nieuwe folder aan te maken:

  middleman init naam_van_het_project

Een folder die de naam naam_van_het_project krijgt, wordt aangemaakt met daarin de bestanden Gemfile, config.rb en een source folder. Voeg eventueel nog wat third-party gems aan de Gemfile toe, draai nogmaals bundle install (middleman init doet dit namelijk al direct na het aanmaken van de Gemfile) en we zijn klaar voor gebruik.

De source folder is de plek waar het project tot stand komt. Dit is ook de plek waar normaal gesproken de assets te vinden zijn, echter kan zoals eerder aangegeven is de volledige structuur van het project aangepast worden. De configuratie hiervan vindt, de naam verklapt het al, plaats in het config.rb bestand.

Project templates

Mocht er vaker gebruik gemaakt gaan worden van Middleman en is het gewenst om met een bepaalde projectstructuur te werken, dan zijn project templates een uitkomst. Maak eenmalig in ~/.middleman/ een folder aan met de veelgebruikte projectstructuur en -bestanden. Initialiseer vervolgens een nieuw project met het eerder getoonde commando en voeg daar de -t of --template command line flag aan toe. Indien een project template met de naam ocd_gestructureerde_template bestaat, kan een dergelijk project als volgt opgezet worden:

  middleman init naam_van_het_project --template=ocd_gestructureerde_template

Start your engines!

  middleman server

Voer het bovenstaande in en de Thin webserver zal opgestart worden. De ontwikkel omgeving is vervolgens bereikbaar op http://localhost:4567/ en het echte werk kan beginnen. Pak je meest favoriete tools erbij en begin te hacken!

Dynamisch data inladen met YAML bestanden

Eerder in dit artikel gaf ik aan dat het dynamische inladen van data me erg aansprak. Als er soortgelijke elementen in een statische website voorkomen, ontkom je er normaal gesproken niet aan om elementen één of meerdere keren te kopiëren. Elke Ruby ontwikkelaar werkt graag volgens het DRY (Don’t Repeat Yourself) principe. Iets kopiëren valt daar niet onder. Gelukkig kan dat anders!

Zo is het mogelijk om .yml bestanden uit de data folder uit te lezen op plekken waar het nodig is.

  metatalen:
  - haml
  - sass
  - coffeescript

Het bestand data/example.yml met de bovenstaande inhoud kan namelijk als volgt uitgelezen worden:

  %h1 Meta talen
  %ol
    - data.example.metatalen.each do |metataal|
      %li= metataal

Bij het ophalen van de gegevens is de naam van het .yml bestand erg van belang. example in data.example.metatalen.each do |metataal| is namelijk de naam van het gebruikte bestand en zo is metatalen het eerste element van de data, wat een array is met een drietal elementen. Op deze manier is de broncode zo eenvoudig mogelijk en DRY, maar krijg je in het uiteindelijke resultaat een nette geordende lijst met meta talen.

I’m done, now what?

Als het moment is aangebroken om het project op te leveren, is het de hoogste tijd om de statische pagina’s te genereren. Een vrij eenvoudig principe, namelijk de laatste van de drie commando’s en dat is: middleman build. In het configuratie bestand config.rb staat een configuratie blok beschreven wat bij dit commando uitgevoerd zal worden. Standaard is alles in dit blok uitgezet, maar laten we er vanuit gaan dat bij het genereren van de statische versie van het project alle JavaScript bestanden ge-minified moeten worden. Een configuratie blok als het volgende maakt dat mogelijk:

  configure :build do
    activate :minify_javascript
  end

Vervolgens is er een statische versie van het project beschikbaar in de build folder inclusief JavaScript bestanden die ge-minified zijn. Zet alle bestanden in deze folder op de productie omgeving en laat de bezoekers maar komen! Mocht je Middleman nog verder willen uitbreiden of configureren, kijk dan op de officiële website. Daar staan genoeg voorbeelden beschreven.

Waarom zou ik er gebruik van maken?

Een manusje-van-alles als hulp gebruiken voor iets wat zo eenvoudig is, waarom zou ik dat überhaubt doen? Als Ruby ontwikkelaar ben je zo gewend geraakt aan allerlei hulpmiddelen die tot jouw beschikking staan bij gebruik van een framework als Rails, maak je gebruik van zeer eenvoudige Compass mixins als border-radius in plaats van alle losse vendor properties als -webkit-border-radius en -moz-border-radius en houd je van het DRY principe.

Waarom zou je dit allemaal links laten liggen bij het ontwikkelen van een statische project? Precies! Dat wil je helemaal niet, dus maak gewoon gebruik van Middleman als jouw persoonlijke hulpmiddel bij het genereren van statische websites en kijk niet meer achterom.