Das Dokument beschreibt die Frontend-Architektur der Bestellsysteme von 1&1 Internet AG, einschließlich der Herausforderungen bei Modularisierung, Performance-Optimierung und Internationalisierung. Es werden Strategien zur Verbesserung der Ladezeiten, zur Verwaltung gemeinsamer Ressourcen und zur Durchführung statischer Codeanalysen vorgestellt. Darüber hinaus wird die Bedeutung eines einheitlichen Build-Systems und die Nutzung von Content Delivery Networks hervorgehoben.

1. Frontend-Architektur der1&1 BestellsystemeWebTech Conference | 2010

2. Hi!Seit 2003 bei der 1&1 Internet AGAbteilung betreut die Bestellsysteme der 1&1 (Shops)Experte für Frontend-TechnologienHTML, XML, CSS, JavaScriptAccessibility, Website Performance, AJAX, SuchmaschinenoptimierungNico

3. Was erwartet euch?Frontend, Frontend, FrontendInspirationModularisierung und OrganisationPerformance-OptimierungStatische CodeanalysenFrontend-Kennzahlen

4. Eigenschaften der 1&1 ShopsCa. 30 verschieden große WebapplikationenSehr hohe ÄnderungsfrequenzProdukte, Kampagnen, RedesignsEinheitliche Layouts gewünschtAusnahmen müssen möglich seinInternationalisierung für UK, US, FR, ES, PL

5. Eigenschaften der 1&1 ShopsCa. 30 verschieden große WebapplikationenSehr hohe ÄnderungsfrequenzProdukte, Kampagnen, RedesignsEinheitliche Layouts gewünschtAusnahmen müssen möglich seinInternationalisierung für UK, US, FR, ES, PL

6. Modularisierung und Organisation

7. DatenbankServer-LogikFrontendCSS + IMG +Script + HTML

8. DatenbankDatenbankServer-LogikServer-LogikFrontendFrontendCSS + IMG +Script + HTMLCSS + IMG +Script + HTMLWebsiteBlogDatenbankDatenbankServer-LogikServer-LogikFrontendFrontendCSS + IMG +Script + HTMLCSS + IMG +Script + HTMLE-ShopIntranet

9. Wie share ich gemeinsame Ressourcen?DatenbankDatenbankServer-LogikServer-LogikFrontendFrontendCSS + IMG +Script + HTMLCSS + IMG +Script + HTMLWebsiteBlogDatenbankDatenbankServer-LogikServer-LogikFrontendFrontendCSS + IMG +Script + HTMLCSS + IMG +Script + HTMLE-ShopIntranetgrid.cssreset.cssJavaScript-LibraryBasis-Styles

10. 30 verschiedene Shops…

11. 1&1 BestellsystemeDatenbankDatenbankDatenbankDatenbankLogikLogikLogikLogikLogikLogikLogikLogikLogikLogikLogikLogikLogikLogikLogikLogikFrontendFrontendFrontendFrontendFrontendFrontendFrontendFrontendFrontendFrontendFrontendFrontendFrontendFrontendFrontendFrontendFrontendFrontendFrontendFrontendFrontendFrontendFrontendFrontendFrontendFrontendFrontendFrontendFrontendFrontendWie share ich gemeinsame Ressourcen?

12. Module!CSSIMGScriptXML

13. Module stellen Ressourcen zentral bereit

14. Beispiel-Modul ADSLMobile InternetHosting

15. Beispiel-Modul BBestandskundenHosting SpanienInterne Tools

16. Module sind versionierbar

17. Formular-ModulAlte VersionNeue Version

18. 50 Module und ApplikationenModuleApplikationenDSLAutocompletionFormulareJS Basis-BibliothekHostingBestandskundenShop-SkinStopperMobile Internet

19. FrüherMit Build-Script readonly in Applikation kopierenNachteil: Build nach jeder Änderunghtdocs/modules/skin/imghtdocs/modules/skin/styles

20. LösungIn Applikation kopieren und „life“ editierbar machenNachteil: Module und Applikationen basieren auf unterschiedlichen Technologienhtdocs/modules/skin/imghtdocs/modules/skin/styles

21. LösungModularisierung des Applikations-Codes (Java)Maven als gemeinsame Basis-Technologie für Module und ApplikationenEinheitliches Build-SystemEinheitliche Verzeichnisstruktur

22. WorkspaceBündelt Frontend-Module und Applikations-Module je nach Anwendungsfall„Verdrahtet“ diese automatisch untereinanderAktionen: Open / Close / Update / CommitVerwaltung mit Subversion: Checkouts / Branches

23. Beispiele

24. Hosting-WorkspaceHosting UsHosting UKShopskinHosting PLHosting DEFormulare

25. Hosting-Workspace

26. BK-Shop-WorkspaceMobile BK-ShopDSL BK-ShopHosting BK-ShopFormulareShopskin

27. BK-Shop-Workspace

