59
PHP in a Mobile Ecosystem Ivo Jansch January 28, 2011 - PHPBenelux Conference

PHP in a mobile ecosystem

Embed Size (px)

DESCRIPTION

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.

Citation preview

Page 1: PHP in a mobile ecosystem

PHP in a Mobile EcosystemIvo JanschJanuary 28, 2011 - PHPBenelux Conference

Page 2: PHP in a mobile ecosystem

About Egeniq

Startup

Mobile

Tech

Knowledge

Geeks

Development

Page 3: PHP in a mobile ecosystem

About Me

@ijansch

Developer

Author

Entreprenerd

PHP

Page 4: PHP in a mobile ecosystem

Part 1Let’s think about mobile for a few minutes

Page 5: PHP in a mobile ecosystem

The Webis increasingly portable

Page 6: PHP in a mobile ecosystem

It’s revolutionary

Much like when

the phone lost

its wall socket

Page 7: PHP in a mobile ecosystem

The Internet Of Thingsivo-imac:~ ivo$ ping fridgePING fridge (192.168.1.138): 56 data bytes

Page 8: PHP in a mobile ecosystem

The Web versus The Internet

Page 9: PHP in a mobile ecosystem

Usage Characteristics

On the go

Short attention span

Avoid typing

To the point / ad hoc

Omnipresent

Context Awareness

Page 10: PHP in a mobile ecosystem

‘Pocket Essentials’

Page 11: PHP in a mobile ecosystem

Usage - ‘Couch Computing’

Relaxed

Freedom

Consumption

Convergence

Companion

Page 12: PHP in a mobile ecosystem

Mobile Technologies

Objective-C (iPhone, iPad, iPod Touch, Apple TV)

Java (Android, Blackberry, Symbian)

HTML5 / Javascript (Any)

PHP (Any)

Page 13: PHP in a mobile ecosystem

The App vs. The Browser

Page 14: PHP in a mobile ecosystem

Browser based applications

Write once, run anywhere

Online

Requires browser

Page based

‘Stateless’

Page 15: PHP in a mobile ecosystem

Native Apps

On- and offline

Event based

Native device experience

Convenient access to device features

Stateful

Monetization through App Stores

Page 17: PHP in a mobile ecosystem

Predictions

Page 18: PHP in a mobile ecosystem

Part 2Browser Based Mobile Apps

Page 19: PHP in a mobile ecosystem

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

Page 20: PHP in a mobile ecosystem

Device Detection

Page 21: PHP in a mobile ecosystem

Device Detection

http://detectmobilebrowsers.mobi/

Downloadable PHP library for device detection

Online code generator

Donationware

Ugly code, well documented

Page 22: PHP in a mobile ecosystem

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/

Page 23: PHP in a mobile ecosystem

Device Detection

Considerations:

Don’t redirect to homepage

Offer ‘classic’ option

Don’t make assumptions on screen size

Page 24: PHP in a mobile ecosystem

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

Page 25: PHP in a mobile ecosystem

layouts/scripts/layout_mobile.phtml

Page 26: PHP in a mobile ecosystem

views_mobile/scripts/index/index.phtml

Page 27: PHP in a mobile ecosystem

Bootstrap.php

Page 28: PHP in a mobile ecosystem

Result

Try it at http://egeniq.com/demo/zf/public

Page 29: PHP in a mobile ecosystem

Zend_Http_UserAgent

New in Zend Framework 1.11

Can work with WURFL or Device Atlas

Page 30: PHP in a mobile ecosystem

UI Design

Hover = evil

‘Finger Friendly Design’

‘Touch Driven Development’

Screens are getting bigger and (!) smaller

Page 32: PHP in a mobile ecosystem

HTML5 is easy

<!doctype html> - period.

<script> or <style> - period.

Semantics: header, footer, section, article tags

Page 33: PHP in a mobile ecosystem

HTML5 is powerful

localStorage

<video>

<canvas>

<svg>

<input type=”number”> and many other form fields

navigator.geolocation.getCurrentPosition();

Page 34: PHP in a mobile ecosystem

Browsers love HTML5

Browsers supporting HTML5:

Firefox

Safari

Opera

All the mobile browsers

IE (sort of, no support for <article> until IE9)

Page 35: PHP in a mobile ecosystem

Things to consider

Don’t just scale the layout, scale content too

Consider ‘scenario based content management’

Page 36: PHP in a mobile ecosystem

jQTouch

Page 37: PHP in a mobile ecosystem

jQTouch

iPhone experience in HTML5

http://jqtouch.com/

jQuery based

MIT License

Give it a try: http://jqtouch.com/preview/demos/main

Page 38: PHP in a mobile ecosystem

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/

Page 39: PHP in a mobile ecosystem

You already know PHP

Your PHP skills + HTML5 = easy mobile websites

Page 40: PHP in a mobile ecosystem

Part 3Native Apps

Page 41: PHP in a mobile ecosystem

PHP’s role in native apps

iPhone App

Android App

Blackberry App

API

Page 42: PHP in a mobile ecosystem

Optimize APIs for mobile

Content optimization

Scalability

Longevity

Security

Client/Server considerations

Page 43: PHP in a mobile ecosystem

Content Optimization

Consider CPU and memory constraints

Prefer JSON over XML

Compress data

Keep responses small

But not too small (connection / routing overhead)

Page 44: PHP in a mobile ecosystem

Scalability

AppStore featured/top listings Slashdot effect

Consider the 80/20 rule of app popularity though

Page 45: PHP in a mobile ecosystem

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

Page 46: PHP in a mobile ecosystem

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

Page 47: PHP in a mobile ecosystem

API Security

TLS/SSL

Basic Auth

OAuth? XAuth!

PKI / TLSAuth

Signed URLs:

?x=1&y=2 &signature=hash(secret, time limit, params)

Page 48: PHP in a mobile ecosystem

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

Page 49: PHP in a mobile ecosystem

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

Page 50: PHP in a mobile ecosystem

Part 4Best of Both Worlds

Page 51: PHP in a mobile ecosystem

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

Page 52: PHP in a mobile ecosystem

Cross Compilers = Instant Coffee

Page 53: PHP in a mobile ecosystem

Part 5Random bits if time permits

Page 54: PHP in a mobile ecosystem

Running PHP on the device

First: Why??!

PHP For Android (PFA)

http://phpforandroid.net/

PAMP for Symbian

http://wiki.opensource.nokia.com/projects/PAMP

Page 55: PHP in a mobile ecosystem

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

Page 56: PHP in a mobile ecosystem

‘Lemon ADE’ AST editor

Page 58: PHP in a mobile ecosystem

Thank [email protected] http://www.egeniq.com @ijansch @egeniq

Please leave feedback at: http://joind.in/2486

Page 59: PHP in a mobile ecosystem

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/

‘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/