The document discusses JavaScript tools for development including: - Testing frameworks like Jasmine for test-driven development and using spies - Continuous integration tools for running automated tests and measuring code coverage - IDE features that support development like embedded test runners and code linting/formatting hints - Browser developer tools like the JavaScript console and inspectors for debugging code - Future tools aim to provide instant previews and intelligent code completion directly in the browser.

1. JavaScript Tools
Wolfram Kriesing
CTO, uxebu
@wolframkriesing
Mittwoch, 18. April 12

2. Warming up: shorten please!
http://140byt.es
Mittwoch, 18. April 12

3. Try it out? Any tool?
The Console!
Browser
node.js
Mittwoch, 18. April 12

4. uxebu
Technology 100%
Product
Flash Bikeshed
- since 2008
Company - 10 People (in DE, NL, US, UK)
Mittwoch, 18. April 12

5. Agenda
• TDD, CI, Build
• IDE and features
• Inspector (Firebug, Webkit Inspector)
• Tools of the future (bikeshed editor)
Mittwoch, 18. April 12

6. TDD, CI, Build
Mittwoch, 18. April 12

7. Jasmine
• JavaScript quasi standard
• For nodejs+browser (server+client)
• Built-in Spies
http://pivotal.github.com/jasmine/
Mittwoch, 18. April 12

8. Jasmine - Matchers
Mittwoch, 18. April 12

9. Jasmine - Matchers, watch out!
Mittwoch, 18. April 12

10. Matchers - toContain, not
Mittwoch, 18. April 12

11. Custom Matchers - toBeInstanceOf
Mittwoch, 18. April 12

12. Custom Matchers - toBeInstanceOf
Mittwoch, 18. April 12

13. Custom Matchers
Mittwoch, 18. April 12

14. Custom Matchers
Mittwoch, 18. April 12

15. Spies
• Decoupled Testing
• Fast Tests (Removes waits, Removes timings)
• Better Architecture
• Async Testing
Mittwoch, 18. April 12

16. Spies
Mittwoch, 18. April 12

17. Spies
Mittwoch, 18. April 12

18. TDD is just the start...
Mittwoch, 18. April 12

19. Our Process
Repo
Dev
CI
All Devs
Flowdock
Mittwoch, 18. April 12

20. CI - Continuous Integration
• All projects
• Automated Test runs (multiple browsers/devices)
• Build
• Code coverage
• On Linux!
Mittwoch, 18. April 12

21. CI - Continuous Integration
http://siliconforks.com/jscoverage/
Mittwoch, 18. April 12

22. CI - Continuous Integration
Mittwoch, 18. April 12

23. Minify
Ping Response Time
On mobile!!!
Mittwoch, 18. April 12

24. Mittwoch, 18. April 12

25. Mittwoch, 18. April 12

26. Mittwoch, 18. April 12

27. Minifiers
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
...
Mittwoch, 18. April 12

28. Compare
http://compressorrater.thruhere.net/
Mittwoch, 18. April 12

29. Google Closure
Mittwoch, 18. April 12

30. Google Closure
http://closure-compiler.appspot.com/home
Mittwoch, 18. April 12

31. Think different
Mittwoch, 18. April 12

32. http://140byt.es
Mittwoch, 18. April 12

33. IDE essentials (using WebStorm)
Mittwoch, 18. April 12

34. Embedded Jasmine Test Runner
Test
Test Platforms Result
Mittwoch, 18. April 12

35. Live Please :)
Mittwoch, 18. April 12

36. Hints - Unused Code
Mittwoch, 18. April 12

37. Hints - Trailing Commas
OK
Global
Mittwoch, 18. April 12

38. Hints - Others
Mittwoch, 18. April 12

39. Code Style
Mittwoch, 18. April 12

40. Rename
• File (updates git, and „requires“)
• Variables
• Functions
• Across Files
Mittwoch, 18. April 12

41. Refactor
• Extract into Method
• Extract Variable
• Inline
• Rewrite (if) Statements
Mittwoch, 18. April 12

42. Inspector
Mittwoch, 18. April 12

43. We want to know how it works on the inside!
Mittwoch, 18. April 12

44. Latest and Greatest
Mittwoch, 18. April 12

45. Console, please!
Mittwoch, 18. April 12

46. One Shortcut for All (Browsers)
Mittwoch, 18. April 12

47. monitorEvents(document.body)
Mittwoch, 18. April 12

48. Console
• console.profile(), console.profileEnd()
• console.dir()
• console.time(), console.timeEnd()
• console.trace()
Mittwoch, 18. April 12

49. *.toString()
• function source
• function parameters
• even console.log.toString()
Mittwoch, 18. April 12

50. console.log.toString()
Mittwoch, 18. April 12

51. Fix in Place
Mittwoch, 18. April 12

52. Mittwoch, 18. April 12

53. Demo Time, Webkit Inspector Remote
Mittwoch, 18. April 12

54. Tools from the Future (and now)
Mittwoch, 18. April 12

55. Bikeshed Tooling
• Instant Preview
Preview Source
Mittwoch, 18. April 12

56. Bikeshed Tooling
Cursor
API docs
Highlight
Mittwoch, 18. April 12

57. Bikeshed Tooling
• Instant Preview
• Auto completion
• Embedded API docs
• Intelligent Value Modifier
Mittwoch, 18. April 12

58. Bikeshed Tooling
star red
polygon green
Method Color
circle blue
rect yellow
ellipse ...
...
Attribute lineColor
lineWidth
1
2
fillColor 3
filters
x Number 4
5
y ...
...
Mittwoch, 18. April 12

59. Bikeshed Tooling
• Instant Preview
• Auto completion
• Embedded API docs
• Intelligent Value Modifier
• All browser based
Mittwoch, 18. April 12

60. Editor Demo Time :)
Mittwoch, 18. April 12

61. Thank you
@bikeshedjs
Wolfram Kriesing, CTO
uxebu
@wolframkriesing
Mittwoch, 18. April 12