An overview of some of the existing tools for mobile web app development. Presented at Over The Air 2011.

1. Mobile Web Apps:
State of the Tools
@ernesto_jimenez

2. an overview of some of
the tools available
disclaimer: not all based in personal experience

3. Agenda
• UI Frameworks
• JS Frameworks
• Debugging tools
• Mobile network simulation
• Deployment

4. UI Frameworks

5. jQuery Mobile
http://goo.gl/hSffk

6. is really mobile
not everybody has the latest version of iOS or Android

8. is very active

10. it has strong support
Adobe integrated jQuery Mobile in Dreamweaver CS 5.5
and sponsors the development time of 2 core members

11. JS Frameworks

12. JS Frameworks
high level only

13. Sencha Touch
http://goo.gl/w7fHU

14. MVC framework

15. rich UI components
but it only targets webkit browsers

16. SproutCore
http://goo.gl/K6Wkx

17. MVC too

18. proven very solid

20. cool features
data bindings, statecharts, data stores, gesture recognisers…

21. UI components in 1.7
not optimized for
touch

22. no UI components in
2.0 beta yet
but I’ve played with SproutCore 2.0 + jQuery Mobile

23. documentation is
lacking
but the source code is very clean and concise

24. Debugging Tools

25. Ripple
http://goo.gl/icZZK

26. try different screen
sizes and orientations

28. platform-specific APIs

29. test with fake API data

31. jsconsole.com
http://goo.gl/oiubb

32. inject JS into a remote
web app

33. remote-js shameless plug
http://goo.gl/MbRjN

34. same as before, but
from the terminal and
controlling the server

35. Socketbug
http://goo.gl/lgEBk

36. same concept, on steroids
but it has 3 pages of installation instructions

37. Mobile Network
Simulation

38. Network Link
Conditioner

39. bundled with XCode
/Applications/Utilities/Network Link Conditioner/

40. it is very versatile...

41. ...if you are lucky

42. SpeedLimit
http://goo.gl/f2kKH

43. it’s not so configurable,
but it works

44. tc

45. add latency to localhost
tc qdisc add dev lo root handle 1:0 netem delay 100msec

46. back to normal
tc qdisc del dev lo root

47. Deployment

48. PhoneGap
http://goo.gl/BxyYK

49. packages your web app
into a native app

50. you can send your app
to the app marketplaces

51. provides extra APIs not
available in the browser

52. can be extended with
plugins

53. they have great support
Adobe, RIM, Microsoft...

54. PhoneGap Build
http://goo.gl/LYuCS

55. build your PhoneGap
app in the cloud
no need to install all the native SDK’s!

56. your contributions :)

57. Thank you!
@ernesto_jimenez