dlw europe - javascript tooling
DESCRIPTION
Presentation held at the webinale 08 in Karlsruhe. This talk gives an overview over JavaScript tools.TRANSCRIPT
![Page 1: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/1.jpg)
Fabian Jakobs | 1&1
JavaScript Tooling
Minimize, Lint & Co
![Page 2: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/2.jpg)
Fabian Jakobs | 1&1
About me
• Fabian Jakobs <[email protected]>
• JavaScript Framework developer at 1&1– Framework architect of the
Javascript GUI Framework qooxdoo
![Page 3: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/3.jpg)
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
![Page 4: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/4.jpg)
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
![Page 5: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/5.jpg)
Fabian Jakobs | 1&1
Demo – Content
![Page 6: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/6.jpg)
Fabian Jakobs | 1&1
Demo – Stylebody { background-color: #1D1D20; padding: 40px 20px; color: #BBBBBB; font: 11px "Lucida Grande", "sans-serif"; text-align: center;}
#searchContainer { position: absolute; background-color: #7389AE; width: 500px; margin: 20px 0px 0px -265px; padding: 15px; left: 50%; color: white; -moz-border-radius: 7px; -webkit-border-radius: 7px;}
h1 { color: #FFFFFF}
#result { margin: 20px; background-color: #1D1D20; padding: 20px; color: #BBBBBB; -moz-border-radius: 8px; -webkit-border-radius: 8px;}
.match { font-weight: bold; color: #FACE8F;}
![Page 7: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/7.jpg)
Fabian Jakobs | 1&1
Demo – Behavior
![Page 8: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/8.jpg)
Fabian Jakobs | 1&1
Overview - Tools
• Linker• API documentation• Lint• Optimizer/Packer
![Page 9: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/9.jpg)
Fabian Jakobs | 1&1
What is under the hood?
JavaScript
Scanner(RegExp)
Parser
Tokens
JSMinJSDoc
ShrinkSafeYUI Compressor
(Rhino)
qooxdoo tools(Python JS parser)
JSLint(JavaScriptJS parser)
Syntax Tree
![Page 10: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/10.jpg)
Fabian Jakobs | 1&1
Linker
• Detect dependencies between JavaScript fles• Sorted list of fles to include• Generate an optimized version of the
application
![Page 11: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/11.jpg)
Fabian Jakobs | 1&1
Linker – Motivation
• The dependency Graph of the demo
![Page 12: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/12.jpg)
Fabian Jakobs | 1&1
Linker – Motivation
• Been there – done that
![Page 13: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/13.jpg)
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)
![Page 14: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/14.jpg)
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
![Page 15: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/15.jpg)
Fabian Jakobs | 1&1
Linker – Demo
![Page 16: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/16.jpg)
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
![Page 17: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/17.jpg)
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)
![Page 18: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/18.jpg)
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
![Page 19: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/19.jpg)
Fabian Jakobs | 1&1
Lint – Ecmalint
Use of deprecated global identifier 'alert'
Use of undefined or global identifier 'i'
Unused identifier 'j'
Map key 'add' redefined
Use of undefined or global identifier 'xO'
![Page 20: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/20.jpg)
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
![Page 21: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/21.jpg)
Fabian Jakobs | 1&1
Lint – JSLint
Missing semicolon.
Use '===' to compare with '0'.
Expected '{' and instead saw 'sum'.
Expected '{' and instead saw 'throw'.
Missing semicolon.
Unreachable 'return' after 'return'.
![Page 22: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/22.jpg)
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!
![Page 23: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/23.jpg)
Fabian Jakobs | 1&1
API Documentation
![Page 24: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/24.jpg)
Fabian Jakobs | 1&1
API Documentation
• Generate API documentation• Most JavaScript Frameworks have API
documentation for their classes• Must understand the framework
![Page 25: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/25.jpg)
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 :-)
![Page 26: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/26.jpg)
Fabian Jakobs | 1&1
API Documentation – Demo
![Page 27: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/27.jpg)
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
![Page 28: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/28.jpg)
Fabian Jakobs | 1&1
Deploy – JavaScript PackerRemove comments
Remove white space
Rename local variables
safe Client performanceimpact
Dean Edward's Packer
yes yes yes yes negative (uses eval)
YUI Compressor
yes yes yes yes neutral
Dojo ShrinkSafe
yes yes yes yes neutral
Doulas Crockford's JSMin
yes yes no no neutral
qooxdoo generator.py
yes yes yes yes positive (string optimizer)
![Page 29: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/29.jpg)
Fabian Jakobs | 1&1
Deploy – JavaScript Packer
![Page 30: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/30.jpg)
Fabian Jakobs | 1&1
Deploy – JavaScript Packer• Remove local variables
![Page 31: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/31.jpg)
Fabian Jakobs | 1&1
Deploy – JavaScript Packer• Optimize strings
![Page 32: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/32.jpg)
Fabian Jakobs | 1&1
Deploy – JavaScript Packer• Remove white space
![Page 33: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/33.jpg)
Fabian Jakobs | 1&1
Packer – Demo
![Page 34: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/34.jpg)
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
![Page 35: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/35.jpg)
Fabian Jakobs | 1&1
Questions?
![Page 36: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/36.jpg)
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
![Page 37: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/37.jpg)
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/
![Page 38: DLW Europe - JavaScript Tooling](https://reader034.vdocuments.site/reader034/viewer/2022052206/54c75cb44a79598e0a8b457f/html5/thumbnails/38.jpg)
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