Enterprise Strength Mobile JavaScript


Published on

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.

Published in: Technology, Design
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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’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
  • \n
  • \n
  • \n
  • \n
  • Enterprise Strength Mobile JavaScript

    1. Enterprise Strength Mobile JavaScriptUnit Testing and Debugging in the Real World LA C#.NET - 4 September 2012 SoCal.NET - 5 September 2012
    2. jssaturday.comNov. 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 Chainingusing 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 ofcode that tests a piece ofproduction 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 Studiohttp://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. AnaloguesIn biochemistry, an analog is a substance thatis similar, but not identical, to another.For us, it is a browser that is similar, but notidentical, to the one we wish to test.
    38. Analogues• iPhone - Safari• Android - Chrome• Windows Phone 7 - IE• Blackberry - Safari/Chrome
    39. AnalogsDon’t assume that if it works on the analog,it will work on the device. Always test on adevice.
    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/