Skip to content

Instantly share code, notes, and snippets.

@jackfranklin

jackfranklin/gist:4205352

Created December 4, 2012 15:47
Show Gist options
  • Save jackfranklin/4205352 to your computer and use it in GitHub Desktop.
Save jackfranklin/4205352 to your computer and use it in GitHub Desktop.
Download ZIP
Xcake Aug 2012 Talk
Raw
gistfile1.md

JavaScript & Mobile

About

  • developer at Kainos, on placement year from University
  • @Jack_Franklin
  • javascriptplayground.com

Developing for Mobile

A collection of tips, tricks and me moaning.

JavaScript Frameworks

  • JavaScript is awesome, the DOM sucks.
  • jQuery, MooTools, Dojo and so on are big
  • jQuery 1.8 minified = 93KB.
  • That's a lot if I'm on a crappy connection or a crappy phone
  • From jQuery 2.0 we'll be able to build custom builds, this is AWESOME

Zepto!

  • Zepto (http://www.zeptojs.com).
  • 25% of the size of jQuery
  • Modern Browsers only (no extra code for old ones)
  • Can make your own custom build

Note that some optional features of Zepto specifically target mobile browsers; as the original project goal was to specifically provide a leaner alternative to jQuery for the mobile web.

  • matches jQuery API

Zepto initially for mobile

  • support targeted for mobile browsers
  • iOS4 + Safari
  • Android Browser
  • Webkit based browsers
  • webOS Browser
  • Blackberry browser

If you can

  • Use Zepto over jQuery or similar.
  • Worth revisiting when jQuery 2 gives custom builds

XUI

  • Alternative to Zepto
  • "Super Micro tiny dom library"
  • 10KB, 4KB gzipped
  • http://xuijs.com/

Mobile UI

  • FORGET recreating UI Components

Media Queries

  • Use CSS to style site differently at different screen sizes.

jQuery Mobile

  • mixed opinion from me
  • great aim but its browser support aims are its achilles heel
  • poor performance reported often, especially on Android
  • most apps look the same - jQuery Mobile theme roller

Fully Fledged Development Platforms

  • Appcelerator Titanium
  • PhoneGap

In my experience

  • (with Titanium) great idea, tough to pull off in reality
  • Both Titanium & PhoneGap have matured hugely recently.
  • One code base (HTML/CSS/JS), multiple apps (iOS, Android, webOS, Blackberry, etc)
  • Certainly worth checking out.

Why even use JS?

  • often sites can be "turned mobile" with some well written Media Queries and CSS styles
  • don't use JS if CSS could do the job
  • minimal amount of HTTP Requests and smallest size possible (minify, etc)

To Summarise

  • do you really need JS?
  • Emulating native components sucks
  • Solve your app's problem
  • XUI or Zepto for smaller JS dependencies
  • codebase as small as possible
  • media queries and CSS styling

Thanks!

  • @Jack_Franklin
  • jackfranklin.co.uk
  • javascriptplayground.com
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment