mobile web programming is a bloody mess

debugging in the shit w/ @brianleroux

the darkness that came before

mobile programming muther fucker

does this face look bothered?

(H/T to programming mother fucker.)

PhoneGap

yay apps!

Target OS Development OS Language
Apple iOS Apple OS X Objective C
Google Android * Java (Apache Harmony-ish Dalik Interpretor)
RIM BlackBerry Windows, OS X HTML, CSS and JS. Also: Java
Windows Phone Windows Any .NET citizen (Silverlight runtime)
Samsung Bada Windows C++
HP webOS * HTML, CSS and JS (Also: NodeJS!)
Symbian, MeeGo * C++ (Qt)

bite off more than you can chew

then chew it

Native Mobile App Dev in Summary

  • Proficient in 8 programming languages and sdks.
  • Possess 8 devices for testing (emulators not enough to ship).
  • Running 2 operating systems (virtualized or otherwise).

remember the guy who gave up?

neither does anyone else

roll ur own html5 microlibrary inspired by jquery


        var $ = document.querySelectorAll

xuijs

Offline! Apps are great for that..

somewhat fragmented

  • localStorage
  • websql
  • window.name
  • indexeddb but a twinkle in ur eye
  • file apis still being spec'd
  • google gears sometimes shows up
  • ie has its own thing, OF FUCKING COURSE, called userData
  • older blackberries had a thing called 'persistent storage' on navigator.store
  • appCache is a douchebag and irrelevant to apps without a server anyhow

Lawnchair

Simple JSON Storage

Apache Cordova



cordova.io

ninja rockstar mobile programmer guru bro

only builds for iOS

UR DOING IT WRONG BRO!

omg a billion dollars for an app!

Web != WebKit

The first gate to mobile hell starts with one question.

Which WebKit is this mother fucking thing running?


ppk →
  • Symbian 1
  • Symbian 2
  • Symbian 3
  • Symbian S40
  • iOS 2.2
  • iOS 3.1
  • iOS 4.2
  • iOS 5.1
  • Android 1.0
  • Android 1.6
  • Android 2
  • Android 3
  • Android 4
  • Chrome for Android
  • Dolfin
  • BlackBerry 6
  • BlackBerry 7
  • BlackBerry X
  • BlackBerry Playbook
  • Phantom Palm 2.0
  • Palm 2.1
  • Bolt 1.5
  • Ozone 0.9
  • Obigo 10
  • WeTab

show no mercy

for you shall recieve none

Devices, and their Capabilties

  • Android
  • iOS
  • BlackBerry
  • Widows Phone

Android

  • touch events are a lie
  • css performance is not
  • as in ios transforms can be hardware accelerated but don't count on it
  • no svg except on the bleeding edge
  • default browser is being dropped from dev but chrome is a download still: awesome
  • canvas dog slow

iOS

  • localStorage 5.1
  • full support for css position:fixed
  • position:fucked

BlackBerry 6+

  • easily the best default mobile browser
  • didn't see that coming did you?

Windows Phone

  • no touching
  • no localStorage
  • no websql
  • FAST svg and canvas ← wat!

consistently buggered up

  • webos
  • symbian
  • qt
  • bada

for fucksakes think of the content first

EMBRACE RAGE

Spite Driven Development

performance protips

your finger does not click

  • unles you are on a windows phone, I guess
  • click events are delayed roughly 300ms
  • anchor tags also have an ugly -webkit-tap-highlight css property 

var hasTouch = !!('ontouchstart' in window);
(Also checkout mike brooks thumbjs and this big-ass-muther of a list started by omg <3 paul irish.)

ppl have solved the shit out of this

css effects are slow

  • box-shadow
  • gradients
  • border-radius

nonblocking


        setTimeout(function(){
            console.log('code here is queued and not blocking the ui')
        },0)
        

        var defer = function(fn) { setTimeout(fn,0) }

        defer(function() {
            console.log('do later')
        })

Fun fact: most browsers default to 4ms even if you set it to 0.

postMessage hack

production code always has a build step

  • prepocess less/sass/stylus/coffeescript
  • compile templates
  • JSLint / JSHint
  • concat
  • minify
  • compile final index.html file w/ one script inc at the BOTTOM
  • run unit tests

actual debugging


        alert('made it here')
        

        console.log('made it here')

test

  • usually easier to get going if you set it up front
  • make it one step to run
  • found a bug? write a test to prove it
  • makes contributing easier
  • helps battle test and polish your public API
  • provides evidence for blame
  • qunit and/or jasmine

remote debugging

if you run out of bullets

you still have a knife

installing weinre

(requires node 0.6.8 and npm) 
            npm install -g weinre

what could better than weinre?

good luck with that

ಠ_ಠ

@brianleroux

accept the challenge

mobile is a bloody mess

this is your opportunity to contribute to fixing it

the only thing between you and your goals

is you