SlideShare ist ein Scribd-Unternehmen logo
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
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öß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

Weitere ähnliche Inhalte

Was ist angesagt?

Server Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM ServerServer Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM Server
Sandro Sonntag
 
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDISchlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
adesso AG
 
PHP UG Karlsruhe - Zend Framework Introduction
PHP UG Karlsruhe - Zend Framework IntroductionPHP UG Karlsruhe - Zend Framework Introduction
PHP UG Karlsruhe - Zend Framework Introduction
maexpower
 
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJSWebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
Oliver Hader
 
Web-GUIs mit Vaadin
 Web-GUIs mit Vaadin Web-GUIs mit Vaadin
Web-GUIs mit Vaadin
gedoplan
 
Java-Webanwendungen mit Vaadin 8
Java-Webanwendungen mit Vaadin 8Java-Webanwendungen mit Vaadin 8
Java-Webanwendungen mit Vaadin 8
gedoplan
 
Introduction to JEE
Introduction to JEEIntroduction to JEE
Introduction to JEE
guestc44b7b
 
JavaServer Faces 2.2 (Herbstcampus 2013)
JavaServer Faces 2.2 (Herbstcampus 2013)JavaServer Faces 2.2 (Herbstcampus 2013)
JavaServer Faces 2.2 (Herbstcampus 2013)
Michael Kurz
 
Make Your IBM Connections Deployment Your Own - Customize it! German Version
Make Your IBM Connections Deployment Your Own - Customize it! German VersionMake Your IBM Connections Deployment Your Own - Customize it! German Version
Make Your IBM Connections Deployment Your Own - Customize it! German Version
Klaus Bild
 
Spring 2.0
Spring 2.0Spring 2.0
Spring 2.0
Thorsten Kamann
 
Migrate your Sametime Server to LDAP Authentication (Admincamp 2013)
Migrate your Sametime Server to LDAP Authentication (Admincamp 2013)Migrate your Sametime Server to LDAP Authentication (Admincamp 2013)
Migrate your Sametime Server to LDAP Authentication (Admincamp 2013)
Novakenstein
 
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenAutomatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Jakob
 
Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?
GFU Cyrus AG
 

Was ist angesagt? (13)

Server Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM ServerServer Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM Server
 
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDISchlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
 
PHP UG Karlsruhe - Zend Framework Introduction
PHP UG Karlsruhe - Zend Framework IntroductionPHP UG Karlsruhe - Zend Framework Introduction
PHP UG Karlsruhe - Zend Framework Introduction
 
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJSWebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
 
Web-GUIs mit Vaadin
 Web-GUIs mit Vaadin Web-GUIs mit Vaadin
Web-GUIs mit Vaadin
 
Java-Webanwendungen mit Vaadin 8
Java-Webanwendungen mit Vaadin 8Java-Webanwendungen mit Vaadin 8
Java-Webanwendungen mit Vaadin 8
 
Introduction to JEE
Introduction to JEEIntroduction to JEE
Introduction to JEE
 
JavaServer Faces 2.2 (Herbstcampus 2013)
JavaServer Faces 2.2 (Herbstcampus 2013)JavaServer Faces 2.2 (Herbstcampus 2013)
JavaServer Faces 2.2 (Herbstcampus 2013)
 
Make Your IBM Connections Deployment Your Own - Customize it! German Version
Make Your IBM Connections Deployment Your Own - Customize it! German VersionMake Your IBM Connections Deployment Your Own - Customize it! German Version
Make Your IBM Connections Deployment Your Own - Customize it! German Version
 
Spring 2.0
Spring 2.0Spring 2.0
Spring 2.0
 
Migrate your Sametime Server to LDAP Authentication (Admincamp 2013)
Migrate your Sametime Server to LDAP Authentication (Admincamp 2013)Migrate your Sametime Server to LDAP Authentication (Admincamp 2013)
Migrate your Sametime Server to LDAP Authentication (Admincamp 2013)
 
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenAutomatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-Optimierungen
 
Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?
 

