1&1 Bestellprozess-Frontends  Nico Steiner & Andreas Lehr
1&1 Bestellprozess-Frontends - Situation - <ul><li>- Unsere Frontends sind marketinggetrieben </li></ul><ul><li>Einheitlic...
Jasmin-Servlet (Auslieferung von CSS/JavaScript) Frontend-Module (CSS/JavaScript/ XSL/Grafiken) Content Delivery Server (A...
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-Se...
Jasmin – JavaScript Minifier Mit der Jasmin-Technologie lassen sich CSS- und JavaScript-Ressourcen  modularisieren, optimi...
Jasmin Historie – Am Anfang war der YUI-Loader <ul><li>Möglich waren damit </li></ul><ul><li>Modularisierung </li></ul><ul...
<ul><li>Ausgangsbasis </li></ul><ul><li>Ca. 20 Requests für CSS und JavaScript </li></ul><ul><li>Alle Ressourcen wurden au...
Jasmin-Servlet - Funktionsweise Jasmin Maven-Modul main main + autocompletion common local autocomplete.js autocomplete.cs...
Jasmin-Servlet Ausblick Jasmin Caching-Optimierung Umstellung von je einem auf je zwei Requests für CSS und JavaScript. Un...
Jasmin-Servlet Ausblick Jasmin Gzip Das Jasmin-Servlet liefert zukünftig Ressourcen in Gzip-Komprimierung aus. Dadurch wir...
Präfix und Suffix Für JavaScript Ressourcen können durch Präfix- und Suffix-Module eine Ladereihenfolge erzwungen werden, ...
Debugging Nachteilig wirkt sich das kombinierte Ausliefern von   JavaScript- und CSS-Ressourcen auf das Debugging im Fireb...
Debugging
Eine Firebug-Extension erleichtert zukünftig das Auffinden von Fehlern, indem ein Bezug auf die ursprünglichen Ressourcen ...
Frontend-Module (CSS, JavaScript, XML, Grafiken)
CSS JavaScript XML/XSL Grafiken/Pdf/Flash Frontend-Module - Komponenten Jasmin-Servlet Dynamische Includes Content Deliver...
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 a...
Common Projekt Projekt Projekt Projekt Projekt … Common Projekt Projekt Projekt Projekt Projekt … Frontend-Module lassen s...
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! CS...
i18n – Beispiel NGH Frontend-Modul + Common Lokales Projekt (DE) XML (DE) Redaktion (Übersetzung) XML (US) Lokales Projekt...
i18n – Beispiel NGH
Autocompletion Telesales-Cart Clearfix-Hack PNG-Hack (IE6) Formular-Gerüste YUI Preis-Stopper Countdown-Stopper WEB.DE Rah...
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 Ser...
Maven-Module common local Grafiken/Flash/… Expires-Header, Versionierung CDS + Dateigröße Fehlende Res. Ungenutzte Res. PM...
CDS - Versionierung für Far Future Expires Header Far Future Expires Header enthalten ein weit in der Zukunft liegendes „V...
CDS - Versionierung für Far Future Expires Header Erstmaliger Dateiaufruf Die Datei wird vom CDS ausgeliefert und bekommt ...
CDS - Versionierung für Far Future Expires Header Wiederholter Dateiaufruf Die Datei wird auf Grund ihres weit in der Zuku...
CDS - Versionierung für Far Future Expires Header Dateiaufruf nach Dateiänderung Beim Publish einer veränderten Version wi...
CDS - Versionierung für Far Future Expires Header Am Dateinamen im XML-Code ändert sich nichts XML-Code für die Anzeige de...
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 Dokume...
PMT
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...
PMT-Sichten Filtern nach Projekt/Seite/Kennzahl Send to Dashboard
Warum machen wir das? <ul><li>Qualität </li></ul><ul><li>Ordnung </li></ul><ul><li>Transparenz </li></ul><ul><li>- Perform...
Warum machen wir das? <ul><li>Einzelne Grafiken bis zu 600 KB </li></ul><ul><li>Tausende ungenutzte Grafiken </li></ul><ul...
Danke! Fragen? Jasmin Frontend-Module CDS Project Mess Tool
Nächste SlideShare
Wird geladen in …5
×

2. Technologie-Tag - Frontend Architektur

2.372 Aufrufe

Veröffentlicht am

Architektur der 1&1 Bestellprozess-Frontends.

Veröffentlicht in: Technologie, Design
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.372
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
32
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

2. Technologie-Tag - Frontend Architektur

  1. 1. 1&1 Bestellprozess-Frontends Nico Steiner & Andreas Lehr
  2. 2. 1&1 Bestellprozess-Frontends - Situation - <ul><li>- Unsere Frontends sind marketinggetrieben </li></ul><ul><li>Einheitliche Elemente und Layouts sind gewünscht </li></ul><ul><li>Projekt- und seitenspezifische Ausnahmen müssen </li></ul><ul><li>trotzdem möglich sein (und sind oftmals die Regel) </li></ul><ul><li>- Verschiedene Bereiche (Consumer, Hosting, Entertainment) </li></ul><ul><li>Verschiedene Marken (1&1, WEB.DE, GMX und Maxdome) </li></ul><ul><li>Lokalisierung für DE / US / UK / FR / ES </li></ul><ul><li>Insgesamt über 30 Projekte </li></ul><ul><li>Projekte unterliegen einem kontinuierlichen Änderungsprozess </li></ul><ul><li>Performance der Seiten hat große Bedeutung </li></ul>
  3. 3. 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
  4. 4. Jasmin-Servlet Auslieferung von CSS und JavaScript
  5. 5. 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
  6. 6. 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
  7. 7. Jasmin Historie – Am Anfang war der YUI-Loader <ul><li>Möglich waren damit </li></ul><ul><li>Modularisierung </li></ul><ul><li>Dependencies </li></ul><ul><li>JavaScript und CSS Ressourcen </li></ul><ul><li>Nachteile </li></ul><ul><li>Basiert auf JavaScript </li></ul><ul><li>Ein Request pro Ressource </li></ul><ul><li>Umständliches Ladekonzept </li></ul>Anfänglich wurde von uns der YUI-Loader von Yahoo! zur Auslieferung der Ressourcen genutzt.
  8. 8. <ul><li>Ausgangsbasis </li></ul><ul><li>Ca. 20 Requests für CSS und JavaScript </li></ul><ul><li>Alle Ressourcen wurden auf allen Seiten ausgeliefert </li></ul><ul><li>Kein Minimieren </li></ul><ul><li>Keine Performance-Optimierungen </li></ul><ul><li>Ergebnis </li></ul><ul><li>Seitenabhängiges Ausliefern von CSS und JS-Ressourcen in je einem Request </li></ul><ul><li>Modular mit Dependencies zu anderen Modulen </li></ul><ul><li>Komprimierung / Kombinierung </li></ul><ul><li>Weitere Performance-Optimierungen </li></ul>Vom YUI-Loader zur Jasmin-Technologie
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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==&quot;undefined&quot;){ var UNOUNO={} ..... } onDocumentReady() { onJSload(); } Präfix Modul Javascript Suffix Modul
  13. 13. Debugging Nachteilig wirkt sich das kombinierte Ausliefern von JavaScript- und CSS-Ressourcen auf das Debugging im Firebug aus. Das Auffinden von Fehlern wird erschwert.
  14. 14. Debugging
  15. 15. Eine Firebug-Extension erleichtert zukünftig das Auffinden von Fehlern, indem ein Bezug auf die ursprünglichen Ressourcen hergestellt wird. Debugging
  16. 16. Frontend-Module (CSS, JavaScript, XML, Grafiken)
  17. 17. CSS JavaScript XML/XSL Grafiken/Pdf/Flash Frontend-Module - Komponenten Jasmin-Servlet Dynamische Includes Content Delivery Server
  18. 18. Rahmen aus Frontend-Modul (XML)
  19. 19. CSS über Jasmin-Servlet aus Frontend-Modul
  20. 20. Seiten-Inhalte über lokale Ressourcen im Projekt
  21. 21. DSL (Consumer) NGH Startseite Hosting US Mobiles Internet (Consumer)
  22. 22. Mobiles Internet (WEB.DE) DSL (WEB.DE) MailXchange (WEB.DE) Frontend-Modul
  23. 23. Mobiles Internet (1&1) Mobiles Internet (GMX) Mobiles Internet (WEB.DE)
  24. 24. Common Projekt Projekt Projekt Projekt Projekt … Common Projekt Projekt Projekt Projekt Projekt … Frontend-Module liegen außerhalb der Pustefix-Projekte
  25. 25. Common Projekt Projekt Projekt Projekt Projekt … Common Projekt Projekt Projekt Projekt Projekt … Frontend-Module lassen sich beliebig zuweisen…
  26. 26. Common Projekt Seite Seite Seite Seite Seite Seite Seite Seite … … sogar ausgewählten Seiten innerhalb eines Projekts
  27. 27. 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.
  28. 28. i18n – Beispiel NGH Frontend-Modul + Common Lokales Projekt (DE) XML (DE) Redaktion (Übersetzung) XML (US) Lokales Projekt (US)
  29. 29. i18n – Beispiel NGH
  30. 30. 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
  31. 31. Content Delivery Server Auslieferung von Grafiken, Flash, … (in der Planung)
  32. 32. 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.
  33. 33. 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)
  34. 34. 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.
  35. 35. 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.
  36. 36. 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.
  37. 37. 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.
  38. 38. 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”/>
  39. 39. Contend Delivery Network Dateien werden in die Nähe des „Empfängers“ gebracht. Dadurch verkürzten sich die Latenz-Zeiten.
  40. 40. Project Mess Tool Frontend-Kennzahlen (im Aufbau)
  41. 41. 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
  42. 42. PMT
  43. 43. Erfassung typischer Frontend-Kennzahlen PMT Jasmin-Servlet CDS Apache Pustefix Core ???
  44. 44. 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
  45. 45. PMT-Sichten Filtern nach Projekt/Seite/Kennzahl Send to Dashboard
  46. 46. Warum machen wir das? <ul><li>Qualität </li></ul><ul><li>Ordnung </li></ul><ul><li>Transparenz </li></ul><ul><li>- Performance </li></ul>
  47. 47. Warum machen wir das? <ul><li>Einzelne Grafiken bis zu 600 KB </li></ul><ul><li>Tausende ungenutzte Grafiken </li></ul><ul><li>Hunderte ungenutzte CSS-Selektoren pro Projekt </li></ul><ul><li>Diverse „Missing Includes“ (Fehlende Textbausteine) </li></ul><ul><li>Hang der Projekte zum „Vermüllen“ </li></ul>Momentaner Stand Auch ein blindes Huhn… Zukünftig Ich bin schon da! Ohne Tricks!
  48. 48. Danke! Fragen? Jasmin Frontend-Module CDS Project Mess Tool

×