Developing for the mobile web

  • 870 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
870
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. Developing for the “mobile web” Joey Simhon (@joeysim) CTO and Co-Founder DoAT
  • 2. Hello WorldGrowing Internet & mobile babies since 2000Owned and managed 2 web agencies (UX & Tech)Served as acting CTO for several startup companiesPassionate about engineering and the culture around it
  • 3. DoAT1st search engine born mobileLaunched at TCD NYC in May 2011 (winner of the Bing choice award)iPhone / US availability at first, expanded to Canada.We’ve built and deployed over 50 mobile web apps in the past year+.@DoATGeeks - a multidisciplinary team - Web, iOS / Android / WPhone,Algorithms and all sorts of backend technologiesFollow us - @doatgeeks | geeks.doat.com
  • 4. There’s no such thing as the “mobile web”
  • 5. From a UX perspectiveicon + full screen = app
  • 6. We’re seeing HUGE progress
  • 7. Mostly publishers adoption and some tech
  • 8. We want you to hack it and innovate on top of it
  • 9. As painlessly as possible :-)
  • 10. Things we wish we had known
  • 11. HTML5 Support
  • 12. Device / Browser Capabilities• Well focus on 2 browser engines - webkit (iOS/Android) and trident (Windows Phone) • Stuff you’d want to use • Application Cache (cache.manifest) • Local storage • History - pushState() • CSS3 • Geo Location
  • 13. CSS• No fixed positioning. Use JS libraries to imitate behavior - iScroll, Scrollability, TouchScroll• CSS animations - some use hardware acceleration (iOS only). Offload to GPU. It’s limited to scale, rotation and translate (position), plan your layout accordingly. Different syntax for different browsers (-webkit / -moz- / -o)• Pixel ratios to support Retina.• Use spin.js to create great indicators at low cost
  • 14. Javascript• Slow - little resources (CPU/Interpreter)• Prefer native (aka “vanilla”) code (e.g. $(".classname") vs. document.querySelector(".className"))• Parsing can be slow too (jQuery takes several 100s ms to parse, blocky)• Use mobile only libraries (zepto.js, xui.js, etc)• Visible first strategy, load and render the rest on-demand• Android vs iOS - can be up to x2-x10 faster in raw speed (eg LZW compression)
  • 15. Network• High latency• When its there (AT&T)• 6 concurrent HTTP reqs (sometimes 4)• Global (verified on iOS). Splitting hosts will be slower (DNS)• A request is an order of a magnitude more expensive than desktop• Inlining vs requesting (embed base64 images, scripts/styles)• Unifying / Minifying (minify library for PHP can be useful)• Image dimensions and compression level (proxy images, Cotendo AIC)• Offload cookies to local storage when not needed on server
  • 16. WebSocket• Reduces round trips dramatically• Supported on iOS only• Important gotcha - doesn’t support gzip compression• Still evolving (was removed when there was a security issue) so always have a fallback ready (there are libraries that handle this for you)• Keeping it open and re-opening is your responsibility
  • 17. HTTP caching• Limited storage (RAM/Disk)• Not persistent in some cases (iOS standalone / UIWebView / power cycles)• Internally in iOS still occupies the HTTP pipe (response is faster around ~10ms)• Application Cache can help persist your assets
  • 18. Android specificsNo CSS fixed positioning on Android 2.1 and belowNo hardware accelerated CSS transitions.No hardware acceleration. Period.No Standalone modeScreen resolutions and ratios vary
  • 19. iOS specificsStandalone mode has some caveats No cache.manifest No HTTP caching No Nitro Splash is shown until load event is fired (looooong)UIWebViews No Nitro (JIT JS) on UIWebView Sometimes only 4 concurrent HTTP reqs
  • 20. Windows Phone specificsNothing much to say hereThe v7.0 Browser is like IE ~6.5Just build for Mango (WPhone v7.5)
  • 21. Introducing Touchy Boilerplate
  • 22. TouchyBPYou mobile web app starter kitEncapsulates all of the lessons we’ve discussedSimple page structureCSS normalizationHardware acceleration supportAnd JS goodiesFork it on github
  • 23. Y U No Give Me iPhone 5z?
  • 24. Thank You. Joey Simhon (@joeysim)CTO and Co-Founder DoAT