Fabian Jakobs | 1&1 JavaScript Tooling Minimize, Lint & Co
Jan 27, 2015
Fabian Jakobs | 1&1
JavaScript Tooling
Minimize, Lint & Co
Fabian Jakobs | 1&1
About me
• Fabian Jakobs <[email protected]>
• 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 – 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;}
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?
JavaScript
Scanner(RegExp)
Parser
Tokens
JSMinJSDoc
ShrinkSafeYUI Compressor
(Rhino)
qooxdoo tools(Python JS parser)
JSLint(JavaScriptJS parser)
Syntax Tree
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 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'
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.
Use '===' to compare with '0'.
Expected '{' and instead saw 'sum'.
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 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)
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