Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Mobile Web Apps:State of the Tools@ernesto_jimenez
an overview of some of   the tools available disclaimer: not all based in personal experience
Agenda• UI Frameworks• JS Frameworks• Debugging tools• Mobile network simulation• Deployment
UI Frameworks
jQuery Mobile           http://goo.gl/hSffk
is really mobilenot everybody has the latest version of iOS or Android
is very active
it has strong supportAdobe integrated jQuery Mobile in Dreamweaver CS 5.5and sponsors the development time of 2 core members
JS Frameworks
JS Frameworks   high level only
Sencha Touch          http://goo.gl/w7fHU
MVC framework
rich UI components  but it only targets webkit browsers
SproutCore        http://goo.gl/K6Wkx
MVC too
proven very solid
cool featuresdata bindings, statecharts, data stores, gesture recognisers…
UI components in 1.7 not optimized for      touch
no UI components in     2.0 beta yetbut I’ve played with SproutCore 2.0 + jQuery Mobile
documentation is      lackingbut the source code is very clean and concise
Debugging Tools
Ripple         http://goo.gl/icZZK
try different screensizes and orientations
platform-specific APIs
test with fake API data
jsconsole.com           http://goo.gl/oiubb
inject JS into a remote        web app
remote-js   shameless plug        http://goo.gl/MbRjN
same as before, butfrom the terminal andcontrolling the server
Socketbug            http://goo.gl/lgEBk
same concept, on steroids   but it has 3 pages of installation instructions
Mobile Network  Simulation
Network LinkConditioner
bundled with XCode/Applications/Utilities/Network
Link
Conditioner/
it is very versatile...
...if you are lucky
SpeedLimit         http://goo.gl/f2kKH
it’s not so configurable,       but it works
tc
add latency to localhost tc
qdisc
add
dev
lo
root
handle
1:0
netem
delay
100msec
back to normal  tc
qdisc
del
dev
lo
root
Deployment
PhoneGap       http://goo.gl/BxyYK
packages your web app   into a native app
you can send your appto the app marketplaces
provides extra APIs notavailable in the browser
can be extended with       plugins
they have great support      Adobe, RIM, Microsoft...
PhoneGap Build           http://goo.gl/LYuCS
build your PhoneGap  app in the cloud  no need to install all the native SDK’s!
your contributions :)
Thank you!@ernesto_jimenez
 Mobile Web Apps: State of the Tools
 Mobile Web Apps: State of the Tools
 Mobile Web Apps: State of the Tools
 Mobile Web Apps: State of the Tools
 Mobile Web Apps: State of the Tools
Upcoming SlideShare
Loading in …5
×

Mobile Web Apps: State of the Tools

1,167 views

Published on

An overview of some of the existing tools for mobile web app development.

Presented at Over The Air 2011.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Mobile Web Apps: State of the Tools

  1. 1. Mobile Web Apps:State of the Tools@ernesto_jimenez
  2. 2. an overview of some of the tools available disclaimer: not all based in personal experience
  3. 3. Agenda• UI Frameworks• JS Frameworks• Debugging tools• Mobile network simulation• Deployment
  4. 4. UI Frameworks
  5. 5. jQuery Mobile http://goo.gl/hSffk
  6. 6. is really mobilenot everybody has the latest version of iOS or Android
  7. 7. is very active
  8. 8. it has strong supportAdobe integrated jQuery Mobile in Dreamweaver CS 5.5and sponsors the development time of 2 core members
  9. 9. JS Frameworks
  10. 10. JS Frameworks high level only
  11. 11. Sencha Touch http://goo.gl/w7fHU
  12. 12. MVC framework
  13. 13. rich UI components but it only targets webkit browsers
  14. 14. SproutCore http://goo.gl/K6Wkx
  15. 15. MVC too
  16. 16. proven very solid
  17. 17. cool featuresdata bindings, statecharts, data stores, gesture recognisers…
  18. 18. UI components in 1.7 not optimized for touch
  19. 19. no UI components in 2.0 beta yetbut I’ve played with SproutCore 2.0 + jQuery Mobile
  20. 20. documentation is lackingbut the source code is very clean and concise
  21. 21. Debugging Tools
  22. 22. Ripple http://goo.gl/icZZK
  23. 23. try different screensizes and orientations
  24. 24. platform-specific APIs
  25. 25. test with fake API data
  26. 26. jsconsole.com http://goo.gl/oiubb
  27. 27. inject JS into a remote web app
  28. 28. remote-js shameless plug http://goo.gl/MbRjN
  29. 29. same as before, butfrom the terminal andcontrolling the server
  30. 30. Socketbug http://goo.gl/lgEBk
  31. 31. same concept, on steroids but it has 3 pages of installation instructions
  32. 32. Mobile Network Simulation
  33. 33. Network LinkConditioner
  34. 34. bundled with XCode/Applications/Utilities/Network
Link
Conditioner/
  35. 35. it is very versatile...
  36. 36. ...if you are lucky
  37. 37. SpeedLimit http://goo.gl/f2kKH
  38. 38. it’s not so configurable, but it works
  39. 39. tc
  40. 40. add latency to localhost tc
qdisc
add
dev
lo
root
handle
1:0
netem
delay
100msec
  41. 41. back to normal tc
qdisc
del
dev
lo
root
  42. 42. Deployment
  43. 43. PhoneGap http://goo.gl/BxyYK
  44. 44. packages your web app into a native app
  45. 45. you can send your appto the app marketplaces
  46. 46. provides extra APIs notavailable in the browser
  47. 47. can be extended with plugins
  48. 48. they have great support Adobe, RIM, Microsoft...
  49. 49. PhoneGap Build http://goo.gl/LYuCS
  50. 50. build your PhoneGap app in the cloud no need to install all the native SDK’s!
  51. 51. your contributions :)
  52. 52. Thank you!@ernesto_jimenez

×