Mobile Web Apps: State of the Tools

888
-1

Published on

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

Presented at Over The Air 2011.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
888
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×