Fabian Jakobs | 1&1

JavaScript Tooling

Minimize, Lint & Co

Fabian Jakobs | 1&1

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 – 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