Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Frontend-Build-ProzessHamburg, 26.03.2012Jan Weinschenker, HolisticonOliver Ochs, Holisticon
o2http://dsl.o2online.deonlin
Auftragsstatus      2
ArSystemarchitekturchite
Systemarchitektur    Content Repository   Webapplikation                                          4
Umgebungen             Content         Content             Code            Code      DEV              VAL             PROD...
OOptimierung außerhalb des Buildsptimi
Parallelisierte Downloads / Cookie-freier Host fürstatischen Content                              static1.dsl.o2.de       ...
Nutze Caching & ermögliche Proxy-Caching /komprimiere RessourcenCache-Control:             public, max-age=3628800Date:   ...
URI-BuilderGleichmäßige Verteilung zwischen statischen HostsURLs beinhalten Versionsnummer / Publikationsdatum als URL-Seg...
TemplatingCSS in den Seitenkopf einbauenCSS vor JavaScript einbindenGlobales JavaScript im Header einbinden (Head.js mögli...
Einmal optimiert – und immer wieder gebrochenJavaScript kombinieren und minifizierenCSS kombinieren und minifizierenImage-...
„Für eine dauerhafte, nachhaltigePerformance-Optimierungmüssen die Maßnahmenautomatisiert bzw. inden Build-Prozess integri...
BBuild-Prozessuildp
Build-System für Frontend-Projekt                       Analog zu Java-Build:                       Ressourcen im SVN eing...
Frontend-Artefakte Continous Integration           SVN                                               Enwickler-Rechner Con...
CCSS (Cascading Style Sheets)asca
CSS (Cascading Style Sheets)      Packaging   Processing   Linting                                         18
Web Resource Optimizerfor Java          Free and Open Source Java project which brings          together almost all the mo...
20
@import@import	  url(http:/static1.validation.dsl.o2online.de/provider/css/1200001398/149/global.css);	  @import	  url(htt...
Packaging            22
wro4j Maven Plug-in<plugin>	   	  <groupId>ro.isdc.wro4j</groupId>	   	  <artifactId>wro4j-­‐maven-­‐plugin</artifactId>	 ...
wro.xml<groups>	               	  <group	  name=global>	               	               	  <css>/css/sim_card.css</css>	   ...
Packaged / Minified                      25
CSS (Cascading Style Sheets)      Packaging   Processing   Linting                                         26
ProcessingCSS Variables Support/*	  CSS	  Variables	  */	                                         /*	  Compiled	  CSS	  */...
CSS (Cascading Style Sheets)      Packaging   Processing   Linting                                         28
Code Quality         CSSLint- CSS Lint is a tool to help point out problems         with your CSS code. It does basic synt...
CSS-Lint-Meldungen    Parsing Errors                Expected RBRACE at line       All                                  384...
CSS (Cascading Style Sheets)      Packaging   Processing   Linting                                         31
ImImages im CSSages
OptiPNG     OptiPNG is a PNG optimizer that recompresses image files to     a smaller size, without losing any information...
maven-optipng-plugin<plugin>	  	  	  	  	  	  	  	  <groupId>de.kabambo</groupId>	  	  	  	  	  	  	  	  <artifactId>maven...
JpegTran           JpegTran transcodes JPEG lossless (e.g. removes           meta data and headers)           -- http:/jpe...
JaJS (aka. JavaScript)vaSc
JS (aka. JavaScript)   Packaging   Linting   Testing   Doc                                         40
Packaging & Modularization
wro4j configuration file „wro.xml“<groups>	  	  	  	  	  	  <group	  name=global>	                           	  <js>/javas...
Minification Engines in wro4j     •  Douglas Crockford‘s JsMin     •  Google Closure compressor     •  Yahoo UI Compressor...
Minification(function(bd,L){var	  av=bd.document,bu=bd.navigator,bm=bd.location;var	  b=(function(){var	  bF=function(b0,b...
JS (aka. JavaScript)   Packaging   Linting   Testing   Doc                                         48
Linting          JSLint - ... Will hurt your feelings. It takes a JavaScript          source and scans it. If it finds a p...
jslint4java ant task<plugin>	  	  	  	  	  	  	  <groupId>org.apache.maven.plugins</groupId>	  	  	  	  	  	  	  <artifact...
jslint Failure[INFO]	  Executing	  tasks	  	  main:	  	  	  	  [jslint]	  […]srcmainwebappjavascriptalice-­‐string-­‐utils...
JS (aka. JavaScript)   Packaging   Linting   Testing   Doc                                         52
BDD mit Jasmine     describe("Jasmine", function() {             it("makes testing JavaScript awesome!", function() {     ...
Executing Jasmine Specs-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐...
JS (aka. JavaScript)   Packaging   Linting   Testing   Doc                                         56
Documentation        JSDocToolkit - JsDoc Toolkit is an application, written        in JavaScript, for automatically gener...
jsdoctk-plugin	  <plugin>	                                    	         	          	        	         	  	  	  	  	  	  	 ...
JSDoc generated documentation (sample)                59
JS (aka. JavaScript)   Packaging   Linting   Testing   Doc                                         60
FaFazitzit
Fazit        62
This file is licensed under the Creative Commons Attribution-Share Alike 2.0 Generic license. You are free:to share – to c...
Upcoming SlideShare
Loading in …5
×

Building Performance - ein Frontend-Build-Prozess für Java mit Maven

Jan Weinschenker und Oliver Ochs (Holisticon AG)

In diesem Vortrag geht es um eine konkrete Website. Im ersten Teil des Vortrags stellen wir die wichtigsten Optimierungsmaßnahmen vor, die außerhalb eines Builds durchgeführt wurden. Für eine dauerhafte, nachhaltige Performance-Optimierung müssen die Maßnahmen automatisiert bzw. in den Build-Prozess integriert werden. Im zweiten Teil des Vortrags zeigen wir einen beispielhaften Build-Prozess für Java-Webanwendungen, der Teile der Optimierungsmaßnahmen durchführt. Andere Teile müssen durch eine geeignete Architektur sichergestellt werden, wofür wir ebenfalls Ideen liefern.

  • Login to see the comments

  • Be the first to like this

Building Performance - ein Frontend-Build-Prozess für Java mit Maven

  1. 1. Frontend-Build-ProzessHamburg, 26.03.2012Jan Weinschenker, HolisticonOliver Ochs, Holisticon
  2. 2. o2http://dsl.o2online.deonlin
  3. 3. Auftragsstatus 2
  4. 4. ArSystemarchitekturchite
  5. 5. Systemarchitektur Content Repository Webapplikation 4
  6. 6. Umgebungen Content Content Code Code DEV VAL PROD R28 R27 R26 5
  7. 7. OOptimierung außerhalb des Buildsptimi
  8. 8. Parallelisierte Downloads / Cookie-freier Host fürstatischen Content static1.dsl.o2.de static2.dsl.o2.de 7
  9. 9. Nutze Caching & ermögliche Proxy-Caching /komprimiere RessourcenCache-Control: public, max-age=3628800Date: Thu, 22 Mar 2012 12:19:32 GMTExpires: Thu, 03 May 2012 12:19:32 GMTLast-Modified: Tue, 28 Feb 2012 14:24:06 GMTContent-Encoding: Gzip 8
  10. 10. URI-BuilderGleichmäßige Verteilung zwischen statischen HostsURLs beinhalten Versionsnummer / Publikationsdatum als URL-Segment-> neuer Content im Repository bekommt neue URL CSS, PNG, JS, PDF Content Repository Webapplikation 9
  11. 11. TemplatingCSS in den Seitenkopf einbauenCSS vor JavaScript einbindenGlobales JavaScript im Header einbinden (Head.js möglich)Lokale JavaScript inlinen bzw. im Fuß der Seite einbindenLade 3rd Party-Content asynchron nach document.ready-> Reduziere / verschiebe DNS-LookupsHTML-Minification / Inline-JS-Minification Hintergrundbild Cory Doctorow 10
  12. 12. Einmal optimiert – und immer wieder gebrochenJavaScript kombinieren und minifizierenCSS kombinieren und minifizierenImage-SpritingJPEG / PNG optimierenTesting-Code entfernen (e.g. ;;; console.log(this);) Hintergrundbild „Sisyphus“, Franz von Stuck, 1920 11
  13. 13. „Für eine dauerhafte, nachhaltigePerformance-Optimierungmüssen die Maßnahmenautomatisiert bzw. inden Build-Prozess integriertwerden.“ Markus Leptien Telefónica Germany VP Online & VAS Development
  14. 14. BBuild-Prozessuildp
  15. 15. Build-System für Frontend-Projekt Analog zu Java-Build: Ressourcen im SVN eingecheckt Maven erzeugt ein versioniertes, deploybares Artefakt (WAR-Datei) Assets werden in das CMS importiert und durch das CMS ausgeliefert Es werden sowohl die Quell- als auch die Ziel-Assets in das CMS importiert. Optimierungen lassen sich zum Testen ausschalten.Bild:MakerBot Industries
  16. 16. Frontend-Artefakte Continous Integration SVN Enwickler-Rechner Content Repository Webapplikation 15
  17. 17. CCSS (Cascading Style Sheets)asca
  18. 18. CSS (Cascading Style Sheets) Packaging Processing Linting 18
  19. 19. Web Resource Optimizerfor Java Free and Open Source Java project which brings together almost all the modern web tools: JsHint, CssLint, JsMin, Google Closure compressor, YUI Compressor, UglifyJs, Dojo Shrinksafe, Css Variables Support, JSON Compression, Less, Sass, CoffeeScript and much more. -- http:/code.google.com/p/wro4j/ 19
  20. 20. 20
  21. 21. @import@import  url(http:/static1.validation.dsl.o2online.de/provider/css/1200001398/149/global.css);  @import  url(http:/static1.validation.dsl.o2online.de/provider/css/1200001400/143/sim_card.css);  @import  url(http:/static1.validation.dsl.o2online.de/provider/css/1200002234/141/buttons.css);  @import  url(http:/static1.validation.dsl.o2online.de/provider/css/1200002236/156/grid.css);  @import  url(http:/static1.validation.dsl.o2online.de/provider/css/1200002238/142/iconbar.css);  @import  url(http:/static1.validation.dsl.o2online.de/provider/css/1200002332/141/jquery-­‐ui-­‐1.8.16.custom.css);  @import  url(http:/static1.validation.dsl.o2online.de/provider/css/1200002334/141/navigation_cockpit.css);  @import  url(http:/static1.validation.dsl.o2online.de/provider/css/1200002336/141/navigation_main.css);  @import  url(http:/static1.validation.dsl.o2online.de/provider/css/1200002338/141/navigation_meta.css);  @import  url(http:/static1.validation.dsl.o2online.de/provider/css/1200002340/150/navigation_order.css);  @import  url(http:/static1.validation.dsl.o2online.de/provider/css/1200002342/143/navigation_sidebar.css);  @import  url(http:/static1.validation.dsl.o2online.de/provider/css/1200002344/142/vcheck.css);  @import  url(http:/static1.validation.dsl.o2online.de/provider/css/25878246/44/o2-­‐chat.css);  @import  url(http:/static1.validation.dsl.o2online.de/provider/css/1200001182/145/form.css);  @import  url(http:/static1.validation.dsl.o2online.de/provider/css/1200001184/144/footer.css);  @import  url(http:/static1.validation.dsl.o2online.de/provider/css/1200001310/141/pricegraphic.css);  @import  url(http:/static1.validation.dsl.o2online.de/provider/css/1200001334/141/loginbox.css);  @import  url(http:/static1.validation.dsl.o2online.de/provider/css/1200001336/145/tarifvergleich.css);  @import  url(http:/static1.validation.dsl.o2online.de/provider/css/1200001344/159/content.css);  @import  url(http:/static1.validation.dsl.o2online.de/provider/css/1200001346/154/price.css);  @import  url(http:/static1.validation.dsl.o2online.de/provider/css/1200001372/142/header.css);  @import  url(http:/static1.validation.dsl.o2online.de/provider/css/1200001374/144/page.css);  @import  url(http:/static1.validation.dsl.o2online.de/provider/css/1200001376/141/tooltip.css);  @import  url(http:/static1.validation.dsl.o2online.de/provider/css/25927260/40/global_imports2.css);  /*  Kein  CSS  Import  nach  Zeile  30  wegen  IE7  Restriktionen  */  /*  http:/social.msdn.microsoft.com/Forums/en-­‐US/iewebdevelopment/thread/ad1b6e88-­‐bbfa-­‐4cc4-­‐9e95-­‐3889b82a7c1d/  */  
" 21
  22. 22. Packaging 22
  23. 23. wro4j Maven Plug-in<plugin>    <groupId>ro.isdc.wro4j</groupId>    <artifactId>wro4j-­‐maven-­‐plugin</artifactId>    <version>1.4.4</version>    <executions>    <execution>      <phase>compile</phase>      <goals>        <goal>run</goal>        <goal>csslint</goal>      </goals>    </execution>    </executions>    <configuration>    <minimize>true</minimize>    <cssDestinationFolder>${basedir}/src/main/webapp/generated_css/</css/DestinationFolder>    <jsDestinationFolder>${basedir}/src/main/webapp/generated_js/</jsDestinationFolder>    <contextFolder>${basedir}/src/main/webapp/</contextFolder>    <wroFile>${basedir}/src/main/webapp/WEB-­‐INF/wro.xml</wroFile>    <wroManagerFactory>        ro.isdc.wro.extensions.manager.standalone.GoogleStandaloneManagerFactory    </wroManagerFactory>    <!-­‐-­‐  this  can  fix  your  build  -­‐  DO  NOT  USE  THIS-­‐-­‐>    <failNever>true</failNever>    </configuration>  </plugin>   23
  24. 24. wro.xml<groups>    <group  name=global>      <css>/css/sim_card.css</css>      <css>/css/accordion_extra.css</css>      <css>/css/buttons.css</css>      <css>/css/grid.css</css>      <css>/css/iconbar.css</css>      <css>/css/jquery-­‐ui-­‐1.8.16.custom.css</css>      <css>/css/navigation_cockpit.css</css>      <css>/css/navigation_main.css</css>      <css>/css/navigation_meta.css</css>      <css>/css/navigation_order.css</css>      <css>/css/navigation_sidebar.css</css>      […]    </group>    <group  name=hardwareshop>      <css>/css/hardwareshop.css</css>    </group>    <group  name=provider_home>      <css>/css/provider_startseite.css</css>    </group>    <group  name=msie>      <css>/css/ie.css</css>    </group>  </groups>   24
  25. 25. Packaged / Minified 25
  26. 26. CSS (Cascading Style Sheets) Packaging Processing Linting 26
  27. 27. ProcessingCSS Variables Support/*  CSS  Variables  */   /*  Compiled  CSS  */  @variables  {   div.logoContainer  {      MyLogoBGColor:  #fe8d12;      background-­‐color:  #fe8d12;    }   }      div.logoContainer  {        background-­‐color:  var(MyLogoBGColor);    }     Less CSS (aber auch SASS)/*  LESS  */   /*  Compiled  CSS  */    .rounded-­‐corners  (@radius:  5px)  {     #header  {    border-­‐radius:  5px;      border-­‐radius:  @radius;      -­‐webkit-­‐border-­‐radius:  5px;      -­‐webkit-­‐border-­‐radius:  @radius;      -­‐moz-­‐border-­‐radius:  5px;  }      -­‐moz-­‐border-­‐radius:  @radius;      }     #footer  {    border-­‐radius:  10px;        -­‐webkit-­‐border-­‐radius:  10px;    #header  {  .rounded-­‐corners;  }      -­‐moz-­‐border-­‐radius:  10px;  }  #footer  {  .rounded-­‐corners(10px);  }     27
  28. 28. CSS (Cascading Style Sheets) Packaging Processing Linting 28
  29. 29. Code Quality CSSLint- CSS Lint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you dont want. -- http:/css/lint.net 29
  30. 30. CSS-Lint-Meldungen Parsing Errors Expected RBRACE at line All 384, col 3. */ body#provider div.container_tsr_content div.unavailable_icon .unavailableType { top: 76px; right: 12px; */ } 30
  31. 31. CSS (Cascading Style Sheets) Packaging Processing Linting 31
  32. 32. ImImages im CSSages
  33. 33. OptiPNG OptiPNG is a PNG optimizer that recompresses image files to a smaller size, without losing any information. This program also converts external formats (BMP, GIF, PNM and TIFF) to optimized PNG, and performs PNG integrity checks and corrections. -- http:/optipng.sourceforge.net/ -- https:/github.com/hammerhead/maven-optipng-plugin 34
  34. 34. maven-optipng-plugin<plugin>                <groupId>de.kabambo</groupId>                <artifactId>maven-­‐optipng-­‐plugin</artifactId>                <version>1.0-­‐SNAPSHOT</version>                <executions>                  <execution>                <goals>                          <goal>optimize</goal>              </goals>      </execution>                </executions>                <configuration>      <pngDirectories>              <pngDirectory>${basedir}/src/main/webapp/png</pngDirectory>      </pngDirectories>                </configuration>    </plugin>                 35
  35. 35. JpegTran JpegTran transcodes JPEG lossless (e.g. removes meta data and headers) -- http:/jpegclub.org/ 36
  36. 36. JaJS (aka. JavaScript)vaSc
  37. 37. JS (aka. JavaScript) Packaging Linting Testing Doc 40
  38. 38. Packaging & Modularization
  39. 39. wro4j configuration file „wro.xml“<groups>            <group  name=global>    <js>/javascript/lib/jquery-­‐1.7.2.js</js>    <js>/javascript/lib/jquery-­‐ui-­‐1.8.16.custom.js</js>    <js>/javascript/lib/jquery-­‐ui-­‐datepicker-­‐german.js</js>    […]    <js>/javascript/lib/cufon-­‐yui.js</js>    <js>/javascript/lib/cufon_O2.js</js>    <js>/javascript/cufon-­‐calls.js</js>    <js>/javascript/lib/webtoolkit.base64.js</js>    <js>/javascript/lib/jquery.ba-­‐postmessage.js</js>    <js>/javascript/footnotes.js</js>    <js>/javascript/alice_dialog.js</js>    <js>/javascript/alice-­‐validation-­‐rules.js</js>    <js>/javascript/alice-­‐tracking.js</js>    <js>/javascript/alice-­‐targeting.js</js>    […]    <js>/javascript/o2-­‐socialmedia.js</js>          </group>          <group  name=hardwareshop>    <js>/javascript/lib/hardwarecarousel.jquery.js</js>    <js>/javascript/hardwareshop.js</js>          </group>  </groups>   45
  40. 40. Minification Engines in wro4j •  Douglas Crockford‘s JsMin •  Google Closure compressor •  Yahoo UI Compressor •  Marijn Haverbeke‘s UglifyJs •  Dojo Shrinksafe 46
  41. 41. Minification(function(bd,L){var  av=bd.document,bu=bd.navigator,bm=bd.location;var  b=(function(){var  bF=function(b0,b1){return  new  bF.fn.init(b0,b1,bD);},bU=bd.jQuery,bH=bd.$,bD,bY=/^(?:[^#<]*(<[wW]+>)[^>]*$|#([w-­‐]*)$)/,bM=/S/,bI=/^s+/,bE=/s+$/,bA=/^<(w+)s*/?>(?:</1>)?$/,bN=/^[],:{}s]*$/,bW=/(?:["/bfnrt]|u[0-­‐9a-­‐fA-­‐F]{4})/g,bP=/"[^"nr]*"|true|false|null|-­‐?d+(?:.d*)?(?:[eE][+-­‐]?d+)?/g,bJ=/(?:^|:|,)(?:s*[)+/g,by=/(webkit)[  /]([w.]+)/,bR=/(opera)(?:.*version)?[  /]([w.]+)/,bQ=/(msie)  ([w.]+)/,bS=/(mozilla)(?:.*?  v:([w.]+))?/,bB=/-­‐([a-­‐z]|[0-­‐9])/ig,bZ=/^-­‐ms-­‐/,bT=function(b0,b1){return(b1+"").toUpperCase();},bX=bu.userAgent,bV,bC,e,bL=Object.prototype.toString,bG=Object.prototype.hasOwnProperty,bz=Array.prototype.push,bK=Array.prototype.slice,bO=String.prototype.trim,bv=Array.prototype.indexOf,bx={};bF.fn=bF.prototype={constructor:bF,init:function(b0,b4,b3){var  b2,b5,b1,b6;if(!b0){return  this;}if(b0.nodeType){this.context=this[0]=b0;this.length=1;return  this;}if(b0==="body"&&!b4&&av.body){this.context=av;this[0]=av.body;this.selector=b0;this.length=1;return  this;}if(typeof  b0==="string"){if(b0.charAt(0)==="<"&&b0.charAt(b0.length-­‐1)===">"&&b0.length>=3){b2=[null,b0,null];}else{b2=bY.exec(b0);}if(b2&&(b2[1]||!b4)){if(b2[1]){b4=b4  instanceof  bF?b4[0]:b4;b6=(b4?b4.ownerDocument||b4:av);  b1=bA.exec(b0);if(b1){if(bF.isPlainObject(b4)){b0=[av.createElement(b1[1])];bF.fn.attr.call(b0,b4,true);}  else{b0=[b6.createElement(b1[1])];}}else{b1=bF.buildFragment([b2[1]],[b6]);b0=(b1.cacheable?bF.clone(b1.fragment):b1.fragment).childNodes;}return  bF.merge(this,b0);}else{b5=av.getElementById(b2[2]);if(b5&&b5.parentNode){if(b5.id!==b2[2]){return  b3.find(b0);}this.length=1;this[0]=b5;}this.context=av;this.selector=b0;return  this;}}else{if(!b4||b4.jquery){return(b4||b3).find(b0);}else{return  this.constructor(b4).find(b0);}}}else{if(bF.isFunction(b0)){return  b3.ready(b0);}}if(b0.selector!==L){this.selector=b0.selector;this.context=b0.context;}return  bF.makeArray(b0,this);},selector:"",jquery:"1.7.2",length:0,size:function(){return  this.length;},toArray:function(){return  bK.call(this,0);},get:function(b0){return  b0==null?this.toArray():(b0<0?this[this.length+b0]:this[b0]);},pushStack:function(b1,b3,b0){var  b2=this.constructor();if(bF.isArray(b1)){bz.apply(b2,b1);}else{bF.merge(b2,b1);}b2.prevObject=this;b2.context=this.context;if(b3==="find"){b2.selector=this.selector+(this.selector?"  ":"")+b0;}else{if(b3){b2.selector=this.selector+"."+b3+"("+b0+")";}}return  b2;},each:function(b1,b0){return  bF.each(this,b1,b0);},ready:function(b0){bF.bindReady();bC.add(b0);return  this;},eq:function(b0){b0=+b0;return  b0===-­‐1?this.slice(b0):this.slice(b0,b0+1);},first:function(){return  this.eq(0);},last:function(){return  this.eq(-­‐1);},slice:function(){return  this.pushStack(bK.apply(this,arguments),"slice",bK.call(arguments).join(","));},map:function(b0){return  this.pushStack(bF.map(this,function(b2,b1){return  b0.call(b2,b1,b2);}));},end:function(){return  this.prevObject||this.constructor(null);},push:bz,sort:[].sort,splice:[].splice};  bF.fn.init.prototype=bF.fn;bF.extend=bF.fn.extend=function(){var  b9,b2,b0,b1,b6,b7,b5=arguments[0]||{},b4=1,b3=arguments.length,b8=false;if(typeof  b5==="boolean"){b8=b5;b5=arguments[1]||{};b4=2;}if(typeof  b5!=="object"&&!bF.isFunction(b5)){b5={};}if(b3===b4){b5=this;-­‐-­‐b4;}for(;b4<b3;b4++){if((b9=arguments[b4])!=null){for(b2  in  b9){b0=b5[b2];b1=b9[b2];if(b5===b1){continue;}if(b8&&b1&&(bF.isPlainObject(b1)||(b6=bF.isArray(b1)))){if(b6){b6=false;b7=b0&&bF.isArray(b0)?b0:[];}else{b7=b0&&bF.isPlainObject(b0)?b0:{};}b5[b2]=bF.extend(b8,b7,b1);}else{if(b1!==L){b5[b2]=b1;}}}}}return  b5;};bF.extend({noConflict:function(b0){if(bd.$===bF){bd.$=bH;}if(b0&&bd.jQuery===bF){bd.jQuery=bU;}return  bF;},isReady:false,readyWait:1,holdReady:function(b0){if(b0){bF.readyWait++;}else{bF.ready(true);}},ready:function(b0){if((b0===true&&!-­‐-­‐bF.readyWait)||(b0!==true&&!bF.isReady)){if(!av.body){return  setTimeout(bF.ready,1);}bF.isReady=true;if(b0!==true&&-­‐-­‐bF.readyWait>0){return;}bC.fireWith(av,[bF]);if(bF.fn.trigger){bF(av).trigger("ready").off("ready");}}},bindReady:function(){if(bC){return;}bC=bF.Callbacks("once  memory");if(av.readyState==="complete"){return  setTimeout(bF.ready,1);}if(av.addEventListener){av.addEventListener("DOMContentLoaded",e,false);bd.addEventListener("load",bF.ready,false);}else{if(av.attachEvent){av.attachEvent("onreadystatechange",e);bd.attachEvent("onload",bF.ready);var  b0=false;try{b0=bd.frameElement==null;}catch(b1){}if(av.documentElement.doScroll&&b0){bw();}}}},isFunction:function(b0){return  bF.type(b0)==="function";},isArray:Array.isArray||function(b0){return  bF.type(b0)==="array";},isWindow:function(b0){return  b0!=null&&b0==b0.window;},isNumeric:function(b0){return  !isNaN(parseFloat(b0))&&isFinite(b0);},type:function(b0){return  b0==null?String(b0):bx[bL.call(b0)]||"object";},isPlainObject:function(b2){if(!b2||bF.type(b2)!=="object"||b2.nodeType||bF.isWindow(b2)){return  false;}try{if(b2.constructor&&!bG.call(b2,"constructor")&&!bG.call(b2.constructor.prototype,"isPrototypeOf")){return  false;}}catch(b1){return  false;}   47
  42. 42. JS (aka. JavaScript) Packaging Linting Testing Doc 48
  43. 43. Linting JSLint - ... Will hurt your feelings. It takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. -- http:/www.jslint.com/lint.html -- http:/code.google.com/p/jslint4java/ 49
  44. 44. jslint4java ant task<plugin>              <groupId>org.apache.maven.plugins</groupId>              <artifactId>maven-­‐antrun-­‐plugin</artifactId>              <executions>                      <execution>                              <phase>compile</phase>                              <goals><goal>run</goal></goals>                              <configuration>                                      <target>                                              <taskdef  name="jslint"  classname="com.googlecode.jslint4java.ant.JSLintTask"              classpath="${settings.localRepository}/com/googlecode/jslint4java/jslint4java-­‐ant/                1.4.2/jslint4java-­‐ant-­‐1.4.2.jar"  />                                              <jslint  options="browser,devel,undef,eqeqeq,bitwise,regexp,newcap,immed,nomen">                                                      <predef>Ext,Utils</predef>                                                      <formatter  type="plain"  />                                                      <fileset  dir="${basedir}/src/main/webapp/javascript"  includes="*.js"  />                                              </jslint>                                      </target>                              </configuration>                      </execution>              </executions>              <dependencies>                      <dependency>                              <groupId>com.googlecode.jslint4java</groupId>                              <artifactId>jslint4java-­‐ant</artifactId>                              <version>1.4.2</version><!-­‐-­‐  2.0.2  lost  eqeqe  -­‐-­‐>                      </dependency>              </dependencies>  </plugin>   50
  45. 45. jslint Failure[INFO]  Executing  tasks    main:        [jslint]  […]srcmainwebappjavascriptalice-­‐string-­‐utils.js:30:9:  Expected  ===  and  instead  saw  ==.        [jslint]      if  (i  ==  false)  {        [jslint]                  ^  [INFO]  -­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐  [INFO]  BUILD  FAILURE  [INFO]  -­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐                                 51
  46. 46. JS (aka. JavaScript) Packaging Linting Testing Doc 52
  47. 47. BDD mit Jasmine describe("Jasmine", function() { it("makes testing JavaScript awesome!", function() { expect(yourCode).toBeLotsBetter(); }); }); -- http:/pivotal.github.com/jasmine/ 53
  48. 48. Executing Jasmine Specs-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐    J  A  S  M  I  N  E      S  P  E  C  S  -­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐  [INFO]    Jasmine        makes  testing  JavaScript  awesome    StringUtils.trim      should  trim  a  string    StringUtils.beginsWith  and  StringUtils.endsWith      should  match  a  specified  string  on  the  beginning  of  a  string      should  match  a  specified  string  on  the  ending  of  a  string    Mapping  CID  incl  PostViewSales      should  map  Alice  S  +  Option  Home&Go  Surf-­‐flat  L  1  Monat  (dslSIE  ohne  MVLZ  with  option  mobileDataL)  to  246201      should  map  Alice  M  +  Option  Home&Go  Surf-­‐flat  L  1  Monat  (dslMIE  ohne  MVLZ  with  option  mobileDataL)  to  246209      should  map  Alice  L  +  Option  Home&Go  Surf-­‐flat  L  1  Monat  (dslLIE  ohne  MVLZ  with  option  mobileDataL)  to  246217      should  map  Alice  S  +  Option  Home&Go  Surf-­‐flat  L  24  Monate  (dslSIE  with  MVLZ  with  option  mobileDataL)  to  246203      should  map  Alice  M  +  Option  Home&Go  Surf-­‐flat  L  24  Monate  (dslMIE  with  MVLZ  with  option  mobileDataL)  to  246211      should  map  Alice  L  +  Option  Home&Go  Surf-­‐flat  L  24  Monate  (dslLIE  with  MVLZ  with  option  mobileDataL)  to  246219      […]    Results:  138  specs,  0  failures           55
  49. 49. JS (aka. JavaScript) Packaging Linting Testing Doc 56
  50. 50. Documentation JSDocToolkit - JsDoc Toolkit is an application, written in JavaScript, for automatically generating template- formatted, multi-page HTML (or XML, JSON, or any other text-based) documentation from commented JavaScript source code. -- http:/code.google.com/p/jsdoc-toolkit/ -- http:/code.google.com/p/jsdoctk-plugin/ 57
  51. 51. jsdoctk-plugin  <plugin>                                      <groupId>nl.windgazer</groupId>                                            <artifactId>jsdoctk-­‐plugin</artifactId>                                      <version>2.3.2</version>                                      <configuration>                                                              <srcDir>${basedir}/src/main/webapp/javascript</srcDir>                                                              <recurse>5</recurse>            </configuration>    </plugin>   58
  52. 52. JSDoc generated documentation (sample) 59
  53. 53. JS (aka. JavaScript) Packaging Linting Testing Doc 60
  54. 54. FaFazitzit
  55. 55. Fazit 62
  56. 56. This file is licensed under the Creative Commons Attribution-Share Alike 2.0 Generic license. You are free:to share – to copy, distribute and transmit the work to remix – to adapt the work Under the following conditions:attribution – You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work).share alike – If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to this one.Alle Markennamen, Firmennamen oder Logos sind Warenzeichen der jeweiligen Unternehmen bzw. Rechte-Inhaber.Die Bilder der Server stammen von Sun Microsystems bzw. ORACLE CORPORATION. Das Bild vom MakerBot stammt von MakerBot Industries. Das Bild des Entwickler-Rechners stammt von HP.

×