Frontend-Architektur der 1&1 Bestellsysteme

2,819 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,819
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Frontend-Architektur der 1&1 Bestellsysteme

  1. 1. Frontend-Architektur der1&1 Bestellsysteme<br />WebTech Conference | 2010<br />
  2. 2. Hi!<br />Seit 2003 bei der 1&1 Internet AG<br />Abteilung betreut die Bestellsysteme der 1&1 (Shops)<br />Experte für Frontend-Technologien<br />HTML, XML, CSS, JavaScript<br />Accessibility, Website Performance, AJAX, Suchmaschinenoptimierung<br />Nico<br />
  3. 3. Was erwartet euch?<br />Frontend, Frontend, Frontend<br />Inspiration<br />Modularisierung und Organisation<br />Performance-Optimierung<br />Statische Codeanalysen<br />Frontend-Kennzahlen<br />
  4. 4. Eigenschaften der 1&1 Shops<br />Ca. 30 verschieden große Webapplikationen<br />Sehr hohe Änderungsfrequenz<br />Produkte, Kampagnen, Redesigns<br />Einheitliche Layouts gewünscht<br />Ausnahmen müssen möglich sein<br />Internationalisierung für UK, US, FR, ES, PL<br />
  5. 5. Eigenschaften der 1&1 Shops<br />Ca. 30 verschieden große Webapplikationen<br />Sehr hohe Änderungsfrequenz<br />Produkte, Kampagnen, Redesigns<br />Einheitliche Layouts gewünscht<br />Ausnahmen müssen möglich sein<br />Internationalisierung für UK, US, FR, ES, PL<br />
  6. 6. Modularisierung und Organisation<br />
  7. 7. Datenbank<br />Server-Logik<br />Frontend<br />CSS + IMG +<br />Script + HTML<br />
  8. 8. Datenbank<br />Datenbank<br />Server-Logik<br />Server-Logik<br />Frontend<br />Frontend<br />CSS + IMG +<br />Script + HTML<br />CSS + IMG +<br />Script + HTML<br />Website<br />Blog<br />Datenbank<br />Datenbank<br />Server-Logik<br />Server-Logik<br />Frontend<br />Frontend<br />CSS + IMG +<br />Script + HTML<br />CSS + IMG +<br />Script + HTML<br />E-Shop<br />Intranet<br />
  9. 9. Wie share ich gemeinsame Ressourcen?<br />Datenbank<br />Datenbank<br />Server-Logik<br />Server-Logik<br />Frontend<br />Frontend<br />CSS + IMG +<br />Script + HTML<br />CSS + IMG +<br />Script + HTML<br />Website<br />Blog<br />Datenbank<br />Datenbank<br />Server-Logik<br />Server-Logik<br />Frontend<br />Frontend<br />CSS + IMG +<br />Script + HTML<br />CSS + IMG +<br />Script + HTML<br />E-Shop<br />Intranet<br />grid.css<br />reset.css<br />JavaScript-Library<br />Basis-Styles<br />
  10. 10. 30 verschiedene Shops…<br />
  11. 11. 1&1 Bestellsysteme<br />Datenbank<br />Datenbank<br />Datenbank<br />Datenbank<br />Logik<br />Logik<br />Logik<br />Logik<br />Logik<br />Logik<br />Logik<br />Logik<br />Logik<br />Logik<br />Logik<br />Logik<br />Logik<br />Logik<br />Logik<br />Logik<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Frontend<br />Wie share ich gemeinsame Ressourcen?<br />
  12. 12. Module!<br />CSS<br />IMG<br />Script<br />XML<br />
  13. 13. Module stellen Ressourcen zentral bereit<br />
  14. 14. Beispiel-Modul A<br />DSL<br />Mobile Internet<br />Hosting<br />
  15. 15. Beispiel-Modul B<br />Bestandskunden<br />Hosting Spanien<br />Interne Tools<br />
  16. 16. Module sind versionierbar<br />
  17. 17. Formular-Modul<br />Alte Version<br />Neue Version<br />
  18. 18. 50 Module und Applikationen<br />Module<br />Applikationen<br />DSL<br />Autocompletion<br />Formulare<br />JS Basis-Bibliothek<br />Hosting<br />Bestandskunden<br />Shop-Skin<br />Stopper<br />Mobile Internet<br />
  19. 19. Früher<br />Mit Build-Script readonly in Applikation kopieren<br />Nachteil: Build nach jeder Änderung<br />htdocs/modules/skin/img<br />htdocs/modules/skin/styles<br />
  20. 20. Lösung<br />In Applikation kopieren und „life“ editierbar machen<br />Nachteil: Module und Applikationen basieren auf unterschiedlichen Technologien<br />htdocs/modules/skin/img<br />htdocs/modules/skin/styles<br />
  21. 21. Lösung<br />Modularisierung des Applikations-Codes (Java)<br />Maven als gemeinsame Basis-Technologie für Module und Applikationen<br />Einheitliches Build-System<br />Einheitliche Verzeichnisstruktur<br />
  22. 22. Workspace<br />Bündelt Frontend-Module und Applikations-Module je nach Anwendungsfall<br />„Verdrahtet“ diese automatisch untereinander<br />Aktionen: Open / Close / Update / Commit<br />Verwaltung mit Subversion: Checkouts / Branches<br />
  23. 23. Beispiele<br />
  24. 24. Hosting-Workspace<br />Hosting Us<br />Hosting UK<br />Shopskin<br />Hosting PL<br />Hosting DE<br />Formulare<br />
  25. 25. Hosting-Workspace<br />
  26. 26. BK-Shop-Workspace<br />Mobile BK-Shop<br />DSL BK-Shop<br />Hosting BK-Shop<br />Formulare<br />Shopskin<br />
  27. 27. BK-Shop-Workspace<br />
  28. 28. Fazit<br />Modularisierung bietet sich für komplexe Systeme an<br />Versionierung für die Unterstützung/Pflege älterer Entwicklungen<br />Workspaces für beliebige Kombinationen von Modulen und Applikationen<br />Permanent bei zusammengehörigen Applikationen<br />Für den Zeitraum eines Projekts / Kampagne / Redesigns<br />
  29. 29. http://maven.apache.org/<br />http://subversion.apache.org/<br />
  30. 30. Performance-Optimierung<br />
  31. 31. Performance-Optimierung<br />2007<br />2009<br />Steve Souders<br />
  32. 32. Studien<br />http://www.webperformancetoday.com/2010/07/01/the-best-graphs-of-velocity/<br />
  33. 33. Typische Frontend-Ressourcen<br />CSS<br />IMG<br />Script<br />XML<br />
  34. 34. Typische Frontend-Ressourcen<br />CSS<br />IMG<br />Script<br />XML<br />Jasmin<br />
  35. 35. Typische Frontend-Ressourcen<br />CSS<br />IMG<br />CDS<br />Script<br />XML<br />
  36. 36. Typische Frontend-Ressourcen<br />CSS<br />IMG<br />Script<br />XML<br />Pustefix<br />Framework<br />
  37. 37. Jasmin<br />Schönheit aus 1001 Nacht?<br />http://www.flickr.com/photos/honma/4084355466<br />
  38. 38. Jasmin<br />Nur ein Servlet;-)<br />JavaScript Minifier<br />Modularisierung mit Dependencies<br />Wenige HTTP Requests<br />Minimiert und komprimiert Ressourcen<br />Ergänzt Far Future Expires Header<br />
  39. 39. Modularisierung mit Dependencies<br />Qooxdoo<br />Dependency<br />Autocompletion<br />Webservice.js<br />autocompletion.js<br />autocompletion.css<br />
  40. 40. Modularisierung mit Dependencies<br /><LINK href=“/xml/jasmin/dslorder+clearfix+autocompletion/css“><br /><SCRIPT src=“/xml/jasmin/dslorder+clearfix+autocompletion/js“><br />
  41. 41. Wenige HTTP Requests<br />„Lade für alle Seiten die Ressourcen des DSL-Projekts und zusätzlich<br />nur für die Seite DslCheck die Ressourcen der Autocompletion.“<br />DslStart<br />DslMobile<br />DslCheck<br />dslorder<br />dslorder<br />dslorder<br />1. Request<br />autocompletion<br />2. Request<br />
  42. 42. Wenige HTTP Requests<br />„Lade für alle Seiten die Ressourcen des DSL-Projekts und zusätzlich<br />nur für die Seite DslCheck die Ressourcen der Autocompletion.“<br />1. Request<br />2. Request<br />gZip<br />1. Seite<br />2. Seite<br />
  43. 43. Minimierung<br />Optimierte Version<br />Original<br />/**** zip:/home/servlet/pfixschlundAS_b/style/reset.css */<br />html, body, div, span, applet, object, iframe,<br />h1, h2, h3, h4, h5, h6, p, blockquote, pre,<br />a, abbr, acronym, address, big, cite, code,<br />del, dfn, em, font, img, ins, kbd, q, s, samp,<br />small, strike, strong, sub, tt, var,<br />dl, dt, dd, ol, ul, li,<br />fieldset, form, label, legend,<br />table, caption, tbody, tfoot, thead, tr, th, td {<br />margin: 0;<br />padding: 0;<br />border: 0;<br /> /*outline: 0;*/<br />font-weight: inherit;<br />font-style: inherit;<br />font-size: 100%;<br />font-family: inherit;<br />vertical-align: baseline;<br />}<br />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,<br />th,td{text-align:left;fontweight:normal;}blockquote:before,blockquote<br />:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}.clearfix:<br />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;} <br />
  44. 44. Komprimierung<br />gZip<br />Einsparung: 70%<br />
  45. 45. Jasmin<br />Ergänzt Far Future Expires Header<br />Erkläre ich<br />Später<br />…<br />
  46. 46. Content Delivery Server (CDS)<br />CSS<br />IMG<br />CDS<br />Script<br />XML<br />
  47. 47. Content Delivery Server (CDS)<br />Liefert sämtliche Media-Daten wie Grafiken, Flash, PDF usw. aus<br />Ermittelt Kennzahlen zu diesen Ressourcen<br />Ergänzt einen Far Future Expires Header<br />Erhöht die Anzahl der parallelen Downloads<br />Liefert Ressourcen unter eigener Domain aus<br />Soll zu einem Content Delivery Network ausgebaut werden<br />
  48. 48. Content Delivery Server (CDS)<br />Apache<br />CDS<br />htdocs<br />Internet<br />
  49. 49. Far Future Expires Header<br />2,5 Sekunden!<br />Far Future Expires Header: „Diese Ressource verändert sich für die<br /> nächsten 15 Jahre nicht und kann immer<br /> aus dem Cache bezogen werden.“<br />
  50. 50. Far Future Expires Header<br />„Wie erzwinge ich ein Neuladen, wenn sich die Ressource doch<br />verändern sollte?“<br />
  51. 51. Far Future Expires Header<br />Internet<br />/img/footer/ui-logo.gif<br />Publish<br /><imgsrc=„http://uicdn.net/32j4g23j4-ui-logo.gif“><br />url(http://uicdn.net/32j4g23j4-ui-logo.gif)<br />HTML<br /><imgsrc=„/img/footer/ui-logo.gif“><br />url(/img/footer/ui-logo.gif)<br />MD5-Hash<br />/img/footer/ui-logo.gif<br />32j4g23j4-ui-logo.gif<br />CDS<br />Expires Header<br />Sync auf CDS<br />
  52. 52. Parallele Downloads<br />
  53. 53. Content Delivery Server (CDS)<br />Warum eine eigene Domain?<br />Darum<br />
  54. 54. Content Delivery Server (CDS)<br />* Aufruf ohne Cache, Dulles (USA), IE7, 1.5 MBit<br />
  55. 55. Content Delivery Server (CDS)<br />* Aufruf mit Cache, Dulles (USA), IE7, 1.5 MBit<br />
  56. 56. Content Delivery Server (CDS)<br />* Aufruf mit Cache, Dulles (USA), IE7, 1.5 MBit<br />
  57. 57. Content Delivery Network<br />Europa<br />Lenexa<br />Karlsruhe<br />Atlantik<br />USA<br />
  58. 58. Kennzahlen<br />„Welche Größe haben die Daten, welche von den verschiedenen Seiten einesProjekts abgerufen werden?“<br />„Werden Daten angefragt, die nicht verfügbar sind (404)?“<br />http://zoompf.com/2010-state-of-web-performance-report<br />
  59. 59. Content Delivery Server (CDS)<br />http://www.youtube.com/watch?v=IWWBnJEsUtU<br />„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.“<br />
  60. 60. Content Delivery Server (CDS)<br />
  61. 61. Content Delivery Server (CDS)<br />onLoad:<br />Webservice.getNextGraphics();<br />„Image Prefetching“<br />
  62. 62. Performance-Optimierung<br />http://www.youtube.com/watch?v=ANMrzw7JFzA<br />http://www.youtube.com/watch?v=0QRO3gKj3qw<br />
  63. 63. Statische Codeanalysen<br />
  64. 64. Statische Codeanalysen<br />Problematischer Frontend-Code<br />Inline-Code (Styles und Events)<br />Deprecated Attributes (clear, target, align)<br />Blank-Gifs<br />Verwendung interner Templates<br />Block-Elemente innerhalb von Inline-Elementen<br />
  65. 65. Statische Codeanalysen<br />Teil des Build-Prozess<br />Regeln in Xpath-Syntax<br /> //@style //pfx:button//div<br /> //@target //shop:price//div<br /> //@onclick //shop:countdown//div<br /> //br/br<br /> //img[@width=“1“ and @height=“1“]<br />
  66. 66. Statische Codeanalysen<br />Initialer Aufwand nötig<br />Danach …<br />http://www.flickr.com/photos/29208923@N06/3755752618/<br />
  67. 67. Frontend-Kennzahlen<br />
  68. 68. Wie groß sind die ausgelieferten Ressourcen?<br />Pro Applikation<br />Pro Seite<br />Werden Ressourcen nicht gefunden?<br />Gibt es Ausreißer?<br />Gibt es überflüssige Ressourcen?<br />
  69. 69.
  70. 70. CDS<br />Grafiken / Flash<br />Jasmin<br />Apache<br />CSS / JS<br />HTML<br />Größe<br />Fehlende Ress.<br />Überflüssige Ress.<br />Größe<br />Ungenutzte CSS-Selektoren<br />JavaScript-Fehler<br />Größe<br />Fehlende Dokumente<br />
  71. 71. Beispiel: JavaScript-Fehler<br />
  72. 72. Horst<br />Marco<br />Ralf<br />Johannes<br />Dietmar<br />Matthias<br />Helena<br />Kerim<br />Alex<br />Andre<br />Neda<br />Ralph<br />Mathias<br />Gregor<br />Andi<br />Nico<br />Matthias<br />Kilian<br />Uli<br />
  73. 73. Fragen?<br />nico.steiner@1und1.de<br />@sensationalseo<br />www.nicosteiner.de<br />www.slideshare.net/n.steiner<br />
  74. 74. Vielen Dank für eure<br />Aufmerksamkeit!<br />nico.steiner@1und1.de<br />@sensationalseo<br />www.nicosteiner.de<br />www.slideshare.net/n.steiner<br />

×