April JavaScript Tools

JavaScript Tools

Wolfram KriesingCTO, uxebu

@wolframkriesing

Mittwoch, 18. April 12

http://140byt.es

Warming up: shorten please!


http://140byt.es

http://140byt.es

Try it out? Any tool?

The Console!

Browser

node.jsMittwoch, 18. April 12

uxebu

100%

BikeshedFlash

Technology

Product

Company- since 2008- 10 People (in DE, NL, US, UK)


Agenda

• TDD, CI, Build

• IDE and features

• Inspector (Firebug, Webkit Inspector)

• Tools of the future (bikeshed editor)


TDD, CI, Build


Jasmine

• JavaScript quasi standard

• For nodejs+browser (server+client)

• Built-in Spies

http://pivotal.github.com/jasmine/




Jasmine - Matchers


Jasmine - Matchers, watch out!


Matchers - toContain, not


Custom Matchers - toBeInstanceOf


Custom Matchers - toBeInstanceOf


Custom Matchers


Custom Matchers


Spies

• Decoupled Testing

• Fast Tests (Removes waits, Removes timings)

• Better Architecture

• Async Testing


Spies


Spies


TDD is just the start...


Our Process

Repo

Dev CI

Flowdock

All Devs


CI - Continuous Integration

• All projects

• Automated Test runs (multiple browsers/devices)

• Build

• Code coverage

• On Linux!



http://siliconforks.com/jscoverage/






Minify

Ping Response Time

On mobile!!!





http://code.google.com/intl/de-DE/closure/compiler/

https://github.com/mishoo/UglifyJS/

http://developer.yahoo.com/yui/compressor/

http://shrinksafe.dojotoolkit.org/

http://www.crockford.com/javascript/jsmin.html

...

Minifiers


http://shrinksafe.dojotoolkit.org

http://shrinksafe.dojotoolkit.org

Compare

http://compressorrater.thruhere.net/


http://compressorrater.thruhere.net

http://compressorrater.thruhere.net

Google Closure


Google Closure

http://closure-compiler.appspot.com/home




Think different


http://140byt.es


http://140byt.es

http://140byt.es

IDE essentials (using WebStorm)


Embedded Jasmine Test Runner

Test

ResultTest Platforms


Live Please :)


Hints - Unused Code


Hints - Trailing Commas

OK

Global


Hints - Others


Code Style


Rename

• File (updates git, and „requires“)

• Variables

• Functions

• Across Files


Refactor

• Extract into Method

• Extract Variable

• Inline

• Rewrite (if) Statements


Inspector


We want to know how it works on the inside!


Latest and Greatest


Console, please!


One Shortcut for All (Browsers)


monitorEvents(document.body)


Console

• console.profile(), console.profileEnd()

• console.dir()

• console.time(), console.timeEnd()

• console.trace()


*.toString()

• function source

• function parameters

• even console.log.toString()


console.log.toString()


Fix in Place



Demo Time, Webkit Inspector Remote


Tools from the Future (and now)


Bikeshed Tooling

• Instant Preview

Preview SourceMittwoch, 18. April 12

Bikeshed Tooling

Cursor

Highlight

API docs


Bikeshed Tooling

• Instant Preview

• Auto completion

• Embedded API docs

• Intelligent Value Modifier


Bikeshed Tooling

Method Color

AttributeNumber

starpolygoncirclerectellipse...

redgreenblueyellow...

12345...

lineColorlineWidthfillColorfiltersxy...


Bikeshed Tooling

• Instant Preview

• Auto completion

• Embedded API docs

• Intelligent Value Modifier

• All browser based


Editor Demo Time :)


Thank you

@bikeshedjs

Wolfram Kriesing, CTOuxebu@wolframkriesing
