WEB 2.0: BUILDING RICH INTERNET APPLICATIONS WITH PHP Wil Sinclair Manager, Advanced Technology Group

Zend TestRunner Prototype Implemented by Stas Malyshev and Matthew Weier O’Phinney in just 3 developer days Built with Zend Framework 1.5 and Dojo 1.0 Data is provided by PHPUnit running against the full suite of Zend Framework unit tests Data is pushed to the client by a prototype Comet server implemented in pure PHP | Jun 2, 2009 Name of this section |

Implemented by Stas Malyshev and Matthew Weier O’Phinney in just 3 developer days

Built with Zend Framework 1.5 and Dojo 1.0

Data is provided by PHPUnit running against the full suite of Zend Framework unit tests

Data is pushed to the client by a prototype Comet server implemented in pure PHP

Under the hood: System Diagram | Jun 2, 2009 Name of this section | Full Page Request/Response AJAX Request/Response Long Polling Request Unit Test Data Push

Under the hood: Zend Framework 1.5 Actually 1.5 RC1, the 1.5 GA will be available in the next few weeks Components used include Zend_Controller, Zend_View, Zend_Form, and Zend_Layout Filtering, validating, and displaying error messages are performed by the Zend_Form object and friends Asynchronous request for autocompletion is serviced by an action on the main controller | Jun 2, 2009 Name of this section |

Actually 1.5 RC1, the 1.5 GA will be available in the next few weeks

Components used include Zend_Controller, Zend_View, Zend_Form, and Zend_Layout

Filtering, validating, and displaying error messages are performed by the Zend_Form object and friends

Asynchronous request for autocompletion is serviced by an action on the main controller

Under the hood: Zend Framework Snippet | Jun 2, 2009 Name of this section | Initialization of Zend_Form

Under the hood: Dojo 1.0 dojox.charting and dojox.cometd used heavily Dojo implements the current draft version of the Bayeux spec for the Comet data protocol | Jun 2, 2009 Name of this section |

dojox.charting and dojox.cometd used heavily

Dojo implements the current draft version of the Bayeux spec for the Comet data protocol

Under the hood: Dojo Snippet | Jun 2, 2009 Name of this section | Bayeux Message Dispatch Method

Under the hood: Comet Server | Jun 2, 2009 Name of this section | Comet Server Send Method

Comet? An approach to application design, not a technology Server push adapted for today’s technologies and infrastructures, both on the client and everything between the client and the server Enables event-driven and real-time applications There are several specific techniques for implementing the transport layer on top of HTTP All of these techniques can be classified as either ‘streaming’ or ‘long polling’ To understand the rationale behind Comet, one must know something about the history of the web | Jun 2, 2009 Name of this section |

An approach to application design, not a technology

Server push adapted for today’s technologies and infrastructures, both on the client and everything between the client and the server

Enables event-driven and real-time applications

There are several specific techniques for implementing the transport layer on top of HTTP

All of these techniques can be classified as either ‘streaming’ or ‘long polling’

To understand the rationale behind Comet, one must know something about the history of the web

Evolution of the Rich Internet Application Simple request/response model Only full HTML documents can be downloaded User ‘widgets’ confined to HTML form elements and links Dramatically affects application design! | Jun 2, 2009 Name of this section | Traditional Web (Web 0.5a?)

Simple request/response model

Only full HTML documents can be downloaded

User ‘widgets’ confined to HTML form elements and links

Dramatically affects application design!

Evolution of the Rich Internet Application Simple request/response model doesn’t change Only full HTML documents can be downloaded, but some elements can be hidden ‘ Widgets’ still confined to HTML form elements and links, but now we can decorate them with styling and behavior Still affecting application design a lot | Jun 2, 2009 Name of this section | DHTML/JavaScript/CSS Web (Web 1.0)

Simple request/response model doesn’t change

Only full HTML documents can be downloaded, but some elements can be hidden

‘ Widgets’ still confined to HTML form elements and links, but now we can decorate them with styling and behavior

Still affecting application design a lot

Evolution of the Rich Internet Application Re-uses request response model from Web 1.0 Now partial pages can be downloaded and the current page updated through DOM Application ‘widgets’ now explode in both number and popularity Still entirely client-driven Application design, it is affected | Jun 2, 2009 Name of this section | AJAX Web (Web 2.0)

Re-uses request response model from Web 1.0

Now partial pages can be downloaded and the current page updated through DOM

Application ‘widgets’ now explode in both number and popularity

Still entirely client-driven

Application design, it is affected

