0
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

782

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
782
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
  • Transcript of " 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.

    ×