Ähnlich wie 2. Technologie-Tag - Frontend Architektur

elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09
elemente websolutions
 
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
grosser
 
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
guest9606ac
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
Bastian Grimm
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
Sebastian Springer
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Gregor Biswanger
 
Qualitätssicherung in ADF Projekten der IKB Deutschen Industriebank AG
Qualitätssicherung in ADF Projekten der IKB Deutschen Industriebank AGQualitätssicherung in ADF Projekten der IKB Deutschen Industriebank AG
Qualitätssicherung in ADF Projekten der IKB Deutschen Industriebank AG
Torsten Kleiber
 
Deployment 2.0
Deployment 2.0Deployment 2.0
Deployment 2.0
Daniel Andrisek
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
Noël Bossart
 
Frontend Performance
Frontend PerformanceFrontend Performance
Frontend Performance
Nico Steiner
 
Infrastructure Solution Day | Core
Infrastructure Solution Day | CoreInfrastructure Solution Day | Core
Infrastructure Solution Day | Core
Microsoft Österreich
 
GWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der PraxisGWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der Praxis
Cenarion Information Systems GmbH
 
SDC2011: Web Performance Optimization
SDC2011: Web Performance OptimizationSDC2011: Web Performance Optimization
SDC2011: Web Performance Optimization
Jakob
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
Torben Brodt
 
Ionic 3
Ionic 3Ionic 3
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
Martin Kliehm
 
Technologievergleich für RIA
Technologievergleich für RIATechnologievergleich für RIA
Technologievergleich für RIA
Oliver Belikan
 
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
adesso AG
 
Automatischer Build mit Maven - OPITZ CONSULTING - Stefan Scheidt
Automatischer Build mit Maven - OPITZ CONSULTING - Stefan ScheidtAutomatischer Build mit Maven - OPITZ CONSULTING - Stefan Scheidt
Automatischer Build mit Maven - OPITZ CONSULTING - Stefan Scheidt
OPITZ CONSULTING Deutschland
 

Ähnlich wie 2. Technologie-Tag - Frontend Architektur (20)

elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09
 
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
 
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
 
GWT
GWTGWT
GWT
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
Qualitätssicherung in ADF Projekten der IKB Deutschen Industriebank AG
Qualitätssicherung in ADF Projekten der IKB Deutschen Industriebank AGQualitätssicherung in ADF Projekten der IKB Deutschen Industriebank AG
Qualitätssicherung in ADF Projekten der IKB Deutschen Industriebank AG
 
Deployment 2.0
Deployment 2.0Deployment 2.0
Deployment 2.0
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
Frontend Performance
Frontend PerformanceFrontend Performance
Frontend Performance
 
Infrastructure Solution Day | Core
Infrastructure Solution Day | CoreInfrastructure Solution Day | Core
Infrastructure Solution Day | Core
 
GWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der PraxisGWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der Praxis
 
SDC2011: Web Performance Optimization
SDC2011: Web Performance OptimizationSDC2011: Web Performance Optimization
SDC2011: Web Performance Optimization
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
Ionic 3
Ionic 3Ionic 3
Ionic 3
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
 
Technologievergleich für RIA
Technologievergleich für RIATechnologievergleich für RIA
Technologievergleich für RIA
 
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
 
Automatischer Build mit Maven - OPITZ CONSULTING - Stefan Scheidt
Automatischer Build mit Maven - OPITZ CONSULTING - Stefan ScheidtAutomatischer Build mit Maven - OPITZ CONSULTING - Stefan Scheidt
Automatischer Build mit Maven - OPITZ CONSULTING - Stefan Scheidt
 

Mehr von Nico Steiner

WatchPug sneak preview
WatchPug sneak previewWatchPug sneak preview
WatchPug sneak preview
Nico Steiner
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
Nico Steiner
 
