2. Hi! Seit 2003 bei der 1&1 Internet AG Abteilung betreut die Bestellsysteme der 1&1 (Shops) Experte für Frontend-Technologien HTML, XML, CSS, JavaScript Accessibility, Website Performance, AJAX, Suchmaschinenoptimierung Nico
3. Was erwartet euch? Frontend, Frontend, Frontend Inspiration Modularisierung und Organisation Performance-Optimierung Statische Codeanalysen Frontend-Kennzahlen
4. Eigenschaften der 1&1 Shops Ca. 30 verschieden große Webapplikationen Sehr hohe Änderungsfrequenz Produkte, Kampagnen, Redesigns Einheitliche Layouts gewünscht Ausnahmen müssen möglich sein Internationalisierung für UK, US, FR, ES, PL
5. Eigenschaften der 1&1 Shops Ca. 30 verschieden große Webapplikationen Sehr hohe Änderungsfrequenz Produkte, Kampagnen, Redesigns Einheitliche Layouts gewünscht Ausnahmen müssen möglich sein Internationalisierung für UK, US, FR, ES, PL
18. 50 Module und Applikationen Module Applikationen DSL Autocompletion Formulare JS Basis-Bibliothek Hosting Bestandskunden Shop-Skin Stopper Mobile Internet
19. Früher Mit Build-Script readonly in Applikation kopieren Nachteil: Build nach jeder Änderung htdocs/modules/skin/img htdocs/modules/skin/styles
20. Lösung In Applikation kopieren und „life“ editierbar machen Nachteil: Module und Applikationen basieren auf unterschiedlichen Technologien htdocs/modules/skin/img htdocs/modules/skin/styles
21. Lösung Modularisierung des Applikations-Codes (Java) Maven als gemeinsame Basis-Technologie für Module und Applikationen Einheitliches Build-System Einheitliche Verzeichnisstruktur
22. Workspace Bündelt Frontend-Module und Applikations-Module je nach Anwendungsfall „Verdrahtet“ diese automatisch untereinander Aktionen: Open / Close / Update / Commit Verwaltung mit Subversion: Checkouts / Branches
28. Fazit Modularisierung bietet sich für komplexe Systeme an Versionierung für die Unterstützung/Pflege älterer Entwicklungen Workspaces für beliebige Kombinationen von Modulen und Applikationen Permanent bei zusammengehörigen Applikationen Für den Zeitraum eines Projekts / Kampagne / Redesigns
38. Jasmin Nur ein Servlet;-) JavaScript Minifier Modularisierung mit Dependencies Wenige HTTP Requests Minimiert und komprimiert Ressourcen Ergänzt Far Future Expires Header
40. Modularisierung mit Dependencies <LINK href=“/xml/jasmin/dslorder+clearfix+autocompletion/css“> <SCRIPT src=“/xml/jasmin/dslorder+clearfix+autocompletion/js“>
41. Wenige HTTP Requests „Lade für alle Seiten die Ressourcen des DSL-Projekts und zusätzlich nur für die Seite DslCheck die Ressourcen der Autocompletion.“ DslStart DslMobile DslCheck dslorder dslorder dslorder 1. Request autocompletion 2. Request
42. Wenige HTTP Requests „Lade für alle Seiten die Ressourcen des DSL-Projekts und zusätzlich nur für die Seite DslCheck die Ressourcen der Autocompletion.“ 1. Request 2. Request gZip 1. Seite 2. Seite
47. Content Delivery Server (CDS) Liefert sämtliche Media-Daten wie Grafiken, Flash, PDF usw. aus Ermittelt Kennzahlen zu diesen Ressourcen Ergänzt einen Far Future Expires Header Erhöht die Anzahl der parallelen Downloads Liefert Ressourcen unter eigener Domain aus Soll zu einem Content Delivery Network ausgebaut werden
49. Far Future Expires Header 2,5 Sekunden! Far Future Expires Header: „Diese Ressource verändert sich für die nächsten 15 Jahre nicht und kann immer aus dem Cache bezogen werden.“
50. Far Future Expires Header „Wie erzwinge ich ein Neuladen, wenn sich die Ressource doch verändern sollte?“
51. Far Future Expires Header Internet /img/footer/ui-logo.gif Publish <imgsrc=„http://uicdn.net/32j4g23j4-ui-logo.gif“> url(http://uicdn.net/32j4g23j4-ui-logo.gif) HTML <imgsrc=„/img/footer/ui-logo.gif“> url(/img/footer/ui-logo.gif) MD5-Hash /img/footer/ui-logo.gif 32j4g23j4-ui-logo.gif CDS Expires Header Sync auf CDS
58. Kennzahlen „Welche Größe haben die Daten, welche von den verschiedenen Seiten einesProjekts abgerufen werden?“ „Werden Daten angefragt, die nicht verfügbar sind (404)?“ http://zoompf.com/2010-state-of-web-performance-report
59. Content Delivery Server (CDS) http://www.youtube.com/watch?v=IWWBnJEsUtU „Larry Page hat einmal die Vision geäußert, Webseiten so schnell browsen zu können, wie man die Seiten in einem Hochglanzmagazin umblättert.“
64. Statische Codeanalysen Problematischer Frontend-Code Inline-Code (Styles und Events) Deprecated Attributes (clear, target, align) Blank-Gifs Verwendung interner Templates Block-Elemente innerhalb von Inline-Elementen
65. Statische Codeanalysen Teil des Build-Prozess Regeln in Xpath-Syntax //@style //pfx:button//div //@target //shop:price//div //@onclick //shop:countdown//div //br/br //img[@width=“1“ and @height=“1“]
68. Wie groß sind die ausgelieferten Ressourcen? Pro Applikation Pro Seite Werden Ressourcen nicht gefunden? Gibt es Ausreißer? Gibt es überflüssige Ressourcen?
