QConSF 2012: Mobile Web Tooling

Pete LePage (@petele) gives a great overview of all the different tools you should consider when embarking on mobile web application development.

Sublime – text editor for Mac

Codekit
  • Minify, compiles
  • live browser reloads
  • JSHint, JSLint
  • Watches all files in direcotry for reloads

Great sites for good design patterns for mobile dev:

Great HCI guidelines from Android, iOS, Safari, etc. can be found on their respective websites

Start with boilerplates from SenchaTouch, bootstrap, and maybe even jqueryMobile

github.com/ftlabs/fastclick for improving perfomance of button clicks (usually delayed by 300ms for pinch zoom, slide, etc.)

To debug, jsconsole.com can be used for remote debugging on other devices and will show stuff on site….coolio.

Hammer.js is cool for jestures to listen to those events

brian.io/lawnchair good to store some transient data by abstracting away for IndexDB, WebSQL or LocalStorage

@media, cool for high density resolution or using CSS -webkit-image-set for both 1x and 2x image densities for hi-rez icons

CharlesProxy good to test network latency or Network Link Conditioner on Mac

Chrome Dev Tools have cool features to override geolocation, user agent, and device orientation

Android and Safari remote debugging possible but need USB cable to connect.

m.chromeexperiments.com to show off your skills.

new.mcrbug.com for filing any bugs

User Experience is x-axis and Platforms is y when trying to decide whether to go native or not, lower-right native, upper-left is hybrid. Left of line is better for hybrid because of hardware acceleration and browser improvements.

PhoneGap Perf Tips:
  1. Keep small footprint by limiting libs
  2. Use touch events, not click events
  3. Use hardware accelerated CSS transitions
  4. Avoid network access and cache locally.

zepto.js is a lightweight version of jquery that doesn’t worry about legacy browsers

Phonegap API explorer is a reference application to look at from the AppStore
Checkout PhoneGap Build to target up to 6 platforms without having to load XCode, Eclipse, etc to build all the individual platforms by hand.
Advertisements

SenchaCon Day1: JavaScript Scope Change Optimizations

Doug Hendricks gives a talk on his take on JS scope.  Important to consider the burden we place on mobile devices that can’t recover as well from antipatterns.

Global variables (no var in front of them) exist through the life of the script and are public.  Also, those vars not declared inside a function. Node.js and HTML5 Workers use “global”.  Same as saying window.globalvar = 1.  Local variables, in contrast, are vars defined with the keyword “var” inside a function.

Activation objects are part of the scope chain right after global and can grow to have undesired effects. See slides for good explanation.

Scope chain augmentation used by closure, with and catch blocks.  Closures will always have 3 scope chain objects minimal.

Better to set a local variable to a global singleton like Ext to avoid having to traverse the scope chain to pull it from the global object.  Use this to refer to local stuff.  Replace scope-chain traversal with a single context text this for prototype search (e.g., ‘scope’: els).

Recommmendations:

  • declare frequently used vars as local vars to avoid scope chain traversal everytime
  • promote frequently used globals up the scope chain (creating local scope as necessary)
  • use closures and try/catch handlers sparingly as they too add to the activation objects on the scope chain
  • Forget about the ‘with’ clause (deprecated in ECMA JS 5)

The reason this is important is because the cycles to traverse the scope chain are expensive for mobile devices with limited power supply.  This is also fairly evident in IE 6/7 because the expense of ActiveX controls to manage this traversal.

Ways to avoid common mistakes/bottlenecks:

  • declare global references to functions that need to be used var doIt = function() {},
  • Avoid highly chained identifier. (e.g., var cust = some.cust.fav is much better instead of using the chain in each invocation)
  • Use function based iteration sparingly for light duty iteration in small sets
  • Don’t extend a class for something that isn’t used much (e.g., use this.constructor.prototype.initComponent.call(this) and set scope to ‘this’)

See thread 42942 on using pub/sub with Ext.util.Observable.

TSSJS Day 3: Ted Neward’s ECMAScript Talk

Ted gets back to the basics with JavaScript (JS)…I mean ECMAScript (ES)!

Numbers are all 64-bit floating point…no ints!  Strings are 16-bit Unicode. JS doesn’t use typed references…”var” is just for the parser to know a variable is about to follow.  If you don’t use var, it’s global (anti-pattern). Coercion is always possible…the var is typeless but the object it points to are typed, just not very strongly. ES is a classless system.

In Java6, they introduced “jrunscript” uses the JSR-223 to figure out by extension what script you’re trying to run (e.g., JS, Groovy, Python, etc.).

Boolean expressions are false if false, null, undefined, “”, 0 and NaN.  Truth is everything else.  In JS, you always return something (undefined if nothing else). == always attempts coercion, but the triple equals (===, !==) behaves how Java devs think it should work.

JS has 3 types that you should care about, Object, function and undefined. , [] () are “refinement” operators.  Any use of () evaluates into function object (aka functor).  You can do this:

var alertType = typedef(alert)
if (alertType === 'undefined')
    alert = println

For functions, “this” is a reference which its contents vary with invocation pattern. Defined parameters are completely unnecessary.  You can use “arguments” to get the arguments passed in from the calling function.

JS is bound to function scope not block scope.  This means you should do var declarations at the top of the function not the top of the block, like in C/Java.

Objects are really just HashMaps or key/value bags.

Beyond this point Ted’s talk blew my mind.  He brought up some pretty interesting examples with closures, currying and Fibonacci example.  It’s probably better to just check out his slides here as I won’t do it justice.