Enterprise Strength Mobile JavaScript

  • 3,059 views
Uploaded 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 …

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.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
3,059
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
23
Comments
1
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

  • 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/