• Save
Frontend-Architektur der 1&1 Bestellsysteme
Upcoming SlideShare
Loading in...5
×
 

Frontend-Architektur der 1&1 Bestellsysteme

on

  • 2,512 views

 

Statistics

Views

Total Views
2,512
Views on SlideShare
2,511
Embed Views
1

Actions

Likes
3
Downloads
0
Comments
0

1 Embed 1

http://www.netzartist.de 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Frontend-Architektur der 1&1 Bestellsysteme Frontend-Architektur der 1&1 Bestellsysteme Presentation Transcript

  • 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
  • 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/
  • Performance-Optimierung
  • Performance-Optimierung
    2007
    2009
    Steve Souders
  • Studien
    http://www.webperformancetoday.com/2010/07/01/the-best-graphs-of-velocity/
  • Typische Frontend-Ressourcen
    CSS
    IMG
    Script
    XML
  • Typische Frontend-Ressourcen
    CSS
    IMG
    Script
    XML
    Jasmin
  • Typische Frontend-Ressourcen
    CSS
    IMG
    CDS
    Script
    XML
  • Typische Frontend-Ressourcen
    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
  • Modularisierung mit Dependencies
    Qooxdoo
    Dependency
    Autocompletion
    Webservice.js
    autocompletion.js
    autocompletion.css
  • Modularisierung mit Dependencies
    <LINK href=“/xml/jasmin/dslorder+clearfix+autocompletion/css“>
    <SCRIPT src=“/xml/jasmin/dslorder+clearfix+autocompletion/js“>
  • 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
  • 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
  • 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
  • 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
  • Content Delivery Server (CDS)
    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.“
  • Far Future Expires Header
    „Wie erzwinge ich ein Neuladen, wenn sich die Ressource doch
    verändern sollte?“
  • 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
  • Parallele Downloads
  • Content Delivery Server (CDS)
    Warum eine eigene Domain?
    Darum
  • Content Delivery Server (CDS)
    * Aufruf ohne Cache, Dulles (USA), IE7, 1.5 MBit
  • Content Delivery Server (CDS)
    * Aufruf mit Cache, Dulles (USA), IE7, 1.5 MBit
  • Content Delivery Server (CDS)
    * 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
  • 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.“
  • Content Delivery Server (CDS)
  • Content Delivery Server (CDS)
    onLoad:
    Webservice.getNextGraphics();
    „Image Prefetching“
  • Performance-Optimierung
    http://www.youtube.com/watch?v=ANMrzw7JFzA
    http://www.youtube.com/watch?v=0QRO3gKj3qw
  • Statische Codeanalysen
  • 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
  • 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“]
  • Statische Codeanalysen
    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