WEB 2.0: BUILDING RICH INTERNET APPLICATIONS WITH PHP

Copyright © 2007, Zend Technologies Inc.

WEB 2.0: BUILDING RICH INTERNET APPLICATIONS WITH PHPWil 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

| Apr 13, 2023Name of this section | 2

Under the hood: System Diagram

| Apr 13, 2023Name of this section | 3

Full Page Request/Response

AJAX Request/Response

Long Polling RequestUnit 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

| Apr 13, 2023Name of this section | 4

Under the hood: Zend Framework Snippet

| Apr 13, 2023Name of this section | 5

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

| Apr 13, 2023Name of this section | 6

Under the hood: Dojo Snippet

| Apr 13, 2023Name of this section | 7

Bayeux Message Dispatch Method

Under the hood: Comet Server

| Apr 13, 2023Name of this section | 8

Comet Server Send Method

Comet?

| Apr 13, 2023Name of this section | 9

• 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

| Apr 13, 2023Name of this section | 10

• Simple request/response model

• Only full HTML documents can be downloaded

• User ‘widgets’ confined to HTML form elements and links

• Dramatically affects application design!

Traditional Web (Web 0.5a?)

Evolution of the Rich Internet Application

| Apr 13, 2023Name of this section | 11

• 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

DHTML/JavaScript/CSS Web (Web 1.0)

Evolution of the Rich Internet Application

| Apr 13, 2023Name of this section | 12

• 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

AJAX Web (Web 2.0)

Evolution of the Rich Internet Application

| Apr 13, 2023Name of this section | 13

• 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

Polling AJAX Web (Web 2.1)

Evolution of the Rich Internet Application

| Apr 13, 2023Name of this section | 14

• 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

AJAX/Comet Web (Web 2.5?)

“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

| Apr 13, 2023Name of this section | 15

PERFECT!NOT QUITE.

Issues with Comet

| Apr 13, 2023Name of this section | 16

• 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

| Apr 13, 2023Name of this section | 17

• WHATWG's HTML 5 specification addresses the transport problems

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

Bayeux?

| Apr 13, 2023Name of this section | 18

• 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

| Apr 13, 2023Name of this section | 19

• 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

| Apr 13, 2023Name of this section | 20

[ {

"channel": "/some/channel","clientId": "Un1q31d3nt1f13r","data": "some application string or JSON object","id": "some unique message id“

}]

Alternatives to Comet/Bayeux

| Apr 13, 2023Name of this section | 21

• Java Applets

• Java Web Start

• JavaFX

• Flash/Flex

• Silverlight

• Desktop Applications using web services

• AJAX polling

Copyright © 2007, Zend Technologies Inc.

ANY QUESTIONS?

Copyright © 2007, Zend Technologies Inc.

THANKS!