Inhalt dieser Präsentation:

xtc ist leichter Webstack, Terrific Buildtool und Framework spezialisiert für die Frontendentwicklung.

xtc ist komplett in JavaScript impementiert

- Ideal für Frontend Template-Erstellung
- Potential Frontend-Arbeit in anderen Backends zu vereinheitlichen durch Tools und Patterns
Erstellung produktiver Websites ohne CMS- / Shopanbindung.
- xtc ist ein idealer Server für Single Page Apps.


- Warum?
- Was ist besonders an xtc
- Eine kurze Geschichte von xtc
- Node.js
- Express
- Grunt
- [Demo]
- Roadmap
- Mehr Information, Links

Dinge die das Frontend komplex machen:

- Responsive Layout & Images
- Touch vs. Mouse
- Accessibility
- Resolution Independence ("Retina")
- SEO
- No-JS Support
- Unbefriedigende Standards: HTML, CSS
- Browser Bugs

Jeder dieser Punkte ist allein schon komplex. Die Aufgabe im Frontend ist es sie alle in Kombination im Griff zu haben.

Alles was uns davon abhält die Komplexität der Frontendentwicklung zu bezwingen ist eine Ablenkung.

Klassische Webstacks sind ein Mix von organisch gewachsenen Softwares mit, unterschiedlichen Sprachen, unterschiedlicher Syntax und hoher Komplexität.

Beispiel typischer PHP Server (Java ist noch viel komplexer):

- Apache (Install, Config, htaccess, rewrite)
- PHP (ini, uneinheitliche Libraries manuell installieren konfigurieren, short-tags)
- Permissions
- Dependencies: Manuelle Updates und Lösen von Versions-Konflikten
- Oft tiefe oder verteilte Filestrukturen (Configs / Projekt)
- etc.

Das ist normal. Aber das ist nicht Frontend.

Die ideale Frontend-Software besteht aus Webtechnologien. Die erste und logische Konsequenz daraus ist die Notwendigkeit eines ausgereiften JavaScript-basierten Server-Backends.

Frontend-Tooling gab's bis vor kurzem nicht.

Seit wenigen Jahren ist hier aber eine Revolution im Gange. Die Kombination von den neuen Paradigmen Social Coding auf Github und Node.js haben eine Explosion von neuen Tools zur Frontendentwicklung ausgelöst.

xtc ist aus diesen Überlegungen heraus entstanden.

Ursprünglich ein simpler Port der Server-basierten Frontend-Modularisierung mit dem Terrific Pattern.

Zu umfangreichen Framework gewachsen.

Es gab viele Gelegenheiten Entscheidungen zu treffen, die sich sonst nicht bieten. (Module Call mit flexibler "Signatur") Oder kleine mühsame Probleme aus der Welt zu schaffen (Static Paths: Filesystem, Server, CSS. Alles aus der Config)

Node.js

- JavaScript Plattform
- Event-basiertes I/O
- Umfangreiches API (z.B: fs, http, os...)
- Entwickelt für Web-Apps
- Self-hosted: braucht keinen zusätzlichen Server
- Node ist schnellllll!

Node Package Manager (npm) und Common JS (Modulsystem) machen es möglich mit Leichtigkeit und in einheitlicher Weise neue Funktionalität einzubinden, zu publizieren und die Versionen zu verwalten.

Jedes typische Node Projekt beinhaltet ein File namens package.json welches unter anderem alle Dependencies spezifiziert.

Verwendung eines Moduls: var mongoose = require('mongoose');

Callbacks im Node Umfeld haben immer folgende Signatur: fn(err, [arg1], [arg2], callback). Callbacks sind überall.

"err" ist nur definiert wenn ein Fehler auftritt.

Express ist wie viele andere erfolgreiche Frameworks im Node-Umfeld von inspiriert von Ruby on Rails.

Es ist sehr beliebt und DER de-facto Web-Server auf Node. 13'000 Stars auf Github :)

Ermöglicht sehr einfaches Routing mit Callbacks, die automatisch nacheinander abgearbeitet werden, bis eine Response rausgeht, oder ein Fehler auftritt.

Express gibt einem alle interessanten Server, Request und Response-Properties in einfacher Syntax.

- Auth, Routing, Headers, URI Params, Ajax Response

z.B. Content Negotiation via "Accept" Header

app.get('/stuff', function(req, res) {
res.format({
html: function(){
res.render('stuff', stuffObj);
},

json: function(){
res.json(stuffObj);
}
});
});

Express ist klein und sehr schnell.

Grunt ist ein extrem erfolgreiches JS-Tool zur Automatisierung von Tasks. Wie die meisten Tools in der Node-Welt wird Grunt auf der Kommandozeile ausgeführt.

Auch für Grunt gibt es unzählige Plugins, die über npm installierbar sind. (2 davon von mir). Typische Beispiele sind Less- und Coffee-Kompilierung, Minifizierung, Linting, etc.

Grunt wird sehr oft als Build-Runner verwendet, so auch bei xtc.

Dieses Setup gibt die Möglichkeit ohne grossen Aufwand viele kleine Features einzubauen die den Alltag erleichtern und Spass machen.

- Sinnvolle Messages bei Errors. z.B. Bei CSS-Kompilierungsfehler Angabe des Sourcefiles
-Globale LessCSS Variablen in allen .less Dateien verfügbar.
- Neueste (Versionen von) Frontend Tools: LessCSS, Sourcemaps
- Integriertes Frontend Testing
- Integrations-Hilfen

Mehr Beispiele: https://github.com/MarcDiethelm/xtc/blob/master/README.md#features

Soon™

- JS source maps
- Bower integration
- Continuous integration testing in multiple browsers
- Client-side template pre-compilation

Maybe

- Lazy loading of Terrific Modules
- Generated CSS documentation
- HTML output validation

Links