PHP in a Mobile EcosystemIvo JanschJanuary 28, 2011 - PHPBenelux Conference
About EgeniqStartupMobileTechKnowledgeGeeksDevelopment
About Me@ijanschDeveloperAuthorEntreprenerdPHP
Part 1Let’s think about mobile for a few minutes
The Webis increasingly portable
It’s revolutionary            Much like when            the phone lost            its wall socket
The Internet Of Thingsivo-imac:~ ivo$ ping fridgePING fridge (192.168.1.138): 56 data bytes
The Web versus The Internet
Usage CharacteristicsOn the goShort attention spanAvoid typingTo the point / ad hocOmnipresentContext Awareness
‘Pocket Essentials’
Usage - ‘Couch Computing’RelaxedFreedomConsumptionConvergenceCompanion
Mobile TechnologiesObjective-C (iPhone, iPad, iPod Touch, Apple TV)Java (Android, Blackberry, Symbian)HTML5 / Javascript (...
The App vs. The Browser
Browser based applicationsWrite once, run anywhereOnlineRequires browserPage based‘Stateless’
Native AppsOn- and offlineEvent basedNative device experienceConvenient access to device featuresStatefulMonetization throu...
Some statistics Android Market: 100.000 apps Apple App Store: 300.000 apps Web: 3.000.000 websites optimized for mobile So...
Predictions
Part 2Browser Based Mobile Apps
Device DetectionIt’s all in the User AgentMozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like MacOS X; en-us) AppleWebKit/532.9...
Device Detection
Device Detectionhttp://detectmobilebrowsers.mobi/  Downloadable PHP library  for device detection  Online code generator  ...
Device Detectionhttp://www.deviceatlas.com  Database of device properties  Available online, as API and  downloadable json...
Device DetectionConsiderations:  Don’t redirect to homepage  Offer ‘classic’ option  Don’t make assumptions on screen size
Zend Framework ExampleTake advantage of ZF’s powerful MVC set up  View scripts determine layout of actions  Layout script ...
layouts/scripts/layout_mobile.phtml
views_mobile/scripts/index/index.phtml
Bootstrap.php
ResultTry it at http://egeniq.com/demo/zf/public
Zend_Http_UserAgentNew in Zend Framework 1.11Can work with WURFL or Device Atlas
UI DesignHover = evil‘Finger Friendly Design’‘Touch Driven Development’Screens are getting bigger and (!) smaller
Scalable websiteshttp://www.niemanlab.org/2010/09/nyts-opinion-pages-continue-the-march-toward-app-inspired-design/
HTML5 is easy<!doctype html> - period.<script> or <style> - period.Semantics: header, footer, section, article tags
HTML5 is powerfullocalStorage<video><canvas><svg><input type=”number”> and many other form fields navigator.geolocation.get...
Browsers love HTML5Browsers supporting HTML5: Firefox Safari Opera All the mobile browsers IE (sort of, no support for <ar...
Things to consider Don’t just scale the layout, scale content too Consider ‘scenario based content management’
jQTouch
jQTouchiPhone experience in HTML5http://jqtouch.com/jQuery basedMIT LicenseGive it a try: http://jqtouch.com/preview/demos...
Alternatives jQuery Mobile   1.0 alpha was released at October 16, 2010   http://jquerymobile.com/ Sencha Touch   From the...
You already know PHPYour PHP skills + HTML5 = easy mobile websites
Part 3Native Apps
PHP’s role in native apps     iPhone   Android   Blackberry       App     App         App                API
Optimize APIs for mobile Content optimization Scalability Longevity Security Client/Server considerations
Content Optimization  Consider CPU and memory constraints    Prefer JSON over XML    Compress data    Keep responses small...
Scalability AppStore featured/top listings Slashdot effect Consider the 80/20 rule of app popularity though
LongevityApps have different deployment patterns  No ‘quick fix’ in the application as in web appsClient/Server asynchronou...
LongevityHow long do you support your APIs?  Can’t force people to delete their Apps  Provide clean fallback  Synchronized...
API Security TLS/SSL Basic Auth OAuth? XAuth! PKI / TLSAuth Signed URLs:   ?x=1&y=2     &signature=hash(secret, time limit...
Client/Server considerations Image Processing in the API, instead of App   Use Imagick / GD etc.   Trade-off between bandw...
PHP’s role in native apps PHP has native support for:   Web services   JSON   Compression   Image manipulation Egeniq’s nu...
Part 4Best of Both Worlds
HTML5 in the App StoreHTML5 on the server, supports PHP:  IPFaces - http://www.ipfaces.org/HTML5 on the device, no (or lim...
Cross Compilers = Instant Coffee
Part 5Random bits if time permits
Running PHP on the deviceFirst: Why??!PHP For Android (PFA)  http://phpforandroid.net/PAMP for Symbian  http://wiki.openso...
Symfony MobileMime-type basedoptimisationhttp://www.symfony-project.org/blog/2008/06/09/how-to-create-an-optimized-version...
‘Lemon ADE’ AST editor
Resources for PHP/Mobilehttp://www.egeniq.com/bloghttp://mobile.phpmagazine.net/http://thoomtech.com/iphone/objc-for-php-d...
Thank Youivo@egeniq.com           http://www.egeniq.com@ijansch                 @egeniqPlease leave feedback at: http://jo...
CreditsPictures used in this presentation are creative commons attribution licensed pictures.Here are the owners and the U...
Upcoming SlideShare
Loading in...5
×

PHP in a mobile ecosystem

5,436

Published on

Updated version of my PHP in a mobile ecosystem talk. Looks at how PHP plays a role in the mobile world, and explains what php developers need to know about mobile development.

Presentation delivered at the PHPBenelux 2011 conference and the PHP UK conference 2011.

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,436
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
132
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

PHP in a mobile ecosystem

  1. 1. PHP in a Mobile EcosystemIvo JanschJanuary 28, 2011 - PHPBenelux Conference
  2. 2. About EgeniqStartupMobileTechKnowledgeGeeksDevelopment
  3. 3. About Me@ijanschDeveloperAuthorEntreprenerdPHP
  4. 4. Part 1Let’s think about mobile for a few minutes
  5. 5. The Webis increasingly portable
  6. 6. It’s revolutionary Much like when the phone lost its wall socket
  7. 7. The Internet Of Thingsivo-imac:~ ivo$ ping fridgePING fridge (192.168.1.138): 56 data bytes
  8. 8. The Web versus The Internet
  9. 9. Usage CharacteristicsOn the goShort attention spanAvoid typingTo the point / ad hocOmnipresentContext Awareness
  10. 10. ‘Pocket Essentials’
  11. 11. Usage - ‘Couch Computing’RelaxedFreedomConsumptionConvergenceCompanion
  12. 12. Mobile TechnologiesObjective-C (iPhone, iPad, iPod Touch, Apple TV)Java (Android, Blackberry, Symbian)HTML5 / Javascript (Any)PHP (Any)
  13. 13. The App vs. The Browser
  14. 14. Browser based applicationsWrite once, run anywhereOnlineRequires browserPage based‘Stateless’
  15. 15. Native AppsOn- and offlineEvent basedNative device experienceConvenient access to device featuresStatefulMonetization through App Stores
  16. 16. Some statistics Android Market: 100.000 apps Apple App Store: 300.000 apps Web: 3.000.000 websites optimized for mobile Sources: http://www.bizreport.com/2010/10/dotmobi-2000-growth-in-number-of-mobile-ready-websites.html# http://twitter.com/AndroidDev/status/28701488389 http://www.silobreaker.com/apples-app-store-crosses-300000-apps-5_2263799272514256896
  17. 17. Predictions
  18. 18. Part 2Browser Based Mobile Apps
  19. 19. Device DetectionIt’s all in the User AgentMozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like MacOS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko)Version / 4.0.5 Mobile/8B117 Safari/6531.22.7Mozilla/5.0 (Linux; U; Android 2.1-update1; nl-nl; HTCHero Build/ERE27) AppleWebKit/ 530.17 (KHTML, likeGecko) Version/4.0 Mobile Safari/ 530.17
  20. 20. Device Detection
  21. 21. Device Detectionhttp://detectmobilebrowsers.mobi/ Downloadable PHP library for device detection Online code generator Donationware Ugly code, well documented
  22. 22. Device Detectionhttp://www.deviceatlas.com Database of device properties Available online, as API and downloadable json file Free for development ~99$/year for productionhttp://wurfl.sourceforge.net/
  23. 23. Device DetectionConsiderations: Don’t redirect to homepage Offer ‘classic’ option Don’t make assumptions on screen size
  24. 24. Zend Framework ExampleTake advantage of ZF’s powerful MVC set up View scripts determine layout of actions Layout script wraps everything into main layout Use Bootstrapper to detect device and setup MVC
  25. 25. layouts/scripts/layout_mobile.phtml
  26. 26. views_mobile/scripts/index/index.phtml
  27. 27. Bootstrap.php
  28. 28. ResultTry it at http://egeniq.com/demo/zf/public
  29. 29. Zend_Http_UserAgentNew in Zend Framework 1.11Can work with WURFL or Device Atlas
  30. 30. UI DesignHover = evil‘Finger Friendly Design’‘Touch Driven Development’Screens are getting bigger and (!) smaller
  31. 31. Scalable websiteshttp://www.niemanlab.org/2010/09/nyts-opinion-pages-continue-the-march-toward-app-inspired-design/
  32. 32. HTML5 is easy<!doctype html> - period.<script> or <style> - period.Semantics: header, footer, section, article tags
  33. 33. HTML5 is powerfullocalStorage<video><canvas><svg><input type=”number”> and many other form fields navigator.geolocation.getCurrentPosition();
  34. 34. Browsers love HTML5Browsers supporting HTML5: Firefox Safari Opera All the mobile browsers IE (sort of, no support for <article> until IE9)
  35. 35. Things to consider Don’t just scale the layout, scale content too Consider ‘scenario based content management’
  36. 36. jQTouch
  37. 37. jQTouchiPhone experience in HTML5http://jqtouch.com/jQuery basedMIT LicenseGive it a try: http://jqtouch.com/preview/demos/main
  38. 38. Alternatives jQuery Mobile 1.0 alpha was released at October 16, 2010 http://jquerymobile.com/ Sencha Touch From the makers of jqTouch Tablet support http://www.sencha.com/products/touch/
  39. 39. You already know PHPYour PHP skills + HTML5 = easy mobile websites
  40. 40. Part 3Native Apps
  41. 41. PHP’s role in native apps iPhone Android Blackberry App App App API
  42. 42. Optimize APIs for mobile Content optimization Scalability Longevity Security Client/Server considerations
  43. 43. Content Optimization Consider CPU and memory constraints Prefer JSON over XML Compress data Keep responses small But not too small (connection / routing overhead)
  44. 44. Scalability AppStore featured/top listings Slashdot effect Consider the 80/20 rule of app popularity though
  45. 45. LongevityApps have different deployment patterns No ‘quick fix’ in the application as in web appsClient/Server asynchronous updates Backwards compatibility Versioned API URLs: http://iportfolio.api.egeniq.com/portfolios/1.0/mvb/collections.json
  46. 46. LongevityHow long do you support your APIs? Can’t force people to delete their Apps Provide clean fallback Synchronized instead of real-time dataImplement status check API calls
  47. 47. API Security TLS/SSL Basic Auth OAuth? XAuth! PKI / TLSAuth Signed URLs: ?x=1&y=2 &signature=hash(secret, time limit, params)
  48. 48. Client/Server considerations Image Processing in the API, instead of App Use Imagick / GD etc. Trade-off between bandwidth and processing power Apps support threading / asynchronisity Fire-and-forget API design Prepare/getResult call duos Push features into PHP APIs for reuse
  49. 49. PHP’s role in native apps PHP has native support for: Web services JSON Compression Image manipulation Egeniq’s number 1 choice for App APIs 25-30% of App development time = API
  50. 50. Part 4Best of Both Worlds
  51. 51. HTML5 in the App StoreHTML5 on the server, supports PHP: IPFaces - http://www.ipfaces.org/HTML5 on the device, no (or limited) support for PHP: AppCelerator - http://appcelerator.com/ Phonegap - http://phonegap.com
  52. 52. Cross Compilers = Instant Coffee
  53. 53. Part 5Random bits if time permits
  54. 54. Running PHP on the deviceFirst: Why??!PHP For Android (PFA) http://phpforandroid.net/PAMP for Symbian http://wiki.opensource.nokia.com/projects/PAMP
  55. 55. Symfony MobileMime-type basedoptimisationhttp://www.symfony-project.org/blog/2008/06/09/how-to-create-an-optimized-version-of-your-website-for-the-iphone-in-symfony-1-1
  56. 56. ‘Lemon ADE’ AST editor
  57. 57. Resources for PHP/Mobilehttp://www.egeniq.com/bloghttp://mobile.phpmagazine.net/http://thoomtech.com/iphone/objc-for-php-developers-part-1/
  58. 58. Thank Youivo@egeniq.com http://www.egeniq.com@ijansch @egeniqPlease leave feedback at: http://joind.in/2486
  59. 59. CreditsPictures used in this presentation are creative commons attribution licensed pictures.Here are the owners and the URLS where the originals can be found: ‘Dow says POO’ by Stepleton - http://www.flickr.com/photos/29407923@N03/2899705638/ ‘The telephone’ by Tylerdurden - http://www.flickr.com/photos/tylerdurden/529028040/ ‘Web’ by Kurtxio - http://www.flickr.com/photos/kurtxio/2182760200/ ‘Heavy cloud, no rain’ by Robynsnest - http://www.flickr.com/photos/robynsnest/12405841/ ‘Wireless fridge’ from http://www.wirelessgoodness.com/tag/srt746awtn/ ‘Army iphone app’ by Soldiersmediacenter - http://www.flickr.com/photos/soldiersmediacenter/4271795260/ ‘Carbon Fibre Wallet’ by Ryan Loos - http://www.flickr.com/photos/rh1n0/4157547404/ ‘Keys’ by Jamison Judd - http://www.flickr.com/photos/jamisonjudd/2419601050/ ‘Phone Girl’ by Steffen - http://www.flickr.com/photos/re-ality/460465894/ ‘Icon_safari_hires’ by Hans Dorsch - http://www.flickr.com/photos/hansdorsch/2861804087/ ‘Thinking’ by Karola - http://www.flickr.com/photos/karola/3623768629/ ‘Jusa web’ by Jusfi - http://www.flickr.com/photos/jusfi/2921202536/ ‘iPad :)’ by Korosirego - http://www.flickr.com/photos/korosirego/4334862666/ ‘Ive got a monkey on my back’ by Keven Law - http://www.flickr.com/photos/kevenlaw/2698946160/ ‘Add a spoonful of coffee’ by Martyn Wright - http://www.flickr.com/photos/35521221@N05/5181647830/ ‘Locked steel’ by Darwinbell - http://www.flickr.com/photos/darwinbell/321434733/ ‘4 Biscuits’ by Barnoid - http://www.flickr.com/photos/barnoid/2025811494/
  1. A particular slide catching your eye?

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

×