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.
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
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
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
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
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();
}
}
}
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.
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
Here is a state of the web page from 10 years ago, yes only 10 years. It was built mostly on the server with some backing JavaScript.\n
Then these web apps happened. While these sites also have heavy server components, they also fully embrace and use JavaScript on the client\n Google - September 1998\n GMail - April 2004\n Google Maps - February 2005\n Facebook - February 2004\n Twitter - July 2006\n LinkedIn - May 2003\n Netflix - October 2008 (streaming)\n\n
So if all of the big name companies are making so many billions off JavaScript heavy web apps, why does it suck so badly?\n\n
\n
\n
\n
\n
\n
\n
Hence the rise of all of these compiles to JavaScript languages: CoffeeScript, Coco, Caffeine, Dart, Narcissus, and dozens more.\nThe page load aka document.location - flushes the browser and quietly buries your dead bodies with cement shoes into the ocean.\n
\n
People sometimes \n
Still ongoing Google is currently on top, but by the slimmest of margins.\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
The alert box freezes the browser - timers stop ticking\nconsole.log is better but can only see on iPhone (and it can screw up your UI)\nbreakpoints don&#x2019;t normally exist in mobile browsers\n
\n
Yes - blackberry use webkit too. Microsoft is the lone hold out\nImportant to note that webkit is not an open source browser, \nbut an open source browser engine kit. \nSafari and Chrome are not identical.\n
Test, test, test.\nAnalogs are a convenience tool but not a substitute for device testing. \n(turn phone side ways)\n
JavaScript is important to note because it explains a lot of its shortcomings.\nAll of these tools are free!\n
Very similar to WEINRE in function. I thought it was WEINRE version 2.0 or something at first\n
This is a must have if you are supporting the iPhone!\n\n