Evolution of the Rich Internet Application Re-uses request response model from Web 1.0 A LOT Partial pages can still be downloaded and the current page updated through DOM ‘ Widgets’ similar to AJAX Web except they can now be updated without user input Still entirely client-driven, but we create the illusion of two-way communications Application design is affected, but mostly for performance and scalability reasons Particulaly bad for non-volatile data that changes aperiodically | Jun 2, 2009 Name of this section | Polling AJAX Web (Web 2.1)

Re-uses request response model from Web 1.0 A LOT

Partial pages can still be downloaded and the current page updated through DOM

‘ Widgets’ similar to AJAX Web except they can now be updated without user input

Still entirely client-driven, but we create the illusion of two-way communications

Application design is affected, but mostly for performance and scalability reasons

Particulaly bad for non-volatile data that changes aperiodically

Evolution of the Rich Internet Application Abuses request response model from Web 1.0 Partial pages updates can be initiated by a server event ‘ Widget’ similar to AJAX Web except they can now be updated without user input- just like polling AJAX True two-way communication* Application design is not affected Scalability issues exist, but are now solvable Uses technology built in to every major browser | Jun 2, 2009 Name of this section | AJAX/Comet Web (Web 2.5?)

Abuses request response model from Web 1.0

Partial pages updates can be initiated by a server event

‘ Widget’ similar to AJAX Web except they can now be updated without user input- just like polling AJAX

True two-way communication*

Application design is not affected

Scalability issues exist, but are now solvable

Uses technology built in to every major browser

Comet is a giant hack. Even when it works flawlessly and efficiently, bringing us real-time interactive applications, deftly weaving around firewalls and browsers, avoiding unfriendly side effects, and cutting latency to near zero, it does so using mechanisms unforeseen by browser vendors, and unspecified by web standards. - Jacob Rus PERFECT! NOT QUITE. | Jun 2, 2009 Name of this section |

Comet is a giant hack. Even when it works flawlessly and efficiently, bringing us real-time interactive applications, deftly weaving around firewalls and browsers, avoiding unfriendly side effects, and cutting latency to near zero, it does so using mechanisms unforeseen by browser vendors, and unspecified by web standards.

- Jacob Rus

Issues with Comet That whole transport layer thing There is currently no technique that implements streaming Comet consistently across all major browsers Some Comet techniques create visual artifacts Firewalls are sometimes configured to drop long-lived HTTP connections There are no standards for the data protocol | Jun 2, 2009 Name of this section |

That whole transport layer thing

There is currently no technique that implements streaming Comet consistently across all major browsers

Some Comet techniques create visual artifacts

Firewalls are sometimes configured to drop long-lived HTTP connections

There are no standards for the data protocol

Solutions for Comet WHATWG's HTML 5 specification addresses the transport problems Dojo Foundation’s Bayeux specification aims to standardize the client-server communication protocol | Jun 2, 2009 Name of this section |

WHATWG's HTML 5 specification addresses the transport problems

Dojo Foundation’s Bayeux specification aims to standardize the client-server communication protocol

Bayeux? All messages are encoded in JSON Implements a publish/subscribe model using named channels Uses 2 connections for 2-way communication Agnostic of transport layer, may be used on top of HTTP or other protocols May be used with or without authentication | Jun 2, 2009 Name of this section |

All messages are encoded in JSON

Implements a publish/subscribe model using named channels

Uses 2 connections for 2-way communication

Agnostic of transport layer, may be used on top of HTTP or other protocols

May be used with or without authentication

Bayeux Channels Clients usually subscribe and/or publish to channels typically named like “/segment-name/channel-name” Channels within the “/meta/” segment are reserved for the Bayeux protocol itself Channels within the “/service/” segment are reserved for request/response-style messaging between client and server | Jun 2, 2009 Name of this section |

Clients usually subscribe and/or publish to channels typically named like “/segment-name/channel-name”

Channels within the “/meta/” segment are reserved for the Bayeux protocol itself

Channels within the “/service/” segment are reserved for request/response-style messaging between client and server

Example of Bayeux Message [ { "channel": "/some/channel", "clientId": "Un1q31d3nt1f13r", "data": "some application string or JSON object", "id": "some unique message id“ } ] | Jun 2, 2009 Name of this section |

[

{

"channel": "/some/channel",

"clientId": "Un1q31d3nt1f13r",

"data": "some application string or JSON object",

"id": "some unique message id“

}

]

Alternatives to Comet/Bayeux Java Applets Java Web Start JavaFX Flash/Flex Silverlight Desktop Applications using web services AJAX polling | Jun 2, 2009 Name of this section |

Java Applets

Java Web Start

JavaFX

Flash/Flex

Silverlight

Desktop Applications using web services

AJAX polling

ANY QUESTIONS?

THANKS!