middleman

Ein Blick über den TYPO3 Tellerrand

Wer ist überhaupt dieser middleman?

Facts

  • Software zum einfachen Erzeugen von statischen Seiten
  • basiert auf Ruby
  • beinhaltet viele moderne Standards der Webentwicklung

Was muß ich tun, dass middleman auch für mich arbeitet?

middleman installieren (Windows)

  1. Ruby inkl. Development Kit installieren http://rubyinstaller.org/downloads/
  2. Folgendes in der Console ausführen: 
    		  
gem install middleman

middleman installieren (Mac)

  1. Xcode installieren
  2. Folgendes in der Console ausführen: 
    		  
gem install middleman

middleman Projekt anlegen

Standard Projekt 
	  
middleman init my_new_project
HTML5 Boilerplate Projekt 
	  
middleman init my_new_boilerplate_project --template=html5
Liste aller verfügbaren Template-Projekte

Development mit middleman

Projektserver starten 
	  
cd my_project
bundle exec middleman server
Alle Dateien zur Anzeige der Seite werden dynamisch erzeugt (z.B. Sass, Haml usw.).

Deployment mit middleman

Statische Seiten erzeugen 
	  
cd my_project
bundle exec middleman build

Was hat er drauf - dieser middleman?

Templates (with YAML Frontmatter)

source/text.html.erb 
	  
	---
	cars:
	- Audi
	- BMW
	- Ford
	- Volvo
	---

	<% current_page.data.cars.each do |car| %>
	  <% if car == 'Ford' %>
		  Ein <%= car %> ist kein schönes Auto.
	  <% else %>
		  Ein <%= car %> ist ein schönes Auto.
	  <% end %>
	<% end %>

Templates (with YAML Data)

data/test.yml 
	  
		cars:
		- Audi
		- BMW
		- Ford
		- Volvo
source/text.html.erb 
	  
	<% data.test.cars.each do |car| %>
	  <% if car == 'Ford' %>
		  Ein <%= car %> ist kein schönes Auto.
	  <% else %>
		  Ein <%= car %> ist ein schönes Auto.
	  <% end %>
	<% end %>

Templates Output

	  
	
	  
		  Ein Audi ist ein schönes Auto.
	  
	
	  
		  Ein BMW ist ein schönes Auto.
	  
	
	  
		  Ein Ford ist kein schönes Auto.
	  
	
	  
		  Ein Volvo ist ein schönes Auto.

Layouts

source/layouts/layout.erb 
	  
<html>
  <head>
	<title>My Site</title>
  </head>
  <body>
	<%= yield %>
  </body>
</html>
source/index.html.erb 
	  
<h1>Hallo Welt World</h1>

Layouts Output

domain.de/index.html 
	  
<html>
  <head>
	<title>My Site</title>
  </head>
  <body>
	<h1>Hallo Welt</h1>
  </body>
</html>

Partials

source/index.html.erb 
	  
Inhalt der Seite

<%= partial("partials/footer", :locals => { :car => 'Ford'}) %>
partials/_footer.html.erb 
	  
Copyright by <%= car %>

Partials Output

domain.de/index.html 
	  
	  Inhalt der Seite

	  Copyright by Ford

Template Helpers

source/index.html.erb 
	  
<!--link-->
<%= link_to 'Zum Start', '/Middleman.html' %>

<!--escape-->
<%= escape_html('<div>&</div>')%>

<!--nl2br-->
<%= simple_format("hello\nworld") %>

<!--crop-->
<%= truncate_words("Once upon a time in ", :length => 5) %> ...

<!--dummy images-->
<img src="<%= lorem.image('400x100', :text => 'dummyABC') %>" />

<!--dummy text-->
<%= lorem.paragraphs 1 %>

Template Helpers Output

domain.de/index.html 
	  
Zum Start
<div>&</div>

hello

world

Once upon a time in ...



Eligendi vel facere sit vitae explicabo perspiciatis animi debitis et. minima reiciendis culpa libero dolorum. quo maxime blanditiis amet nemo autem atque suscipit sunt qui culpa natus nesciunt

Sass & Compass

source/css/screen.css.scss 
	  
@mixin slide($testWidth) {
	background:#fff;
	color:#000;
	width: $testWidth;
}

#slide1Test {
	@include slide(100px);
}
#slide2Test {
	@include slide(200px);
}
domain.de/css/screen.css 
	  
/* line 7, screen.css.scss */
#slide1Test {
  background: #fff;
  color: #000;
  width: 100px; }

/* line 10, screen.css.scss */
#slide2Test {
  background: #fff;
  color: #000;
  width: 200px; }

Localization (i18n)

locales/en.yml 
	  
		---
		en:
		  hello: "Hello World"
locales/de.yml 
	  
		---
		de:
		  hello: "Hallo Welt"
source/localizable/test.html.erb 
	  
		<%= I18n.t(:hello) %>

Localization (i18n) Output

domain.de/test.html 
	  
		Hello World
domain.de/de/test.html 
	  
		Hallo Welt

Sonst noch was?

  • Compressing CSS and JavaScript
  • Uniquely-named assets & Cache buster
  • CoffeeScript
  • Dependency Management (Sprockets)
  • Sitemap-Objekt zum Erzeugen einer Sitemap
  • Pretty URLs (Directory Indexes)

Kann ich mich auf middleman wirklich verlassen?

Unsere Erfahrungen

  • Bisher 4 Projekte mit middleman umgesetzt (z.B. diese Präsentation)
  • Genau richtig für kleine Seiten und Projekte (z.B. Kunde will die Seite nur sehr selten ändern oder scheut die laufenden Kosten für u.a. TYPO3 Updates)
  • Bisher keine vergleichbaren Lösungen (vor allem nicht auf PHP Basis)

Welche Vorteile sehen wir

  • Sehr schnelles Einrichten eines Projekts
  • Wichtige Entwicklungstools gleich mit an Bord (z.B. Sass und Compass)
  • Erzeugte Seiten sind unschlagbar sicher und schnell
  • Sehr einfach erweiterbar (z.B. eigener Helper zur Erzeugung von Bildern in unterschiedlichen Auflösungen)
  • Texte an einer zentralen Stelle pflegbar
  • Sehr aktives und gepflegtes Projekt