28. FazitModularisierung bietet sich für komplexe Systeme anVersionierung für die Unterstützung/Pflege älterer EntwicklungenWorkspaces für beliebige Kombinationen von Modulen und ApplikationenPermanent bei zusammengehörigen ApplikationenFür den Zeitraum eines Projekts / Kampagne / Redesigns

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

30. Performance-Optimierung

31. Performance-Optimierung20072009Steve Souders

32. Studienhttp://www.webperformancetoday.com/2010/07/01/the-best-graphs-of-velocity/

33. Typische Frontend-RessourcenCSSIMGScriptXML

34. Typische Frontend-RessourcenCSSIMGScriptXMLJasmin

35. Typische Frontend-RessourcenCSSIMGCDSScriptXML

36. Typische Frontend-RessourcenCSSIMGScriptXMLPustefixFramework

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

38. JasminNur ein Servlet;-)JavaScript MinifierModularisierung mit DependenciesWenige HTTP RequestsMinimiert und komprimiert RessourcenErgänzt Far Future Expires Header

39. Modularisierung mit DependenciesQooxdooDependencyAutocompletionWebservice.jsautocompletion.jsautocompletion.css

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ätzlichnur für die Seite DslCheck die Ressourcen der Autocompletion.“DslStartDslMobileDslCheckdslorderdslorderdslorder1. Requestautocompletion2. Request

42. Wenige HTTP Requests„Lade für alle Seiten die Ressourcen des DSL-Projekts und zusätzlichnur für die Seite DslCheck die Ressourcen der Autocompletion.“1. Request2. RequestgZip1. Seite2. Seite

43. MinimierungOptimierte VersionOriginal/**** 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;}

44. KomprimierunggZipEinsparung: 70%

45. JasminErgänzt Far Future Expires HeaderErkläre ichSpäter…

46. Content Delivery Server (CDS)CSSIMGCDSScriptXML

47. Content Delivery Server (CDS)Liefert sämtliche Media-Daten wie Grafiken, Flash, PDF usw. ausErmittelt Kennzahlen zu diesen RessourcenErgänzt einen Far Future Expires HeaderErhöht die Anzahl der parallelen DownloadsLiefert Ressourcen unter eigener Domain ausSoll zu einem Content Delivery Network ausgebaut werden

48. Content Delivery Server (CDS)ApacheCDShtdocsInternet

49. Far Future Expires Header2,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 dochverändern sollte?“

51. Far Future Expires HeaderInternet/img/footer/ui-logo.gifPublish<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.gif32j4g23j4-ui-logo.gifCDSExpires HeaderSync auf CDS

52. Parallele Downloads

53. Content Delivery Server (CDS)Warum eine eigene Domain?Darum

54. Content Delivery Server (CDS)* Aufruf ohne Cache, Dulles (USA), IE7, 1.5 MBit

55. Content Delivery Server (CDS)* Aufruf mit Cache, Dulles (USA), IE7, 1.5 MBit

56. Content Delivery Server (CDS)* Aufruf mit Cache, Dulles (USA), IE7, 1.5 MBit

57. Content Delivery NetworkEuropaLenexaKarlsruheAtlantikUSA

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

60. Content Delivery Server (CDS)

61. Content Delivery Server (CDS)onLoad:Webservice.getNextGraphics();„Image Prefetching“

62. Performance-Optimierunghttp://www.youtube.com/watch?v=ANMrzw7JFzAhttp://www.youtube.com/watch?v=0QRO3gKj3qw

63. Statische Codeanalysen

64. Statische CodeanalysenProblematischer Frontend-CodeInline-Code (Styles und Events)Deprecated Attributes (clear, target, align)Blank-GifsVerwendung interner TemplatesBlock-Elemente innerhalb von Inline-Elementen

65. Statische CodeanalysenTeil des Build-ProzessRegeln in Xpath-Syntax //@style //pfx:button//div //@target //shop:price//div //@onclick //shop:countdown//div //br/br //img[@width=“1“ and @height=“1“]

66. Statische CodeanalysenInitialer Aufwand nötigDanach …http://www.flickr.com/photos/29208923@N06/3755752618/

67. Frontend-Kennzahlen

68. Wie groß sind die ausgelieferten Ressourcen?Pro ApplikationPro SeiteWerden Ressourcen nicht gefunden?Gibt es Ausreißer?Gibt es überflüssige Ressourcen?

70. CDSGrafiken / FlashJasminApacheCSS / JSHTMLGrößeFehlende Ress.Überflüssige Ress.GrößeUngenutzte CSS-SelektorenJavaScript-FehlerGrößeFehlende Dokumente

71. Beispiel: JavaScript-Fehler

72. HorstMarcoRalfJohannesDietmarMatthiasHelenaKerimAlexAndreNedaRalphMathiasGregorAndiNicoMatthiasKilianUli

73. Fragen?nico.steiner@1und1.de@sensationalseowww.nicosteiner.dewww.slideshare.net/n.steiner

74. Vielen Dank für eureAufmerksamkeit!nico.steiner@1und1.de@sensationalseowww.nicosteiner.dewww.slideshare.net/n.steiner