JavaScript has a well deserved reputation of be hard to write and debug. Put it on a mobile device and the problems increase exponentially. Mobile browsers lack all of the niceties that developers rely on to do testing and debugging including the most fundamental tool, the debugger. But it is possible to write quality JavaScript on a mobile device without relying on blind luck. In this talk I will show all of the tools and tricks that I learned in my 12 month development of the new KBB.com mobile site.

1. Enterprise Strength
Mobile JavaScript
Unit Testing and Debugging in the Real World
LA C#.NET - 4 September 2012
SoCal.NET - 5 September 2012

2. jssaturday.com
Nov. 10th, Long Beach Convention
Center
Discount code: RiaConsultingLLC

3. The Agenda
• The Rise of JavaScript
• Best Practices
• Unit Testing
• Debugging

4. The Rise of JavaScript
• Why JavaScript is so important?
• Why JavaScript Sucks?
• Why is Good JavaScript So Hard To Do?
• The Browser Wars I, II, and III

5. Why JavaScript is so
important?

6. 2002

7. 2012

8. Why JavaScript Sucks?
• The DOM
• The Internet’s Long Tail
• Java is to JavaScript...

9. The DOM
• The Document Object Model is a cross-
platform and language-independent
convention for representing and interacting
with objects in HTML
• The DOM is not JavaScript

10. The Internet’s Long Tail
• It easy to change websites, hard to change
browsers
• Standards are hard to change
• Ecma International
• Move slow
• Fearful of breaking code in production

11. Java is to JavaScript as
Car is to Carpet
• First version built in 10 days by Brendan
Eich and named LiveScript
• Influenced greatly by Scheme
• Marketing won over Engineering
• Changed into a curly brace language
• Renamed to JavaScript for marketing
appeal

12. Scheme
;The first program
(begin
(display "Hello, World!")
(newline))

13. Why is Good JavaScript
So Hard to Write?

14. It’s Your Fault!

15. Why, It’s Your Fault
• JavaScript is a language that engineers don’t
bother to learn
• It is changed not embraced
• For years the page load has protected you

16. The Browser Wars

17. Browser War I
• Microsoft vs. Netscape
• Internet Explorer vs. Navigator
• Control of the Internet
• Proprietary Additions
• Netscape no longer exists

18. Browser War II
• Microsoft vs. Mozilla vs. Google vs. Apple
• IE vs FireFox vs Chrome vs Safari
• Search and Referrals
• Microsoft is losing massive market share

19. Browser War III
• Microsoft vs. Apple vs. Google
• Mobile IE vs Mobile Safari vs The Browser
named Browser
• Mobile Search and Referrals
• Implementation of HTML5/CSS3
• Two way tie between Apple and Google

20. Use Best Practices

21. Use Best Practices
• Avoid sloppy JavaScript
• Avoid the Global Space
• Encapsulate Code into Objects
• Use Design Patterns

22. Avoid Sloppy JavaScript
• JavaScript is a Harsh Mistress
• Always use ‘===’ & ‘!==’
• Code in JavaScript not C#, Java, Ruby, etc.
• Use JSLint or JSHint or Google Closure

23. Avoid the Global Space
• Minimize Use of Global Variables
• Use Namespacing
• Use Anonymous/Immediate Functions
When Appropriate

24. Use Design Patterns
• Singleton
• Chaining
• Revealing Module Structure
• + many more

25. jQuery Chaining
$('#mypanel')
.find('TABLE .firstCol')
.removeClass('.firstCol')
.css('background' : 'red')
.append('<span>This cell is now red</span>');

26. C# LINQ Chaining
using System;
using System.Linq;
namespace StringMethodChaining
{
class Program
{
static void Main(string[] args)
{
"aardvarks AND antelopes AND hippopotami"
.Replace("antelopes", "centipedes")
.Substring("aardvarks".Length)
.ToLower()
.Trim()
.Split(new[] {"and"}, StringSplitOptions.None)
.ToList()
.ForEach(item => Console.WriteLine(item.Trim()));
Console.ReadLine();
}
}
}

27. Unit Testing
• Introduction to Unit Testing
• Headless Unit Testing
• JS Unit Testers

28. A unit test is a piece of
code that tests a piece of
production code.

29. Unit Test
• Sets up one or a few more objects in a
known state
• Exercises them
• Inspects the results
• Must be fast and easy to run

30. Beware of headless unit
tests

31. Headless Unit Testing
• Ruby, Rhino, and JSUnit
• Visual Studio (using plug-ins)

32. JS Unit Testers
• Jasmine (JSUnit obsolete)
• QUnit
• YUI 3 Test
• jsTestDriver
• + lots more

33. JSTestDriver &
Visual Studio
http://slmoloch.blogspot.com/2009/08/how-to-
run-jstestdriver-with-visual_02.html

34. Some Tips
• Involve your team in Unit Tester choice
• 100% coverage is tough and not practical
• Test should be public within your team, the
more eyes the better

35. Debugging
• What’s the Problem?
• Analogues
• WEINRE & Adobe Shadow
• iWebInspector
• Opera Mobile Emulator

36. What’s the Problem?
• Every device has a different browser and
none have development tools
• The alert box - freezes the browser
• Console.log - better but not easy to
• Breakpoints

37. Analogues
In biochemistry, an analog is a substance that
is similar, but not identical, to another.
For us, it is a browser that is similar, but not
identical, to the one we wish to test.

38. Analogues
• iPhone - Safari
• Android - Chrome
• Windows Phone 7 - IE
• Blackberry - Safari/Chrome

39. Analogs
Don’t assume that if it works on the analog,
it will work on the device. Always test on a
device.

40. WEINRE
• Created by Patrick Mueller in JavaScript
• WEb INspector REmote (pronounced like
winery)
• WebKit Only! (It uses built in hooks)
• Allows for inspection of HTML/CSS
• Remote console.log
• NOT A DEBUGGER

41. Adobe Shadow
• Chrome Extension + iOS app & Android
app
• WEINRE with a better UI
• Inspection of HTML/CSS
• Remote console.log
• NOT A DEBUGGER

42. iWebInspector
• Runs only on the iOS Simulator
• Inspection of HTML/CSS
• Remote console.log
• True Remote Debugging

43. Opera Mobile Emulator
• Runs using desktop Opera & Opera Mobile
or Opera Mobile Emulator
• Inspection of HTML/CSS
• Remote console.log
• True Remote Debugger

44. Summary
• JavaScript is tough, but overly so
• Use the Best Tools
• Be Pragmatic, not Dogmatic

45. Useful URLs
• http://www.JSLint.com
• http://www.JSHint.com
• https://developers.google.com/closure/
utilities/
• http://code.google.com/p/js-test-driver/
• http://people.apache.org/~pmuellr/weinre/
docs/1.x/1.5.0/

46. Useful URLs
• http://yuilibrary.com/yui/docs/test/
• http://qunitjs.com/
• http://pivotallabs.com/what/mobile/
overview
• http://siliconforks.com/jscoverage/