http://www.egeniq.com
info@egeniq.com
@egeniq
phpbenelux, January 2012
Ivo Jansch
Mobile for PHP Developers
a 3 hour primer
Slide 2
Slide 2 text
About Me
@ijansch
Developer
Author
Entreprenerd
PHP
2
Slide 3
Slide 3 text
About Egeniq
Startup
Mobile
Tech
Knowledge
Geeks
Development
3
Slide 4
Slide 4 text
Contents
‣Part 1: Putting mobile in perspective
‣Part 2: Browser based mobile applications
‣Part 3: A few words on frontend design
‣Part 4: Cool stuff with PHP and native apps
‣Part 5: APIs for native apps
‣Part 6: Web vs Native: best of both worlds
‣Part 7: Random bits if time permits
4
Slide 5
Slide 5 text
Part 1
Let’s think about mobile for a few minutes
5
Slide 6
Slide 6 text
The Web
Is increasingly portable
6
Slide 7
Slide 7 text
It’s revolutionary
Much like when
the phone lost
its wall socket
7
Slide 8
Slide 8 text
The Internet Of Things
ivo-imac:~ ivo$ ping fridge
PING fridge (192.168.1.138): 56 data bytes
8
Slide 9
Slide 9 text
The Web versus The Internet
9
Slide 10
Slide 10 text
Usage Characteristics
‣On the go
‣Short attention span
‣Avoid typing
‣To the point / ad hoc
‣Omnipresent
‣Context Awareness
10
Mobile Technologies
‣Objective-C (iPhone, iPad, iPod Touch, Apple
TV)
‣Java (Android, Blackberry, Symbian)
‣HTML5 / Javascript (Any)
‣PHP (Any)
13
Slide 14
Slide 14 text
The App vs. The Browser
14
Slide 15
Slide 15 text
Browser based applications
‣Write once, run anywhere
‣Online
‣Requires browser
‣Page based
‣‘Stateless’
15
Slide 16
Slide 16 text
Native Apps
‣On- and offline
‣Event based
‣Native device experience
‣Convenient access to device features
‣Stateful
‣Monetization through App Stores
16
Source: Mobiforge.com
A little over 4 years ago
21
Slide 22
Slide 22 text
4.5 years ago
22
Slide 23
Slide 23 text
2 ways to render a regular website:
‣Keyhole
‣Scaled
Dealing with a smaller screen
23
Slide 24
Slide 24 text
Keyhole
24
Slide 25
Slide 25 text
Scaled
25
Slide 26
Slide 26 text
A pixel is not a pixel
26
640
1020
Slide 27
Slide 27 text
A pixel is not a pixel
Viewports:
‣ Invented by Apple
‣ Adopted by others
‣ Unofficial standard, registered at whatwg.org
27
Slide 28
Slide 28 text
A pixel is not a pixel
28
640
320
iPhone 3 iPhone 4
480 960
Slide 29
Slide 29 text
A pixel is not a pixel
CSS 2.1 Specification:
“If the pixel density of the output device is very different from that of a typical computer display,
the user agent should rescale pixel values. It is recommended that the pixel unit refer to the
whole number of device pixels that best approximates the reference pixel. It is recommended
that the reference pixel be the visual angle of one pixel on a device with a pixel density of
96dpi and a distance from the reader of an arm’s length.”
29
Slide 30
Slide 30 text
Standardization Horror
‣
• iPhone and most others
‣
• Many feature phones (originally Palm)
‣
• Windows Mobile
‣
• Android
30
Slide 31
Slide 31 text
A pixel is not a pixel
Recommended reading:
http://www.quirksmode.org/blog/ by Peter Paul Koch
31
Slide 32
Slide 32 text
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
32
Slide 33
Slide 33 text
Device Detection
33
Slide 34
Slide 34 text
Don’t Reinvent The Wheel
http://detectmobilebrowsers.mobi/
• Downloadable PHP library
for device detection
• Online code generator
• Donationware
• Ugly code, well documented
34
Slide 35
Slide 35 text
On to a more advanced mechanism
‣General tip:
• don’t rely on device
• rely on capabilities
‣WURFL
• Wireless Universal Resource FiLe
• Contains info on 500+ capabilities of 14.000+ devices
• http://wurfl.sourceforge.net/
• Clients available for many languages
35
Slide 36
Slide 36 text
WURFL in PHP: Tera-Wurfl
‣Download Tera-Wurfl
• http://www.tera-wurfl.com
• Renamed to ‘Scientia Mobile Database API’
‣Install in document root
• e.g. in /var/www/yoursite/Tera-WURFL
• Make sure data/ dir is apache read+writable
‣Create empty database
36
Alternatives
‣http://www.deviceatlas.com
• Commercial database of device properties
• Available online, as API and downloadable
json file
• Free for development
• ~99$/year for production
46
Slide 47
Slide 47 text
Exercise!
‣Create a page that displays the Sneezing
Panda video on devices that support Flash.
‣Display ‘Sad Panda’! on devices that don’t.
• Examples of device that can show flash: browser
• Example of device that can’t: iPhone
• Tip to simulate mobile devices: http://techie-buzz.com/
tips-and-tricks/emulate-mobile-browser-in-firefox.html
• Don’t have a laptop? Team up!
47
Slide 48
Slide 48 text
Browser Detection In Practice
‣Let’s optimize a site with what we’ve learned
so far.
‣Let’s 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
48
Slide 49
Slide 49 text
Zend Framework mobile site
2 ways for mobile layout:
‣Separate files
‣Separate folders
Detection in bootstrap
49
Slide 50
Slide 50 text
layouts/scripts/layout_mobile.phtml
50
Slide 51
Slide 51 text
views_mobile/scripts/index/index.phtml
51
Slide 52
Slide 52 text
Bootstrap.php
52
Slide 53
Slide 53 text
Result
Try it at http://egeniq.com/demo/zf/public
53
Slide 54
Slide 54 text
Zend_Http_UserAgent
‣Since Zend Framework 1.11
‣Can work with WURFL or Device Atlas
54
Slide 55
Slide 55 text
Dealing With Mobile Browsers
‣Considerations:
• Don’t redirect to homepage
• Offer ‘classic’ option
• Don’t make assumptions on physical screen size
55
Slide 56
Slide 56 text
Part 3
A few words on front end design
56
Slide 57
Slide 57 text
UI Design
‣Hover = evil
‣‘Finger Friendly Design’
‣‘Touch Driven Development’
‣Screens are getting bigger and (!) smaller
57
HTML5 is easy
‣ - period.
‣ or <style> - period.
‣Semantics: header, footer, section, article
tags
59
Slide 60
Slide 60 text
HTML5 is powerful
‣localStorage
‣
‣
‣
‣ and many other form
fields
‣ navigator.geolocation.getCurrentPosition();
60
Slide 61
Slide 61 text
Browsers love HTML5
Browsers supporting HTML5:
‣Firefox
‣Safari
‣Opera
‣All the mobile browsers
‣IE (sort of, no support for until IE9)
61
Slide 62
Slide 62 text
Things to consider
‣Don’t just scale the layout, scale content too
‣Consider ‘scenario based content
management’
62
Slide 63
Slide 63 text
jQTouch
63
Slide 64
Slide 64 text
jQTouch
‣iPhone experience in HTML5
‣http://jqtouch.com/ (beta 4)
‣ jQuery / Zepto based
‣MIT License
‣Give it a try: http://jqtouch.com/preview/
demos/main
64
Slide 65
Slide 65 text
Alternatives
‣jQuery Mobile
• 1.0 was released on November 16, 2011
• http://jquerymobile.com/
‣Zepto
• jQuery interface compatible, optimized for mobile WebKit
• http://zeptojs.com/
‣Sencha Touch
• From the makers of jqTouch
• Tablet support
• http://www.sencha.com/products/touch/
65
Slide 66
Slide 66 text
Simple tricks
Making phone calls from a web page:
66
Slide 67
Slide 67 text
Simple tricks
Open Maps application:
67
Slide 68
Slide 68 text
You already know PHP
Your PHP skills + HTML5 = easy mobile
websites
68
Slide 69
Slide 69 text
Exercise!
‣Get jqTouch
‣Modify demo to include #phpbnl12 menu
item
‣Add tutorial schedule
69
Slide 70
Slide 70 text
Part 4
Doing Cool Stuff With PHP And Native Apps
70
Notifications
80
Apple Push
Notification
Services
Your
App
Your Server
deviceToken
message
payload
signature
message
payload
Slide 81
Slide 81 text
Notifications
81
Slide 82
Slide 82 text
Notifications - Android
82
Slide 83
Slide 83 text
Notifications - Android
83
Slide 84
Slide 84 text
Notifications - Notes
‣For Apple:
• Get certificates from the developer portal
‣For Android
• Need to register an account and request a quota
‣Note: deviceTokens can change!
84
Slide 85
Slide 85 text
Token Exchange
85
Apple Push
Notification
Services
Your
App
Your Server
deviceToken
message
payload
signature
message
payload
Token
Exchange
deviceToken
notificationToken
notificationToken
deviceToken
notificationToken
http://tokenexchange.googlecode.com
Slide 86
Slide 86 text
Exercise!
‣Let me scan your contact details
• Use MECARD format
• Use phpQRCode library (http://
phpqrcode.sourceforge.net/)
• (Note: requires GD extension in PHP)
86
Slide 87
Slide 87 text
Part 5
APIs for Native Apps
87
Slide 88
Slide 88 text
PHP’s role in native apps
iPhone App
Android
App
Blackberry
App
API
88
Slide 89
Slide 89 text
Optimize APIs for mobile
‣Content optimization
‣Scalability
‣Longevity
‣Security
‣Client/Server
considerations
89
Slide 90
Slide 90 text
Content Optimization
‣Consider CPU and memory constraints
• Prefer JSON over XML
• Compress data
• Keep responses small
• But not too small (connection / routing overhead)
90
Slide 91
Slide 91 text
Content Optimization
‣To REST or not to REST
‣RESTful API design:
• http://someapi/pages
• http://someapi/pages/1
• http://someapi/pages/1/comments
• http://someapi/pages/1/comments/3
‣Scenario Driven API design:
• http://someapi/dashboard
91
Slide 92
Slide 92 text
Content Optimization
‣Rest:
• Developer friendly (intuitive, logical)
• Light, but also heavy
• Easy to maintain, loosely coupled
‣Scenario driven:
• Mobile friendly (optimized for few connections and data)
• Specific datasets, fewer calls
• Tighter coupled to application functionality
92
Slide 93
Slide 93 text
Scalability
‣AppStore featured/top listings Slashdot
effect
‣Consider the 80/20 rule of app popularity
though
93
Slide 94
Slide 94 text
Scalability Case: RTLNieuws 365
94
Slide 95
Slide 95 text
Scalability Case: RTLNieuws 365
‣API:
• LAMP + Varnish
• Scenario Driven Design
• Content pre-generation
‣ Cron + Command Line PHP
• Very important: caching headers and ‘TTL’
‣Controlled launch process:
• Soft launch: sneaky talkshow plug at 23pm day before
• Build up buzz throughout launch day
• News item in 19.30 RTL News
95
Slide 96
Slide 96 text
Scalability Case: RTLNieuws 365
96
Slide 97
Slide 97 text
Scalability Case: RTLNieuws 365
‣News item had > 1 million TV viewers
‣40.000 installs on day 1
• 30% of which in 5 minutes following news item
‣~ 100.000 apps installed in week 1
‣No 1 app store position for 8 days in a row
97
Slide 98
Slide 98 text
Scalability Case: RTLNieuws 365
‣Setup:
• 1 * PHP api server live
• 1 * PHP api server hot standby
• 2 * varnish + 1 * spare varnish ‘just in case’
• 1 * mysql live
• 1 * mysql hot standby
‣Conclusion: PHP + Varnish = Awesome APIs
98
Slide 99
Slide 99 text
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
99
Slide 100
Slide 100 text
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
‣API ownership
100
Slide 101
Slide 101 text
Longevity - API Ownership
‣Own DNS records
‣Own the initial entry point of the app
‣Don’t hardcode URLs
‣By the way: also own the developer account
101
Signed URLs
‣Prevent parameter tampering
‣Allow API use by specific client only
‣Simple but effective way to protect API
103
Slide 104
Slide 104 text
Signed URLs
104
Client API
Sign Params
With Signature
Verify
Signature W
Params +
Signature
Slide 105
Slide 105 text
Signed URLs
105
W
Slide 106
Slide 106 text
Signed URLs
106
W
Slide 107
Slide 107 text
Signed URLs
107
W
Slide 108
Slide 108 text
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
108
Slide 109
Slide 109 text
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
109
Slide 110
Slide 110 text
Part 6
Web vs Native: Best of Both Worlds
110
Slide 111
Slide 111 text
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
111
Slide 112
Slide 112 text
Cross Compilers = Instant Coffee
112
Slide 113
Slide 113 text
Part 7
Random bits if time permits
113
Slide 114
Slide 114 text
Testing
‣Various options for testing:
• Get your boss to buy you devices
• Firefox with user agent plugin
• Use Simulators/Emulators
• Use a service such as DeviceAnywhere
114
Slide 115
Slide 115 text
Running PHP on the device
First: Why??!
‣PHP For Android (PFA)
• http://phpforandroid.net/
‣PAMP for Symbian
• http://wiki.opensource.nokia.com/projects/PAMP
115
Slide 116
Slide 116 text
Symfony Mobile
• Mime-type based optimisation
• http://www.symfony-project.org/blog/2008/06/09/how-
to-create-an-optimized-version-of-your-website-for-the-
iphone-in-symfony-1-1
116
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/
‘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/
‘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/
‘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/
‘pining for maui’ by D’Arcy Norman - http://www.flickr.com/photos/dnorman/2223663304/
Slide 121
Slide 121 text
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:
‘Seeing my world through a keyhole’ by Kate Ter Haar - http://www.flickr.com/photos/katerha/4592429363/
‘Dear CNN, please send me push notifi...’ by Alex Valentine - http://www.flickr.com/photos/alexvalentine/5644423659/
Ivo’s portrait in intro, photo by Jelmer de Haas - http://www.jelmerdehaas.com