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

• Professional tooling for JavaScript
• Focus on larger JavaScript based applications
• Will demonstrate the pre...
Example Program

• Performs „Filter-as-you-
  type“
• Separation of
     – Content (HTML)
     – Style (CSS)
     – Behavi...
Demo – Content




Fabian Jakobs | 1&1
Demo – Style
body {                                      h1 {
  background-color: #1D1D20;                  color: #FFFFFF...
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 ...
Linker

• Detect dependencies between JavaScript fles
• Sorted list of fles to include
• Generate an optimized version of ...
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 ...
Linker - Solution

• Solution
     – (semi-) automatic detection of dependencies
           • needs knowledge about the Fr...
Linker – Demo




Fabian Jakobs | 1&1
Lint

• Static code analysis
     – fnd common coding mistakes
     – enforce coding guidelines
• Especially useful in dyn...
Lint – Can you fnd all errors?
• This code is full of
     – errors
     – bad JavaScript style
• Demonstrate two lint too...
Lint – Ecmalint
• Finds
     – errors related to variable scope
         • undefned variables
         • unused variables
...
Lint – Ecmalint

    Use of undefined or global identifier 'xO'



                Unused identifier 'j'


     Use of und...
Lint – JSLint

• Checks for bad coding style
• by Douglas Crockford
     – “Will hurt your feelings”
• Reports
     – Miss...
Lint – JSLint
                Missing semicolon.



       Expected '{' and instead saw 'sum'.


          Use '===' to co...
Lint – Summary

• Lint tools can help fnding bugs early
• Should be run regularly
• Should be integrated into the build sy...
API Documentation




Fabian Jakobs | 1&1
API Documentation

• Generate API documentation
• Most JavaScript Frameworks have API
  documentation for their classes
• ...
API Documentation – JSDoc

•   Non framework tool
•   Uses JavaDoc like documentation comments
•   Only basic JavaScript O...
API Documentation – Demo




Fabian Jakobs | 1&1
Deploy

• Optimize application for deployment
     – Compress fles
           • Gzip
           • JavaScript compression
 ...
Deploy – JavaScript Packer
                Remove     Remove      Rename      safe   Client
                comments   whi...
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
• Genera...
Questions?




Fabian Jakobs | 1&1
Links – Linker, integrated build systems

• dojo build system
    http://dojotoolkit.org/book/dojo-book-0-9/part-4-meta-do...
Links

• API Documentation
   – JSDoc http://jsdoc.sourceforge.net/
   – dojo API viewer http://api.dojotoolkit.org/
   – ...
Links - Packer

• Dean Edward's Packer
  http://dean.edwards.name/packer/
• YUI Compressor
  http://developer.yahoo.com/yu...
Upcoming SlideShare
Loading in …5
×

DLW Europe - JavaScript Tooling

4,033 views

Published on

Presentation held at the webinale 08 in Karlsruhe.

This talk gives an overview over JavaScript tools.

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
4,033
On SlideShare
0
From Embeds
0
Number of Embeds
183
Actions
Shares
0
Downloads
72
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

DLW Europe - JavaScript Tooling

  1. 1. Fabian Jakobs | 1&1 JavaScript Tooling Minimize, Lint & Co
  2. 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. 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. 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. 5. Demo – Content Fabian Jakobs | 1&1
  6. 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. 7. Demo – Behavior Fabian Jakobs | 1&1
  8. 8. Overview - Tools • Linker • API documentation • Lint • Optimizer/Packer Fabian Jakobs | 1&1
  9. 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. 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. 11. Linker – Motivation • The dependency Graph of the demo Fabian Jakobs | 1&1
  12. 12. Linker – Motivation • Been there – done that Fabian Jakobs | 1&1
  13. 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. 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. 15. Linker – Demo Fabian Jakobs | 1&1
  16. 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. 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. 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. 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. 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. 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. 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. 23. API Documentation Fabian Jakobs | 1&1
  24. 24. API Documentation • Generate API documentation • Most JavaScript Frameworks have API documentation for their classes • Must understand the framework Fabian Jakobs | 1&1
  25. 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. 26. API Documentation – Demo Fabian Jakobs | 1&1
  27. 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. 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. 29. Deploy – JavaScript Packer Fabian Jakobs | 1&1
  30. 30. Deploy – JavaScript Packer • Remove local variables Fabian Jakobs | 1&1
  31. 31. Deploy – JavaScript Packer • Optimize strings Fabian Jakobs | 1&1
  32. 32. Deploy – JavaScript Packer • Remove white space Fabian Jakobs | 1&1
  33. 33. Packer – Demo Fabian Jakobs | 1&1
  34. 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. 35. Questions? Fabian Jakobs | 1&1
  36. 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. 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. 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

×