DLW Europe - JavaScript Tooling
Upcoming SlideShare
Loading in...5
×
 

DLW Europe - JavaScript Tooling

on

  • 5,701 views

Presentation held at the webinale 08 in Karlsruhe.

Presentation held at the webinale 08 in Karlsruhe.

This talk gives an overview over JavaScript tools.

Statistics

Views

Total Views
5,701
Views on SlideShare
5,492
Embed Views
209

Actions

Likes
0
Downloads
69
Comments
1

7 Embeds 209

http://news.qooxdoo.org 186
http://swik.net 8
http://localhost 6
http://www.slideshare.net 3
http://devel.slideee.com 3
http://translate.googleusercontent.com 2
http://www.docshut.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

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

DLW Europe - JavaScript Tooling DLW Europe - JavaScript Tooling Presentation Transcript

  • Fabian Jakobs | 1&1 JavaScript Tooling Minimize, Lint & Co
  • About me • Fabian Jakobs <fabian.jakobs@1und1.de> • JavaScript Framework developer at 1&1 – Framework architect of the Javascript GUI Framework qooxdoo Fabian Jakobs | 1&1
  • Overview • Professional tooling for JavaScript • Focus on larger JavaScript based applications • Will demonstrate the presented techniques on a simple example application Fabian Jakobs | 1&1
  • Example Program • Performs „Filter-as-you- type“ • Separation of – Content (HTML) – Style (CSS) – Behavior (JavaScript) • Uses qooxdoo DOM API • No qooxdoo GUI application Demo Fabian Jakobs | 1&1
  • Demo – Content Fabian Jakobs | 1&1
  • Demo – Style body { h1 { background-color: #1D1D20; color: #FFFFFF padding: 40px 20px; } color: #BBBBBB; font: 11px quot;Lucida Grandequot;, quot;sans-serifquot;; #result { text-align: center; margin: 20px; } background-color: #1D1D20; padding: 20px; #searchContainer { color: #BBBBBB; position: absolute; -moz-border-radius: 8px; background-color: #7389AE; -webkit-border-radius: 8px; width: 500px; } margin: 20px 0px 0px -265px; padding: 15px; .match { left: 50%; font-weight: bold; color: white; color: #FACE8F; -moz-border-radius: 7px; } -webkit-border-radius: 7px; } Fabian Jakobs | 1&1
  • Demo – Behavior Fabian Jakobs | 1&1
  • Overview - Tools • Linker • API documentation • Lint • Optimizer/Packer Fabian Jakobs | 1&1
  • What is under the hood? ShrinkSafe JSLint qooxdoo tools YUI Compressor (JavaScript (Python JS parser) (Rhino) JS parser) Syntax Tree JSMin Parser JSDoc Tokens Scanner (RegExp) JavaScript Fabian Jakobs | 1&1
  • Linker • Detect dependencies between JavaScript fles • Sorted list of fles to include • Generate an optimized version of the application Fabian Jakobs | 1&1
  • Linker – Motivation • The dependency Graph of the demo Fabian Jakobs | 1&1
  • Linker – Motivation • Been there – done that Fabian Jakobs | 1&1
  • Linker – Common Scenario • Scenario – Use of a pre build version of the framework used – Manage include list of own JavaScript fles manually • Problems – You always include the full framework even if only parts of it are used – managing dependencies manually doesn't scale – Needs separate solution for deployment (combination of fles) Fabian Jakobs | 1&1
  • Linker - Solution • Solution – (semi-) automatic detection of dependencies • needs knowledge about the Framework – Generation of loader scripts – Generation of „compiled“ application fles • Implementations – dojo build system • evaluates „dojo.require()“ – qooxdoo • „knows“ qooxdoo class defnitions Fabian Jakobs | 1&1
  • Linker – Demo Fabian Jakobs | 1&1
  • Lint • Static code analysis – fnd common coding mistakes – enforce coding guidelines • Especially useful in dynamic languages, where errors – often occur only at runtime – only under certain conditions – have strange side effects and are hard to fnd Fabian Jakobs | 1&1
  • Lint – Can you fnd all errors? • This code is full of – errors – bad JavaScript style • Demonstrate two lint tools – JSLint by Douglas Crockford – ecmalint (part of qooxdoo) • Other tools – JavaScript Lint – YUI packer (-v parameter) Fabian Jakobs | 1&1
  • Lint – Ecmalint • Finds – errors related to variable scope • undefned variables • unused variables – redefnition of map keys – deprecated methods (eval, alert, ...) • Part of qooxdoo • Works with any JavaScript Fabian Jakobs | 1&1
  • Lint – Ecmalint Use of undefined or global identifier 'xO' Unused identifier 'j' Use of undefined or global identifier 'i' Map key 'add' redefined Use of deprecated global identifier 'alert' Fabian Jakobs | 1&1
  • Lint – JSLint • Checks for bad coding style • by Douglas Crockford – “Will hurt your feelings” • Reports – Missing semicolons – Unreachable code – Missing blocks – Many more Fabian Jakobs | 1&1
  • Lint – JSLint Missing semicolon. Expected '{' and instead saw 'sum'. Use '===' to compare with '0'. Expected '{' and instead saw 'throw'. Missing semicolon. Unreachable 'return' after 'return'. Fabian Jakobs | 1&1
  • Lint – Summary • Lint tools can help fnding bugs early • Should be run regularly • Should be integrated into the build system BUT: Cannot replace testing! Fabian Jakobs | 1&1
  • API Documentation Fabian Jakobs | 1&1
  • API Documentation • Generate API documentation • Most JavaScript Frameworks have API documentation for their classes • Must understand the framework Fabian Jakobs | 1&1
  • API Documentation – JSDoc • Non framework tool • Uses JavaDoc like documentation comments • Only basic JavaScript OO features • Does not understand – OO notation of most frameworks – OO notation of qooxdoo • Generates boring static HTML :-) Fabian Jakobs | 1&1
  • API Documentation – Demo Fabian Jakobs | 1&1
  • Deploy • Optimize application for deployment – Compress fles • Gzip • JavaScript compression – Combine fles • Improves startup time • JavaScript, CSS, images – Optimize/Obfuscate JavaScript Fabian Jakobs | 1&1
  • Deploy – JavaScript Packer Remove Remove Rename safe Client comments white space local performance variables impact Dean yes yes yes yes negative Edward's (uses eval) Packer YUI yes yes yes yes neutral Compressor Dojo yes yes yes yes neutral ShrinkSafe Doulas yes yes no no neutral Crockford's JSMin qooxdoo yes yes yes yes positive generator.py (string optimizer) Fabian Jakobs | 1&1
  • Deploy – JavaScript Packer Fabian Jakobs | 1&1
  • Deploy – JavaScript Packer • Remove local variables Fabian Jakobs | 1&1
  • Deploy – JavaScript Packer • Optimize strings Fabian Jakobs | 1&1
  • Deploy – JavaScript Packer • Remove white space Fabian Jakobs | 1&1
  • Packer – Demo Fabian Jakobs | 1&1
  • Deploy - Further optimizations • Rename private members – Needs framework knowledge • Remove debugging code • Generate browser specifc builds • Inline HTML Templates – Dojo inlines dijit template • Combine images and CSS Fabian Jakobs | 1&1
  • Questions? Fabian Jakobs | 1&1
  • Links – Linker, integrated build systems • dojo build system http://dojotoolkit.org/book/dojo-book-0-9/part-4-meta-dojo/package-system-and-custom-builds • qooxdoo generator2 http://qooxdoo.org/documentation/general/generator2 Fabian Jakobs | 1&1
  • Links • API Documentation – JSDoc http://jsdoc.sourceforge.net/ – dojo API viewer http://api.dojotoolkit.org/ – ExtJS API viewer http://extjs.com/deploy/dev/docs/ – qooxdoo API viewer http://api.qooxdoo.org/ • Lint – JSLint http://www.jslint.com/ – JavaScript Lint http://www.javascriptlint.com/ Fabian Jakobs | 1&1
  • Links - Packer • Dean Edward's Packer http://dean.edwards.name/packer/ • YUI Compressor http://developer.yahoo.com/yui/compressor/ • dojo ShrinkSafe http://dojotoolkit.org/docs/shrinksafe • JSMin http://www.crockford.com/javascript/jsmin.html Fabian Jakobs | 1&1