SenSEO Firefox Extension
SenSEO Firefox ExtensionSenSEO Firefox Extension
SenSEO Firefox Extension
Nico Steiner
 
1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards
Nico Steiner
 
1&1 Frontend Workshop II
1&1 Frontend Workshop II1&1 Frontend Workshop II
1&1 Frontend Workshop II
Nico Steiner
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
Nico Steiner
 

Mehr von Nico Steiner (6)

WatchPug sneak preview
WatchPug sneak previewWatchPug sneak preview
WatchPug sneak preview
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
 
SenSEO Firefox Extension
SenSEO Firefox ExtensionSenSEO Firefox Extension
SenSEO Firefox Extension
 
1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards
 
1&1 Frontend Workshop II
1&1 Frontend Workshop II1&1 Frontend Workshop II
1&1 Frontend Workshop II
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
 

2. Technologie-Tag - Frontend Architektur

  • 1. 1&1 Bestellprozess-Frontends Nico Steiner & Andreas Lehr
  • 2. 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
  • 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. Jasmin-Servlet Auslieferung von CSS und JavaScript
  • 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. 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. 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.
  • 8. 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
  • 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. 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. 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. 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. Debugging Nachteilig wirkt sich das kombinierte Ausliefern von JavaScript- und CSS-Ressourcen auf das Debugging im Firebug aus. Das Auffinden von Fehlern wird erschwert.
  • 15. Eine Firebug-Extension erleichtert zukünftig das Auffinden von Fehlern, indem ein Bezug auf die ursprünglichen Ressourcen hergestellt wird. Debugging
  • 17. CSS JavaScript XML/XSL Grafiken/Pdf/Flash Frontend-Module - Komponenten Jasmin-Servlet Dynamische Includes Content Delivery Server
  • 19. CSS über Jasmin-Servlet aus Frontend-Modul
  • 20. Seiten-Inhalte über lokale Ressourcen im Projekt
  • 21. DSL (Consumer) NGH Startseite Hosting US Mobiles Internet (Consumer)
  • 22. Mobiles Internet (WEB.DE) DSL (WEB.DE) MailXchange (WEB.DE) Frontend-Modul
  • 23. Mobiles Internet (1&1) Mobiles Internet (GMX) Mobiles Internet (WEB.DE)
  • 24. Common Projekt Projekt Projekt Projekt Projekt … Common Projekt Projekt Projekt Projekt Projekt … Frontend-Module liegen außerhalb der Pustefix-Projekte
  • 25. Common Projekt Projekt Projekt Projekt Projekt … Common Projekt Projekt Projekt Projekt Projekt … Frontend-Module lassen sich beliebig zuweisen…
  • 26. Common Projekt Seite Seite Seite Seite Seite Seite Seite Seite … … sogar ausgewählten Seiten innerhalb eines Projekts
  • 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. i18n – Beispiel NGH Frontend-Modul + Common Lokales Projekt (DE) XML (DE) Redaktion (Übersetzung) XML (US) Lokales Projekt (US)
  • 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. Content Delivery Server Auslieferung von Grafiken, Flash, … (in der Planung)
  • 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. 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. 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. 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. 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. 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. 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. Contend Delivery Network Dateien werden in die Nähe des „Empfängers“ gebracht. Dadurch verkürzten sich die Latenz-Zeiten.
  • 40. Project Mess Tool Frontend-Kennzahlen (im Aufbau)
  • 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. PMT
  • 43. Erfassung typischer Frontend-Kennzahlen PMT Jasmin-Servlet CDS Apache Pustefix Core ???
  • 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. PMT-Sichten Filtern nach Projekt/Seite/Kennzahl Send to Dashboard
  • 46. Warum machen wir das? Qualität Ordnung Transparenz - Performance
  • 47. 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!
  • 48. Danke! Fragen? Jasmin Frontend-Module CDS Project Mess Tool