PHP in a Mobile Ecosystem (Zendcon 2010)
2 likes•1,827 views
The document discusses the role of PHP in the mobile ecosystem, highlighting the differences between browser-based applications and native apps. It emphasizes the importance of device detection, UI design considerations, and the use of HTML5 for mobile optimization. Additionally, it covers best practices for API design and security to enhance mobile app performance and user experience.
PHP in a Mobile Ecosystem (Zendcon 2010)
- 1. PHP in a Mobile Ecosystem Ivo Jansch - Egeniq November 3, 2010 - Zendcon 1 Wednesday, November 3, 2010
- 4. Part 1 Let’s think about mobile for a few minutes 4 Wednesday, November 3, 2010
- 5. The Web is increasingly portable 5 Wednesday, November 3, 2010
- 6. It’s revolutionary Much like when the phone lost its wall socket 6 Wednesday, November 3, 2010
- 7. The Internet Of Things ivo-imac:~ ivo$ ping fridge PING fridge (192.168.1.138): 56 data bytes 7 Wednesday, November 3, 2010
- 8. The Web versus The Internet 8 Wednesday, November 3, 2010
- 9. Usage Characteristics On the go Short attention span Avoid typing To the point / ad hoc Omnipresent 9 Wednesday, November 3, 2010
- 10. Mobile Technologies Objective-C (iPhone, iPad, iPod Touch, Apple TV) Java (Android, Blackberry, Symbian) HTML5 / Javascript (Any) PHP (Any) 10 Wednesday, November 3, 2010
- 11. The App vs. The Browser 11 Wednesday, November 3, 2010
- 12. Browser based applications Write once, run anywhere Online Requires browser Page based ‘Stateless’ 12 Wednesday, November 3, 2010
- 13. Native Apps On- and offline Event based Native device experience Convenient access to device features Stateful Monetization through App Stores 13 Wednesday, November 3, 2010
- 14. 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 14 Wednesday, November 3, 2010
- 16. Part 2 Browser Based Mobile Apps 16 Wednesday, November 3, 2010
- 17. Device Detection It’s all in the User Agent Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version / 4.0.5 Mobile/8B117 Safari/6531.22.7 Mozilla/5.0 (Linux; U; Android 2.1-update1; nl-nl; HTC Hero Build/ERE27) AppleWebKit/ 530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/ 530.17 17 Wednesday, November 3, 2010
- 18. Device Detection 18 Wednesday, November 3, 2010
- 19. Device Detection http://detectmobilebrowsers.mobi/ Downloadable PHP library for device detection Online code generator Donationware Ugly code, well documented 19 Wednesday, November 3, 2010
- 20. Device Detection http://www.deviceatlas.com Database of device properties Available online, as API and downloadable json file Free for development ~99$/year for production http://wurfl.sourceforge.net/ 20 Wednesday, November 3, 2010
- 21. Device Detection Considerations: Don’t redirect to homepage Offer ‘classic’ option Don’t make assumptions on screen size 21 Wednesday, November 3, 2010
- 22. Zend Framework Example Take 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 22 Wednesday, November 3, 2010
- 26. Result Try it at http://egeniq.com/demo/zf/public 26 Wednesday, November 3, 2010
- 27. Zend_Http_UserAgent New in Zend Framework 1.11 Can work with WURFL or Device Atlas 27 Wednesday, November 3, 2010
- 28. UI Design Hover = evil ‘Finger Friendly Design’ ‘Touch Driven Development’ Screens are getting bigger and (!) smaller 28 Wednesday, November 3, 2010
- 30. HTML5 is easy <!doctype html> - period. <script> or <style> - period. Semantics: header, footer, section, article tags 30 Wednesday, November 3, 2010
- 31. HTML5 is powerful localStorage <video> <canvas> <svg> <input type=”number”> and many other form fields navigator.geolocation.getCurrentPosition(); 31 Wednesday, November 3, 2010
- 32. Browsers love HTML5 Browsers supporting HTML5: Firefox Safari Opera All the mobile browsers IE (sort of, no support for <article> until IE9) 32 Wednesday, November 3, 2010
- 33. Things to consider Don’t just scale the layout, scale content too Consider ‘scenario based content management’ 33 Wednesday, November 3, 2010
- 34. jQTouch 34 Wednesday, November 3, 2010
- 35. jQTouch iPhone experience in HTML5 http://jqtouch.com/ jQuery based MIT License Give it a try: http://jqtouch.com/preview/demos/main 35 Wednesday, November 3, 2010
- 36. 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/ 36 Wednesday, November 3, 2010
- 37. You already know PHP Your PHP skills + HTML5 = easy mobile websites 37 Wednesday, November 3, 2010
- 38. Part 3 Native Apps 38 Wednesday, November 3, 2010
- 39. PHP’s role in native apps iPhone App Android App Blackberry App API 39 Wednesday, November 3, 2010
- 40. Optimize APIs for mobile Content optimization Scalability Longevity Security Client/Server considerations 40 Wednesday, November 3, 2010
- 41. Content Optimization Consider CPU and memory constraints Prefer JSON over XML Compress data Keep responses small But not too small (connection / routing overhead) 41 Wednesday, November 3, 2010
- 42. Scalability AppStore featured/top listings Slashdot effect Consider the 80/20 rule of app popularity though 42 Wednesday, November 3, 2010
- 43. Longevity Apps have different deployment patterns No ‘quick fix’ in the application as in web apps Client/Server asynchronous updates Backwards compatibility Versioned API URLs: http://iportfolio.api.egeniq.com/portfolios/1.0/mvb/collections.json 43 Wednesday, November 3, 2010
- 44. Longevity How long do you support your APIs? Can’t force people to delete their Apps Provide clean fallback Synchronized instead of real-time data Implement status check API calls 44 Wednesday, November 3, 2010
- 45. API Security TLS/SSL Basic Auth OAuth? XAuth! PKI / TLSAuth Signed URLs: ?x=1&y=2 &signature=hash(secret, time limit, params) 45 Wednesday, November 3, 2010
- 46. 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 46 Wednesday, November 3, 2010
- 47. 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 47 Wednesday, November 3, 2010
- 48. Part 4 Best of Both Worlds 48 Wednesday, November 3, 2010
- 49. HTML5 in the App Store HTML5 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 49 Wednesday, November 3, 2010
- 50. Part 5 Random bits if time permits 50 Wednesday, November 3, 2010
- 51. Running PHP on the device First: Why??! PHP For Android (PFA) http://phpforandroid.net/ PAMP for Symbian http://wiki.opensource.nokia.com/projects/PAMP 51 Wednesday, November 3, 2010
- 53. ‘Lemon ADE’ AST editor 53 Wednesday, November 3, 2010
- 55. Thank You [email protected] http://www.egeniq.com @ijansch @egeniq Please leave feedback at: http://joind.in/2254 55 Wednesday, November 3, 2010
- 56. Credits Pictures 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/ ‘Icon_safari_hires’ by Hans Dorsch - http://www.flickr.com/photos/hansdorsch/2861804087/ ‘Thinking’ by Karola - http://www.flickr.com/photos/karola/3623768629/ ‘Jus'a web’ by Jusfi - http://www.flickr.com/photos/jusfi/2921202536/ ‘iPad :)’ by Korosirego - http://www.flickr.com/photos/korosirego/4334862666/ ‘I've got a monkey on my back’ by Keven Law - http://www.flickr.com/photos/kevenlaw/2698946160/ ‘Locked steel’ by Darwinbell - http://www.flickr.com/photos/darwinbell/321434733/ ‘4 Biscuits’ by Barnoid - http://www.flickr.com/photos/barnoid/2025811494/ 56 Wednesday, November 3, 2010