HTML5 for PHP Developers - IPC

HTML5 for PHP Developers

Thorsten Rinne I 25. September 2010
PHP UnConference Hamburg 2010

© 2010 Mayﬂower GmbH

Senior Developer / Team Lead
Head of Open Source Labs
@
MAYFLOWER GMBH

HTML5 for PHP Developers I Mayﬂower GmbH I 23. September 2010 I 2

@ThorstenRinne


Topic:

HTML5 for
PHP Developers

I won‘t talk about
<video> and <audio>


Yes,
Youporn is using
HTML5 video!


Who‘s already using
HTML5?


HTML5 in one sentence?


„HTML5 is about moving
from documents to
applications and from
hacks to solutions.“
Christian Heilmann on Twitter

HTML5 for developers?


HTML5 ~= HTML + CSS + JS


1999:
PHP 3.0 - MySQL 3.22
Apache 1.3

1999:
Internet Explorer 5.0
XMLHttpRequest Object

As time goes by ...


since 5.0 (1999)

since 1.0 (2004)

since 1.2 (2004)

since 7.6 (2004)

2005:
Ajax: A New Approach
to Web Applications
Jesse James Garrett: http://www.adaptivepath.com/ideas/essays/archives/000385.php

Google Suggest

Google Mail

Google Maps

2006:
Comet
Jesse James Garrett: http://www.adaptivepath.com/ideas/essays/archives/000385.php

Push


Push Ajax


Push Ajax

Push


Okay, what‘s happening?


Content
vs.
Context

Facebook is an
application!


Page
vs.
Stream

Twitter is an
application!


Applications?


Apps!


online == ofﬂine == online


Is this the new web?


The future is a web app!


The mobile browser ...

I ... is identical to the desktop browser
I ... speaks HTML5
•Geolocation support
•Websockets support
•Ofﬂine apps
I Faster update cycles than on the desktop
I it‘s a

cross plattform realtime runtime

But what about HTML5?
And what about PHP?


2000: PHP chat style polling

Client Server



Hey, Wazzup?

Client Server


Um,
nothing,
actually.
Hey, Wazzup?

Client Server


Um,
nothing,
actually.
Hey, Wazzup?

1 sec ...
Client Server



WTF ?!

Client Server


1 User = 1 req / sec
CPU #FAIL


2006: COMET style long poll

Client Server



Hey, Wazzup?

Client Server


Um, nothing,
actually ...
Hey, Wazzup?

Client Server



well ...
Hey, Wazzup?

Client Server



wait ...
Hey, Wazzup?

Client Server


Uh, there is
something ...
Hey, Wazzup?

Client Server



No, nothing.
Hey, Wazzup?

Client Server



WTF ?!

Client Server


1 User = 1 Apache child
MEMORY #FAIL


MEMORY: WIN
CPU: 1/2 WIN


Client PHP-
Server

Client

Client


WebSockets to the rescue!
var ws = new WebSocket("ws://example.com/service");

ws.onopen = function() {
ws.send("message to send"); ....
};

ws.onmessage = function (event) {
var received_msg = event.data; ...
};

ws.onclose = function() {
// websocket is closed.
};


WebSockets & PHP
I http://code.google.com/p/phpwebsocket/
I Currently an ugly hack
I But quite easy:

list($resource,$host,$origin) = getheaders($buffer);
$upgrade = "HTTP/1.1 101 Web Socket Protocol Handshakern" .
"Upgrade: WebSocketrn" .
"Connection: Upgradern" .
"WebSocket-Origin: " . $origin . "rn" .
"WebSocket-Location: ws://" . $host . $resource .
"rnrn";

$handshake = true;
socket_write($socket,$upgrade.chr(0),strlen($upgrade.chr(0)));


More logic will move to the
client... the browser!


Web Worker
I Multi-threaded JavaScript
I Easy example:

main.js:
var worker = new Worker('backgroundtask.js');
worker.onmessage = function(event) { alert(event.data); };

backgroundtask.js:
self.onmessage = function(event) {
// Do some tough work...
self.postMessage(some_data);
}


Ofﬂine Application Cache
index.html:

<html manifest="cache.manifest">
window.applicationCache.addEventListener('checking',
updateCacheStatus,
false);

cache.manifest:

CACHE MANIFEST

CACHE:
/html5/demo/index.html
/html5/demo/style.css
/html5/demo/background.png


Web Messaging
<iframe src="http://www.example.org/message/" id="iframe">
</iframe>

<form id="form">
<input type="text" id="msg" value="Message to send"/>
<input type="submit"/>
</form>
<script>
window.onload = function() {
var win = document.getElementById("iframe").contentWindow;
document.getElementById("form").onsubmit = function(e) {
win.postMessage(document.getElementById("msg").value);
e.preventDefault();
};
};
</script>


Web Messaging
<strong>This iframe is located on www.example.com</strong>
<div id="test">Hello, World!</div>
<script>
document.addEventListener("message", function(e){
document.getElementById("test").textContent =
e.domain + " said: " + e.data;
}, false);
</script>


WebStorage
I Short living data
I sessionStorage object
I will be deleted after closing the browser
I Long living data
I localStorage object
I will not be deleted after closing the browser


WebStorage
if (!sessionStorage['counter']) {
   sessionStorage['counter'] = 0;
} else {
   sessionStorage['counter']++;
}

document.querySelector('#content').innerHTML =
  '<p>This sample has been run ' +
sessionStorage.getItem('counter') +
' times</p>' +
  '<p>(The value will be available until ' +
we close the tab)</p>';


Web SQL Database
var db = window.openDatabase("Database Name",
"Database Version");
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM test",
[],
successCallback,
errorCallback);
});


Geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var options = {
position: new google.maps.LatLng(lat, lng) }
var marker = new google.maps.Marker(options);
marker.setMap(map);
});
}


Drag and Drop API
<li draggable="true" id="pic1" ondragstart="drag(this, event)">
<span>foobar.png</span>
</li>

<div id="trash" ondrop="drop(this, event)" ondragenter="return
false" ondragover="return false"></div>

function drag(target, e) {
e.dataTransfer.setData('Text', target.id);
}
function drop(target, e) {
var id = e.dataTransfer.getData('Text');
target.appendChild(document.getElementById(id));
e.preventDefault();
}


Using the File API (I)
var reader = new FileReader();
reader.onload = function(e) {
var bin = e.target.result;
// „bin“ is the binary string
};
reader.readAsBinaryString(file);


