Your SlideShare is downloading. ×
0
Smart Phone Development
Using Web Technologies
Apple Cupcakes


Apple have 250,000 apps. 6.5 billion downloads
Android have 30,000 apps
Upcoming: Windows 7 Phone
Толку многу јазици, толку
малку време
iPhone: Objective C
Android: Java
Nokia: C++
Windows 7: .NET
Palm Pre: HTML + CSS + ...
I already know how to do
HTML, CSS and JavaScript
PhoneGap
PhoneGap


Runs on iPhone, iPad, Android, Palm Pre, Nokia and
Blackberry
Loads embedded web browser (Usually Webkit)
Adds ...
PhoneGap APIs

Accelerometer
Camera
Contacts
Geolocation
Advantages


Fast to develop
  70-80% done in a browser
  Use existing development tools
Disadvantages
Much slower than native
Harder to look native
Can’t access everything (yet)
No position:
fixed support

No d...
Lifecycle

                                               e
       Start Up                            vic !
             ...
Webkit or go home
HTML 5 + CSS 3
 SQLite
 Hardware accelerated animations
 Use your favourite framework
   jQuery
   ExtJS
Frameworks


jqTouch (jQuery based)
SenchaTouch (ExtJS + jqTouch + Raphaël)
iScroll 3.0
jqTouch

Combination of HTML, CSS and JavaScript libraries
Designed to emulate native look and feel
HTML + CSS kind of clu...
SenchaTouch

Combination of HTML, CSS and JavaScript libraries
Uses ExtJS (better for app development)
Better performance ...
iScroll

 Not a full framework
 Fixes the scroll problem
 Uncanny valley problem
 Author working on full framework (GhostT...
Go Speed Racer!
Image loading is slow
Rendering a gradient, makes an image (use canvas)
Accelerated CSS animations
  opaci...
Pretending to go Native
 Input fields have
 additional types (email,
 phone, search)
 Turn on/off auto
 correction and auto...
In the Wild

 Memory and CPU are an issue
 There is some arbitrary 10Mb image limit
 Only handles text files (base64 FTW)
 ...
Titanium
Actually go native


 Compiles JavaScript down to symbols
 Symbols link to either Obj-C libraries or Java classes
 Effecti...
Wait!
Apple vs. Adobe


Flash CS5 was supposed to do something similar
Apple EULA changed to stop 3rd party compilers
It’s now O...
Development not as we
know it

Even though it's JavaScript, it's still Desktop*
development
No HTML or CSS. Just JavaScrip...
Advantages

Uses native UI widgets
Much faster than WebKit
No crazy square bracket notation
Pretty good abstractions
APIs


Much bigger API than PhoneGap
Mainly generic, some platform specific
Threaded UI means file & database functions retu...
What it looks like
Disadvantages
Documentation is a little lacking. (Though forums are
pretty good)
Structuring code is less defined than on t...
Conclusion


PhoneGap better for non-native UIs, fast prototyping,
simple apps, and web based apps
Titanium better for nat...
Thanks
Upcoming SlideShare
Loading in...5
×

Smart phone development

2,728

Published on

There is no denying that the Apple App Store is huge, but who wants to have to deal with Objective-​​C? Thank fully, tech nologies like PhoneGap and Sencha allow web devel opers to work in languages they know (HTML/​CSS/​JavaScript) while still making them look native. PhoneGap also allows us to port our apps to other plat forms, like Android.

This session will look at the mobile web devel opment life cycle from building a prototype in the browser, inte gration with the phone, app submission and some basic marketing tricks.

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
  • Thank you... :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,728
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
90
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide





























  • Transcript of "Smart phone development"

    1. 1. Smart Phone Development Using Web Technologies
    2. 2. Apple Cupcakes Apple have 250,000 apps. 6.5 billion downloads Android have 30,000 apps Upcoming: Windows 7 Phone
    3. 3. Толку многу јазици, толку малку време iPhone: Objective C Android: Java Nokia: C++ Windows 7: .NET Palm Pre: HTML + CSS + JS
    4. 4. I already know how to do HTML, CSS and JavaScript
    5. 5. PhoneGap
    6. 6. PhoneGap Runs on iPhone, iPad, Android, Palm Pre, Nokia and Blackberry Loads embedded web browser (Usually Webkit) Adds JS bridge
    7. 7. PhoneGap APIs Accelerometer Camera Contacts Geolocation
    8. 8. Advantages Fast to develop 70-80% done in a browser Use existing development tools
    9. 9. Disadvantages Much slower than native Harder to look native Can’t access everything (yet) No position:
fixed support No debugger! File system support is limited
    10. 10. Lifecycle e Start Up vic ! De dy a Re Load Web Browser Load HTML Load JS Load CSS
    11. 11. Webkit or go home HTML 5 + CSS 3 SQLite Hardware accelerated animations Use your favourite framework jQuery ExtJS
    12. 12. Frameworks jqTouch (jQuery based) SenchaTouch (ExtJS + jqTouch + Raphaël) iScroll 3.0
    13. 13. jqTouch Combination of HTML, CSS and JavaScript libraries Designed to emulate native look and feel HTML + CSS kind of clunky Worth it for the JS
    14. 14. SenchaTouch Combination of HTML, CSS and JavaScript libraries Uses ExtJS (better for app development) Better performance than jqTouch Weird license
    15. 15. iScroll Not a full framework Fixes the scroll problem Uncanny valley problem Author working on full framework (GhostTouch)
    16. 16. Go Speed Racer! Image loading is slow Rendering a gradient, makes an image (use canvas) Accelerated CSS animations opacity translate3d (NOT translate) Use native touch events
    17. 17. Pretending to go Native Input fields have additional types (email, phone, search) Turn on/off auto correction and auto capitalize Notification API provides alert, confirm
    18. 18. In the Wild Memory and CPU are an issue There is some arbitrary 10Mb image limit Only handles text files (base64 FTW) Working Asynchronously is hard
    19. 19. Titanium
    20. 20. Actually go native Compiles JavaScript down to symbols Symbols link to either Obj-C libraries or Java classes Effectively running natively
    21. 21. Wait!
    22. 22. Apple vs. Adobe Flash CS5 was supposed to do something similar Apple EULA changed to stop 3rd party compilers It’s now OK!
    23. 23. Development not as we know it Even though it's JavaScript, it's still Desktop* development No HTML or CSS. Just JavaScript.
    24. 24. Advantages Uses native UI widgets Much faster than WebKit No crazy square bracket notation Pretty good abstractions
    25. 25. APIs Much bigger API than PhoneGap Mainly generic, some platform specific Threaded UI means file & database functions return synchronously
    26. 26. What it looks like
    27. 27. Disadvantages Documentation is a little lacking. (Though forums are pretty good) Structuring code is less defined than on the web Again, no debugger Code - Build - Crash cycle much slower than Code - Refresh cycle Unit testing is hard
    28. 28. Conclusion PhoneGap better for non-native UIs, fast prototyping, simple apps, and web based apps Titanium better for native UIs. Nice gateway drug for those of use that don't understand C-pointers
    29. 29. Thanks
    1. A particular slide catching your eye?

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

    ×