DLW Europe - JavaScript Tooling

50 %
50 %
Information about DLW Europe - JavaScript Tooling

Published on May 29, 2008

Author: fjakobs

Source: slideshare.net

Description

Presentation held at the webinale 08 in Karlsruhe.

This talk gives an overview over JavaScript tools.

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

#ffffff presentations

Add a comment

Related presentations

Related pages

DLW - Documents

DLW Europe - JavaScript Tooling Presentation held at the webinale 08 in Karlsruhe. This talk gives an overview over JavaScript tools. dlw report.. ...
Read more

DLW Europe - JavaScript Tooling - Technology

Presentation held at the webinale 08 in Karlsruhe. This talk gives an overview over JavaScript tools.
Read more

DLW WORKSHOP , VARANSI - Engineering - Docslide.us

Download DLW WORKSHOP , VARANSI. ... signed with electromotive division of general motor of USA for manufacture in DLW . ... DLW Europe - JavaScript Tooling
Read more

Cache Tooling - Technology - documents.mx

Tooling Matters - Development tools DLW Europe - JavaScript Tooling Comments. RECOMMENDED. Precision tooling. Carbide Tooling. Tooling Catalog. Tooling ...
Read more

Python Javascript Packer - Javascript Obfuscator

Linux Javascript Obfuscator Javascript Encodexml Installing Yui Compressor Ubuntu ... DLW Europe - JavaScript Tooling JavaScript (Python JS parser) ...
Read more

Jsmin Rename Variables - Javascript Obfuscator

Jsmin Rename Variables. Stop theft of your JavaScripts! Scramble, obfuscate, and protect javascript code! Try Javascript obfuscator!. sprockets ant apache
Read more

Rental FAQs - Rental Information - Ashtead Technology

Rental FAQS for Ashtead Technology. Covers: ... Deliveries to Europe can take longer ... Please see our separate section on the DLW option for details.
Read more

It & Tooling | LinkedIn

View 10254 It & Tooling posts, presentations, experts, and more. Get the professional knowledge you need on LinkedIn.
Read more