Using the File API (II)
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php");
xhr.overrideMimeType('text/plain;
charset=x-user-defined-binary');
xhr.sendAsBinary(bin);


Using the File API (II)
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php");
xhr.overrideMimeType('text/plain;
charset=x-user-defined-binary');
xhr.sendAsBinary(bin);

xhr.upload.addEventListener("progress", function(e) {
if (e.lengthComputable) {
var percentage = Math.round((e.loaded * 100) / e.total);
// do something
}
}, false);


This was just the JavaScript
beginning...


What‘s left for us
PHP developers?


HTML5 is part of an
application framework!


The LAMP stack gets a
bust of Janus

real time web component

web application component


PHP developers have to
learn JavaScript as well!


Modern PHP applications
use both:

JavaScript PHP
50% 50%


<!DOCTYPE html>


HTML5 page structure
<header>
<hgroup>
<nav>
<article>
<footer>

HTML5 article structure

<section>
<aside>


New semantic tags
<time>
<details>
<figure>
<figcaption>
<mark>


New link relations

<link rel="alternate" type="application/rss+xml" href="http://www.php.net/feed">
<link rel="icon" href="/favicon.ico">
<link rel="pingback" href="http://www.phpmyfaq.de/xmlrpc.php">
<link rel="prefetch" href="http://www.phpmyfaq.de/main.php">
...
<a rel="archives" href="http://www.phpmyfaq.de/archives">Old posts</a>
<a rel="external" href="http://www.php.net">PHP Homepage</a>
<a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">License</a>
<a rel="nofollow" href="http://www.ruby-lang.org/">Ruby Homepage</a>
<a rel="tag" href="http://devblog.phpmyfaq/category/PHP">PHP tagged postes</a>


WebForms
<input placeholder="Search Bookmarks and History">

after clicking...


WebForms
<input maxlength="256" name="q" value="" autofocus>

<input maxlength="256" name="q" value="" required="true">


WebForms
<input type="tel"> for telephone numbers
<input type="url"> for web addresses
<input type="email"> for email addresses


WebForms
<input type="number" min="0" max="10" step="2" value="6">

0
2
4
6
8
10


WebForms
<input type="range" min="0" max="10" step="2" value="6">


Datepicker WebForms
<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime">
<input type="datetime-local">


WebForm Color picker
<input type="color">


contenteditable
<p contenteditable="true">Edit foobar!</p>

I Save it with
I sessionStorage
I localStorage
I PHP powered backend with Ajax :-)


<canvas>
<canvas id="canvas" width="838" height="220"></canvas>

<script>
var canvasContext = $("#canvas").getContext("2d");
canvasContext.fillRect(250, 25, 150, 100);

canvasContext.beginPath();
canvasContext.arc(450, 110, 100,
Math.PI * 1/2, Math.PI * 3/2);
canvasContext.lineWidth = 15;
canvasContext.lineCap = 'round';
canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
canvasContext.stroke();
</script>


WebGL


Have fun with HTML5!


And what about CSS3?


New selectors

.row:nth-child(even) { background: #cccccc; }
.row:nth-child(odd) { background: #ffffff; }

row 1

row 2

row 3

row 4


The state of WebFonts...

@font-face {
font-family: 'FuturaNew';
src: url(FuturaNew.otf);
}
header {
font-family: 'LeagueGothic';
colour: red;
}

No font replacement! :-)

More new CSS3 features...

I better font support
I better text wrapping
I columns
I opacity
I Hue/saturation/luminance color model
I Rounded corners, ﬁnally! ;-)
I Gradients
I Shadows
I better backgrounds
I transitions
I animations

HTML5 readiness


HTML5 readiness
86 %
77 % 79 %
72 %

26 %

IE8 Firefox 3.6 Chrome 5.0
Safari 5.0
Opera 10.5

HTML5 readiness
2010


HTML5 readiness
Cross- content New
getElementsBy
document semantic <video> <audio>
editable ClassName()
messaging tags

IE 8.0

FF 3.6

Chrome 5

Safari 5

Opera 10.5

HTML5 readiness
Basic Text API for Ofﬂine Web HTML5
<canvas> Drag n Drop Inline SVG
<canvas> Applications WebForms
support

IE 8.0

FF 3.6

Chrome 5

Safari 5

Opera 10.5

HTML5 readiness
201 1


HTML5 readiness
Cross- content New
getElementsBy
document semantic <video> <audio>
editable ClassName()
messaging tags

IE 9.0

FF 4.0

Chrome 6

Safari

Opera

HTML5 readiness
Basic Text API for Ofﬂine Web HTML5
<canvas> Drag n Drop Inline SVG
<canvas> Applications WebForms
support

IE 9.0

FF 4.0

Chrome 6

Safari

Opera

But...


Browser stats 2010
IE 8.0 29,0 %
Firefox 3.6 24,0 %
IE 7.0 13,0 %
IE 6.0 7,5 %
Chrome 6.0 6,4 %
Chrome 5.0 4,5 %
Firefox 3.5 4,4 %
Safari 5.0 2,9 %
Firefox 3.0 2,4 %
Opera 10.6 1,4 %
Safari 4.0 0,8 %
Firefox 2.0 0,4 %
Other 2,9 %

StatCounter Global Stats

What‘s already safe for
using?


contenteditable
postMessage (same domain)
postMessage (cross domain)
WebStorage with IE 8+


Any help?
A cool JavaScript library!
e.g. Modernizr


HTML5 helper No.1


Questions?


Thank you very much!

Contact Thorsten Rinne
thorsten.rinne@mayflower.de
+49 89 242054-31

Mayflower GmbH
Mannhardtstr. 6
80538 München

© 2010 Mayflower GmbH

HTML5 for PHP Developers - IPC

Recommended

More Related Content

Viewers also liked (13)

Similar to HTML5 for PHP Developers - IPC (20)

More from Mayflower GmbH (20)

Recently uploaded (20)

HTML5 for PHP Developers - IPC