2. Technologie-Tag - Frontend Architektur

1&1 Bestellprozess-Frontends Nico Steiner & Andreas Lehr

1&1 Bestellprozess-Frontends - Situation -
- Unsere Frontends sind marketinggetrieben
Einheitliche Elemente und Layouts sind gewünscht
Projekt- und seitenspezifische Ausnahmen müssen
trotzdem möglich sein (und sind oftmals die Regel)
- Verschiedene Bereiche (Consumer, Hosting, Entertainment)
Verschiedene Marken (1&1, WEB.DE, GMX und Maxdome)
Lokalisierung für DE / US / UK / FR / ES
Insgesamt über 30 Projekte
Projekte unterliegen einem kontinuierlichen Änderungsprozess
Performance der Seiten hat große Bedeutung

Jasmin-Servlet (Auslieferung von CSS/JavaScript) Frontend-Module (CSS/JavaScript/ XSL/Grafiken) Content Delivery Server (Auslieferung von Grafiken) Project Mess Tool (Frontend-Kennzahlen) Fehlertool 1&1 Bestellprozess-Frontend-Architektur

Jasmin-Servlet Auslieferung von CSS und JavaScript

Idee Ausschlaggebend für die Jasmin-Technologie war das Firefox-Addon YSlow . YSlow analysiert die Performance von Web-Seiten auf Basis der „ Yahoo rules for high performance web sites “. Mehr Info: https://addons.mozilla.org/de/firefox/addon/5369 http://developer.yahoo.com/performance/rules.html Minimize HTTP Requests Gzip compression Use Expires Header Minimize CSS/JavaScript

Jasmin – JavaScript Minifier Mit der Jasmin-Technologie lassen sich CSS- und JavaScript-Ressourcen modularisieren, optimieren, minimieren und kombinieren. Modularisieren CSS- und JavaScript-Ressourcen können abhängig von ihrer Verwendung in Modulen zusammengefasst werden. Optimieren An den ausgelieferten Ressourcen lassen sich an einer zentralen Stelle performancerelevante Optimierungen vornehmen. Minimieren Unnötige Inhalte (Kommentare, Leerzeichen etc.) werden vor der Auslieferung entfernt. Kombinieren Die Ressourcen werden kombiniert in je einem Request ausgeliefert. Minimize HTTP Requests

Jasmin Historie – Am Anfang war der YUI-Loader
Möglich waren damit
Modularisierung
Dependencies
JavaScript und CSS Ressourcen
Nachteile
Basiert auf JavaScript
Ein Request pro Ressource
Umständliches Ladekonzept
Anfänglich wurde von uns der YUI-Loader von Yahoo! zur Auslieferung der Ressourcen genutzt.

Ausgangsbasis
Ca. 20 Requests für CSS und JavaScript
Alle Ressourcen wurden auf allen Seiten ausgeliefert
Kein Minimieren
Keine Performance-Optimierungen
Ergebnis
Seitenabhängiges Ausliefern von CSS und JS-Ressourcen in je einem Request
Modular mit Dependencies zu anderen Modulen
Komprimierung / Kombinierung
Weitere Performance-Optimierungen
Vom YUI-Loader zur Jasmin-Technologie

Jasmin-Servlet - Funktionsweise Jasmin Maven-Modul main main + autocompletion common local autocomplete.js autocomplete.css global.js main.css local.js shop.css main autocompletion main Zusammenstellung und Auslieferung der Ressourcen erfolgt seitenbezogen in je einem Request. Home Produkt Kundendaten

Jasmin-Servlet Ausblick Jasmin Caching-Optimierung Umstellung von je einem auf je zwei Requests für CSS und JavaScript. Unterscheidung von allgemeinen Ressourcen und spezifischen Ressourcen. main main autocompletion Home Produkt Kundendaten 1. Request (Cache) 2. Request (variabel) main

Jasmin-Servlet Ausblick Jasmin Gzip Das Jasmin-Servlet liefert zukünftig Ressourcen in Gzip-Komprimierung aus. Dadurch wird das Datenvolumen um bis zu 80% verringert. data data

Präfix und Suffix Für JavaScript Ressourcen können durch Präfix- und Suffix-Module eine Ladereihenfolge erzwungen werden, um Module wenn nötig vor allen anderen oder nach allen anderen Modulen zu laden. if(typeof UNOUNO=="undefined"){ var UNOUNO={} ..... } onDocumentReady() { onJSload(); } Präfix Modul Javascript Suffix Modul

Debugging Nachteilig wirkt sich das kombinierte Ausliefern von JavaScript- und CSS-Ressourcen auf das Debugging im Firebug aus. Das Auffinden von Fehlern wird erschwert.

Debugging

Eine Firebug-Extension erleichtert zukünftig das Auffinden von Fehlern, indem ein Bezug auf die ursprünglichen Ressourcen hergestellt wird. Debugging

Frontend-Module (CSS, JavaScript, XML, Grafiken)

CSS JavaScript XML/XSL Grafiken/Pdf/Flash Frontend-Module - Komponenten Jasmin-Servlet Dynamische Includes Content Delivery Server

Rahmen aus Frontend-Modul (XML)

CSS über Jasmin-Servlet aus Frontend-Modul

Seiten-Inhalte über lokale Ressourcen im Projekt

DSL (Consumer) NGH Startseite Hosting US Mobiles Internet (Consumer)

Mobiles Internet (WEB.DE) DSL (WEB.DE) MailXchange (WEB.DE) Frontend-Modul

Mobiles Internet (1&1) Mobiles Internet (GMX) Mobiles Internet (WEB.DE)

Common Projekt Projekt Projekt Projekt Projekt … Common Projekt Projekt Projekt Projekt Projekt … Frontend-Module liegen außerhalb der Pustefix-Projekte

