Frontend-Architektur der 1&1 Bestellsysteme

Frontend-Architektur der1&1 Bestellsysteme
WebTech Conference | 2010

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

Was erwartet euch?
Frontend, Frontend, Frontend
Inspiration
Modularisierung und Organisation
Performance-Optimierung
Statische Codeanalysen
Frontend-Kennzahlen

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

Modularisierung und Organisation

Datenbank
Server-Logik
Frontend
CSS + IMG +
Script + HTML

Datenbank
Datenbank
Server-Logik
Server-Logik
Frontend
Frontend
CSS + IMG +
Script + HTML
CSS + IMG +
Script + HTML
Website
Blog
Datenbank
Datenbank
Server-Logik
Server-Logik
Frontend
Frontend
CSS + IMG +
Script + HTML
CSS + IMG +
Script + HTML
E-Shop
Intranet

Wie share ich gemeinsame Ressourcen?
Datenbank
Datenbank
Server-Logik
Server-Logik
Frontend
Frontend
CSS + IMG +
Script + HTML
CSS + IMG +
Script + HTML
Website
Blog
Datenbank
Datenbank
Server-Logik
Server-Logik
Frontend
Frontend
CSS + IMG +
Script + HTML
CSS + IMG +
Script + HTML
E-Shop
Intranet
grid.css
reset.css
JavaScript-Library
Basis-Styles

30 verschiedene Shops…

1&1 Bestellsysteme
Datenbank
Datenbank
Datenbank
Datenbank
Logik
Logik
Logik
Logik
Logik
Logik
Logik
Logik
Logik
Logik
Logik
Logik
Logik
Logik
Logik
Logik
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Frontend
Wie share ich gemeinsame Ressourcen?

Module!
CSS
IMG
Script
XML

Module stellen Ressourcen zentral bereit

Beispiel-Modul A
DSL
Mobile Internet
Hosting

Beispiel-Modul B
Bestandskunden
Hosting Spanien
Interne Tools

Module sind versionierbar

Formular-Modul
Alte Version
Neue Version

50 Module und Applikationen
Module
Applikationen
DSL
Autocompletion
Formulare
JS Basis-Bibliothek
Hosting
Bestandskunden
Shop-Skin
Stopper
Mobile Internet

Früher
Mit Build-Script readonly in Applikation kopieren
Nachteil: Build nach jeder Änderung
htdocs/modules/skin/img
htdocs/modules/skin/styles

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

Lösung
Modularisierung des Applikations-Codes (Java)
Maven als gemeinsame Basis-Technologie für Module und Applikationen
Einheitliches Build-System
Einheitliche Verzeichnisstruktur

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

Beispiele

Hosting-Workspace
Hosting Us
Hosting UK
Shopskin
Hosting PL
Hosting DE
Formulare

Hosting-Workspace

BK-Shop-Workspace
Mobile BK-Shop
DSL BK-Shop
Hosting BK-Shop
Formulare
Shopskin

BK-Shop-Workspace

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

http://maven.apache.org/
http://subversion.apache.org/

2007
2009
Steve Souders

Studien
http://www.webperformancetoday.com/2010/07/01/the-best-graphs-of-velocity/

Typische Frontend-Ressourcen
CSS
IMG
Script
XML

CSS
IMG
Script
XML
Jasmin

CSS
IMG
CDS
Script
XML

CSS
IMG
Script
XML
Pustefix
Framework

Jasmin
Schönheit aus 1001 Nacht?
http://www.flickr.com/photos/honma/4084355466

Jasmin
Nur ein Servlet;-)
JavaScript Minifier
Modularisierung mit Dependencies
Wenige HTTP Requests
Minimiert und komprimiert Ressourcen
Ergänzt Far Future Expires Header

Qooxdoo
Dependency
Autocompletion
Webservice.js
autocompletion.js
autocompletion.css

„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

„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

Minimierung
Optimierte Version
Original
/**** zip:/home/servlet/pfixschlundAS_b/style/reset.css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
/*outline: 0;*/
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;} sup{line-height:0;font-size:60%;}body{line-height:1;color:black;background:white;}ol,ul{list-style:none;}table{border-collapse:separate;border-spacing:0;}caption,
th,td{text-align:left;fontweight:normal;}blockquote:before,blockquote
:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}.clearfix:
after{content:".";display:block;height:0;clear:both;visibility:hidden;}/* Hidesfrom IE-mac */ .clearfix{display:block;}/* End hidefrom IE-mac */ #skipmenu{position:absolute;top:10px;left:10px;width:180px;z-index:100;}a.skiptarget{display:block;width:0;height:0;overflow:hidden;}a.skip{fontsize:11px;texttransform:uppercase;textdecoration:none;}a.skip,a.skip:link,a.skip:visited{position:absolute;top:999em;}a.skip:focus,a.skip:active{outline:1px dotted #fff;color:#fff;position:absolute;top:0;left:0;}

Komprimierung
gZip
Einsparung: 70%

Jasmin
Ergänzt Far Future Expires Header
Erkläre ich
Später
…

Content Delivery Server (CDS)
CSS
IMG
CDS
Script
XML

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

Apache
CDS
htdocs
Internet

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.“

„Wie erzwinge ich ein Neuladen, wenn sich die Ressource doch
verändern sollte?“

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

Parallele Downloads

Warum eine eigene Domain?
Darum

* Aufruf ohne Cache, Dulles (USA), IE7, 1.5 MBit

* Aufruf mit Cache, Dulles (USA), IE7, 1.5 MBit

Content Delivery Network
Europa
Lenexa
Karlsruhe
Atlantik
USA

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

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.“

onLoad:
Webservice.getNextGraphics();
„Image Prefetching“

http://www.youtube.com/watch?v=ANMrzw7JFzA
http://www.youtube.com/watch?v=0QRO3gKj3qw

Problematischer Frontend-Code
Inline-Code (Styles und Events)
Deprecated Attributes (clear, target, align)
Blank-Gifs
Verwendung interner Templates
Block-Elemente innerhalb von Inline-Elementen

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“]

Initialer Aufwand nötig
Danach …
http://www.flickr.com/photos/29208923@N06/3755752618/

Frontend-Kennzahlen

Wie groß sind die ausgelieferten Ressourcen?
Pro Applikation
Pro Seite
Werden Ressourcen nicht gefunden?
Gibt es Ausreißer?
Gibt es überflüssige Ressourcen?

CDS
Grafiken / Flash
Jasmin
Apache
CSS / JS
HTML
Größe
Fehlende Ress.
Überflüssige Ress.
Größe
Ungenutzte CSS-Selektoren
JavaScript-Fehler
Größe
Fehlende Dokumente

Beispiel: JavaScript-Fehler

Horst
Marco
Ralf
Johannes
Dietmar
Matthias
Helena
Kerim
Alex
Andre
Neda
Ralph
Mathias
Gregor
Andi
Nico
Matthias
Kilian
Uli

Fragen?
nico.steiner@1und1.de
@sensationalseo
www.nicosteiner.de
www.slideshare.net/n.steiner

Vielen Dank für eure
Aufmerksamkeit!
nico.steiner@1und1.de
@sensationalseo
www.nicosteiner.de
www.slideshare.net/n.steiner

Frontend-Architektur der 1&1 Bestellsysteme

by Nico Steiner on Oct 13, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 1

Statistics

Frontend-Architektur der 1&1 Bestellsysteme — Presentation Transcript