Fabian Jakobs presents on JavaScript tooling for larger applications. He demonstrates linkers to detect dependencies and optimize builds, linters like JSLint and ecmalint to find errors, API documentation tools, and packers/minifiers like YUI Compressor to optimize files for deployment. He shows examples of these tools on a sample filter application to illustrate professional JavaScript tooling.

1. Fabian Jakobs | 1&1
JavaScript Tooling
Minimize, Lint & Co

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

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

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

5. Demo – Content
Fabian Jakobs | 1&1

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

7. Demo – Behavior
Fabian Jakobs | 1&1

8. Overview - Tools
• Linker
• API documentation
• Lint
• Optimizer/Packer
Fabian Jakobs | 1&1

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

10. Linker
• Detect dependencies between JavaScript fles
• Sorted list of fles to include
• Generate an optimized version of the
application
Fabian Jakobs | 1&1

11. Linker – Motivation
• The dependency Graph of the demo
Fabian Jakobs | 1&1

12. Linker – Motivation
• Been there – done that
Fabian Jakobs | 1&1

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

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

15. Linker – Demo
Fabian Jakobs | 1&1

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

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

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

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

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

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

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

23. API Documentation
Fabian Jakobs | 1&1

24. API Documentation
• Generate API documentation
• Most JavaScript Frameworks have API
documentation for their classes
• Must understand the framework
Fabian Jakobs | 1&1

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

26. API Documentation – Demo
Fabian Jakobs | 1&1

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

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

29. Deploy – JavaScript Packer
Fabian Jakobs | 1&1

30. Deploy – JavaScript Packer
• Remove local variables
Fabian Jakobs | 1&1

31. Deploy – JavaScript Packer
• Optimize strings
Fabian Jakobs | 1&1

32. Deploy – JavaScript Packer
• Remove white space
Fabian Jakobs | 1&1

33. Packer – Demo
Fabian Jakobs | 1&1

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

35. Questions?
Fabian Jakobs | 1&1

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

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

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