Common Projekt Projekt Projekt Projekt Projekt … Common Projekt Projekt Projekt Projekt Projekt … Frontend-Module lassen sich beliebig zuweisen…

Common Projekt Seite Seite Seite Seite Seite Seite Seite Seite … … sogar ausgewählten Seiten innerhalb eines Projekts

Frontend-Modul Common Nur noch Tage! DSL, Mobiles Internet, NGH DE, Hosting DE, Internetzugang, … Hosting US Only days! CSS JS XML IMG Das Prinzip lässt sich beliebig anwenden.

i18n – Beispiel NGH Frontend-Modul + Common Lokales Projekt (DE) XML (DE) Redaktion (Übersetzung) XML (US) Lokales Projekt (US)

i18n – Beispiel NGH

Autocompletion Telesales-Cart Clearfix-Hack PNG-Hack (IE6) Formular-Gerüste YUI Preis-Stopper Countdown-Stopper WEB.DE Rahmen 1&1 Rahmen Qooxdoo Lightbox Stage-Assistent GMX Rahmen

Content Delivery Server Auslieferung von Grafiken, Flash, … (in der Planung)

common/img/visual.gif www Apache CDS www Versionierung + Optimierung + Kennzahlen Momentan Zukünftig Content Delivery Server (CDS) Momentan werden Bilder dezentral von verschiedenen Servern geliefert. Dies verhindert den Einsatz Performance-Optimierender Techniken.

Maven-Module common local Grafiken/Flash/… Expires-Header, Versionierung CDS + Dateigröße Fehlende Res. Ungenutzte Res. PMT Fehler-Tool Vorteile Durch Expires-Header wird das Caching verbessert. Übermittlung von Kennzahlen und Fehlern an das Project-Mess-Tool und das Fehlertool . Aufbau eines Content-Delivery-Network für Zugriffe aus dem Ausland. cds1.1und1.de cds2.1und1.de cds3.1und1.de Content Delivery Server (CDS)

CDS - Versionierung für Far Future Expires Header Far Future Expires Header enthalten ein weit in der Zukunft liegendes „Verfallsdatum“. Datei wird nach erstmaligem Herunterladen vom Server aus dem Browser-Cache bezogen. Versionierung sorgt für Aktualisierung nach Datei-Änderung.

CDS - Versionierung für Far Future Expires Header Erstmaliger Dateiaufruf Die Datei wird vom CDS ausgeliefert und bekommt einen Far Future Expires Header (10 Jahre) zugewiesen.

CDS - Versionierung für Far Future Expires Header Wiederholter Dateiaufruf Die Datei wird auf Grund ihres weit in der Zukunft liegenden Expires-Headers aus dem Browser-Cache geladen.

CDS - Versionierung für Far Future Expires Header Dateiaufruf nach Dateiänderung Beim Publish einer veränderten Version wird über den Dateinamen eine neue Versionierung vergeben. Aus z.B. price-1.gif wird price-2.gif Der Browser lädt die veränderte Datei vom Server.

CDS - Versionierung für Far Future Expires Header Am Dateinamen im XML-Code ändert sich nichts XML-Code für die Anzeige der Grafik <pfx:image src=”common/img/ price.gif ” alt=”für 0,- Euro”/> Beim Publish wird im ausgelieferten HTML-Code automatisch die Version im Dateinamen ergänzt. HTML-Code mit der Versionierung <img src=”common/img/ price-1.gif ” alt=”für 0,- Euro”/> wird zu <img src=”common/img/ price-2.gif ” alt=”für 0,- Euro”/>

Contend Delivery Network Dateien werden in die Nähe des „Empfängers“ gebracht. Dadurch verkürzten sich die Latenz-Zeiten.

Project Mess Tool Frontend-Kennzahlen (im Aufbau)

Erfassung typischer Frontend-Kennzahlen Wie groß sind die ausgelieferten Dokumente? Gibt es grobe Ausreißer? Werden Dokumente nicht gefunden? Gibt es überflüssige Dokumente? Sind die Dokumente valide? Dabei gilt: Dokumente = Grafiken = Styles = Scripte

Erfassung typischer Frontend-Kennzahlen PMT Jasmin-Servlet CDS Apache Pustefix Core ???

Erfassung typischer Frontend-Kennzahlen Jasmin-Servlet CDS Apache Pustefix Core CSS/JavaScript Grafiken/Pdf/ Flash HTML Größe ungenutzte Selektoren Validierung (Fehler) Größe fehlende Ressourcen überflüssige Ressrc. Größe Validierung (Fehler) fehlende Dokumente fehlende/überfl. Incl. Project Mess Tool Fehlertool JavaScript-Fehler

PMT-Sichten Filtern nach Projekt/Seite/Kennzahl Send to Dashboard

Warum machen wir das?
Qualität
Ordnung
Transparenz
- Performance

Warum machen wir das?
Einzelne Grafiken bis zu 600 KB
Tausende ungenutzte Grafiken
Hunderte ungenutzte CSS-Selektoren pro Projekt
Diverse „Missing Includes“ (Fehlende Textbausteine)
Hang der Projekte zum „Vermüllen“
Momentaner Stand Auch ein blindes Huhn… Zukünftig Ich bin schon da! Ohne Tricks!

Danke! Fragen? Jasmin Frontend-Module CDS Project Mess Tool

http://www.nicosteiner.de	11
http://www.slideshare.net	10
http://nicosteiner.de	7

2. Technologie-Tag - Frontend Architektur

by Nico Steiner on Jun 05, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 28

Statistics

2. Technologie-Tag - Frontend Architektur — Presentation Transcript