Вы находитесь на странице: 1из 47

Web 2.

Open APIs
Ground Up
Like beef!
Email & SMS
Combine ingredients. Amy Hoy, OmniTI
Shake well. http://www.ahoyhere.com/
in v2.0!
Web What?
• “Web 2.0” is buzzword-compliant
• Some smart people even say we’re on
version 3.0 by now...

• But it’s handy for encapsulating a whole

mess of cool, modern stuff that’s going
What I’m Covering
• What Web 2.0 means — on every level
• How to plan for Web 2.0 features
(existing and crazy future stuff) up

• How to create PHP apps which are easy

to upgrade later with Web 2.0 goodies

• How (and when) to use Ajax in your

PHP applications

• Other cool stuff you can do

And That Means...?
• Web As Platform™!
• Improved and alternate interfaces
(emails, SMS)

• Openness: APIs and web services.


• Less broadcast, more podcast

• Give users control

Web 2.0 Culture

culture, noun
[with adj.] the attitudes and behavior characteristic
of a particular social group
Web 2.0 is...
• Not just technology
• What makes Web 2.0 particularly
interesting is that it’s a culture, and an

• People are very passionate about it

• Trying to implement Web 2.0
technology without embracing the
culture is a great way to mark yourself
as a “clueless suit”
The Remix Culture
• No, you didn’t stumble into a talk on

• The “Remix Culture” is a big part of the

whole Web 2.0 mystique

• Remixing and mashups occur when

data and services that would otherwise
be closed and proprietary are opened

• Then people can combine them

Cool Remixes
• Ajax / Google Maps real-time server
monitoring — http://www.kosmo.com/

• Housing Maps — http://


• Mappr — http://www.mappr.com/ and

Colr — http://krazydad.com/colrpickr/

• More coming soon!

Housing Maps
• Web 2.0 is largely driven by hobbyists
• Even the companies doing it create a
hobbyist-type atmosphere (Google,

• The key is passion, and personal interest

• People are doing stuff they’re really into,
and so others are into it too

• Often the idea is to help others in some

• Most successful Web 2.0 endeavors
are focused on community in some

• Whether it’s mapping available

housing from Craigslist on your local
Google Maps area, or browsing Flickr
photos by the color wheel, or getting
people together to talk about their

• The focus on community, or servicing

the community, is part of the
Components of Web 2.0
What is Syndication?
• All those little orange buttons
on web sites...

• Most periodically updated web

sites have syndication files
called feeds

• No more visiting each web site

you follow to see if it’s updated

• XML-based feed formats allow

readers to get updated site
content in their favorite reader
Where It’s Used
• Blogs — they started the syndication

• Podcasting — the magic of podcasting

are special RSS feeds used to funnel
MP3 files to iPods or other players

• Community Content — del.icio.us,

43Things, Flickr, etc., let people keep
up to date on people, topics, tags,
projects (Basecamp), and more.
Why It’s Awesome
• It makes it possible to keep track of
many more web sites/topics than is
feasible to visit daily

• It puts the power in the hands of the


• It’s purely about content

• It allows for sites to share or aggregate
content from multiple sources
Syndication Formats
• Really Simple Syndication (RSS)
started it all

• Atom (No Acronym) is slightly more

complex than RSS, but very similar

• The RSS vs Atom holy wars are

apparently never ending, but it’s not
really a big deal either way
Open APIs
• API stands for Application
Programming Interface

• But really, a great explanation is

“How my software can get to your

• APIs make closed web sites and

services open and usable from
look! remote web sites or software
it's open!
• eBay, Amazon, Google Maps, etc., all
have great open APIs—and they’re
Why It’s Awesome
• They can create customer evangelists
• Letting go of your data lets “a thousand
flowers bloom”

• Your users can do things you would

never have the time or resources (or
idea) to do

• It creates some of that “authenticity”

for your company and creates
community, too
Ajax & Javascript
• Ajax is really an acronym for
Asynchronous Javascript and XML

• It’s the same thing as

XMLHTTPRequest but easier to say

• Ajax is simply a way of reducing

browser reloading and increasing

• Javascript is finally coming into its

own—and being coded like a real first-
class language
Why It’s Awesome
• Update your web page—without

• Effect change on the back end, and

display results—without reloading

• Faster, better web experience for most


• Doesn’t take much to add to your web

Look! A Kitty!
The Code
Ground-Up Planning
• Soylent Planning is People!
• No, I won’t stop making
ground-up puns
• But it’s never a bad idea to
think about all the Web 2.0-
ish features you’d like
before starting

• A LITTLE up-front design

never hurt anyone
Top Down
Plan for Not Planning
• Big Up Front Design (BUFD) is bad for
apps which must change at the speed
of the web

• A little planning, however, can result in

apps which are easy to upgrade,
maintain, extend, Web 2.0ify, and other
buzzwordy things

• And you don’t have to be a Comp Sci

major to pull it off
MVC + Agile + You
• Model, View, Controller (MVC) is a
good design pattern for web dev

• Separation of these three layers aids in

implementing Web 2.0 goodness

• And other stuff, too

• Also, Agile development techniques
can help you keep up with the dizzying
What’s MVC?
• A design pattern created incoming request
for applications with GUI

• Models = classes to handle Controller

database transactions for a

content type (e.g. Clients) kinda like my ex

• Views = PHP/HTML View Model

templates - view logic only View Model

ooh, pretty pictures! here be data
• Controller = PHP glue, tie it
all together for incoming
Why Use MVC?
• Not just separation of content and

• Separation of database ops (Create,

Read, Update, Delete - CRUD) and code
that will call those ops

• Makes it easy to access the content for

any purpose

• Makes it easy to add spiffy stuff to any

layer, esp. things like Ajax
Why, Illustrated
MVC Layers Embedded Approach
Presentation Presentation Presentation

HTML Database
Fetching/Returning Data Presentation


• Separation allows maximum reuse of logic (using

the model to perform database ops)

• Inserting new layers is easy

Super Simple Blog
Adding New Stuff
the controller... takes an incoming request and
Front Page searches for blog entries using Content Class
Template includes Front Page Template (which iterates
index.tpl.php over blog entries array)

Controller By simply adding logic in the controller

index.php to use a different template when the user visits
you can add RSS support without recoding
Content Class
BlogPost.php RSS Feed
Less Simple Store Site
Adding New Stuff
Whole Mess 'o'
Template Files The controller takes incoming
Category requests and includes the right
Controller individual item controller file

Controller Customer The individual controllers use the

index.php Controller model classes to create, read,
con.customer.php update, and delete database
entries and then they call the
Product right templates to display
Category Model Controller whatever needs to be displayed
Category.php con.product.php

Product Model
Product.php Adding an Ajax response is
Ajax "Add Product" Template
as easy as checking if ajax.tpl.add_item.php
Customer Model the request is Ajax,
Customer.php and including a different
• Ajax is a way of short-
circuiting browser

• All it does is make a

super secret background
HTTP request to your
web application

• Then you can use

Javascript to display the
results, if you want
Anatomy of Ajax Requests
Typical Request Ajax Request

Browser Request Browser Request

Web Web
Server Server

Your Script Your Script

Ways to Ajax
• There is no single approach called

• “Ajax” is really more of an idea—even

though it’s XMLHTTPRequest

• Ajax is pretty awkward in PHP because

the existing approaches are mostly
geared towards “Ajax frameworks”

• Frameworks aren’t a bad idea, but it’s

overkill for what Ajax really entails
Can the Frameworks
• I don’t really like people telling
me that to get some simple
Javascript working, I need a
whole new framework

• One way to learn to do

something right is to look at
frameworks who else is doing it right, and
in this case it’s Ruby on Rails

• Ruby on Rails partially

prompted the development of
some awesome Javascript
Ajax Isn’t...
• A big deal (more on this later)
• Proprietary to any language (other
than Javascript, obviously)

• Incompatible with modern browsers

• Incredibly backwards compatible
• Just for XML
• What you call just any Javascript
interaction in a site
Ajax the Easy Way
• Use the Javascript library called

• It’s MIT-licensed and really great

• But creating Ajax requests takes just a
couple lines of Javascript

• Scriptaculous is a cool add-on

Types of Ajax
• Links — text, images,
checkboxes, “Click Here”

• Forms — whole forms

• Forms — single fields
(form observers)

• Timed updates
An Ajaxed Link
HTML + Javascript
<!-- basic link -->
<h2>ajax replacing link</h2>
<a href="ajax_test.php?return=time"
onclick="new Ajax.Updater('test_div',
{asynchronous:true, evalScripts:true }
return false;">
This link updates a line</a>
<div id="test_div"></div>

if($ajax) {
header("Content-Type: text/xml");
echo "\n".'<p>',date("F j, Y, g:i:s a"), '</p>';
Ajax Autocomplete
HTML + Javascript
<h2>auto complete</h2>
<input type="text" id="snack" name="snack"
autocomplete="off" />
<div id="snack_auto_complete"></div>
<script type="text/javascript">
new Ajax.Autocompleter("snack",
if($ajax) {
header("Content-Type: text/xml");
echo '<ul><li>Yay! It worked!</li></ul>';
Now, The Back End
• If your application design even
approximates MVC, adding in Ajax is
super easy

• You don’t have to know (or send) XML

• All you have to do is determine if an
incoming request is from Ajax or not, and
return a different set of HTML

• Just avoid returning your whole page

design—just the pertinent result
'XMLHttpRequest' ? true : false);

case 'search':
if($ajax) {
header("Content-Type: text/xml");
echo '<b>You searched for:</b>'.$_POST['q'];
else {
echo '<h2>regular submission</h2>';
echo 'You submitted the form normally.';
Debugging Ajax
• Since there’s no reloading action going
on, it’s a bit harder to debug

• But Firefox—and Greasemonkey—are

your friends

• Download and install:

• Live HTTP Headers
• Tamper Data
• XmlHttpRequest Debugging (G.M.)
Ajax & UI
• There are concerns about Ajax and the
traditional Web model of interaction

• Don’t just use Ajax for Ajax, only use it

where it really enhances your interactivity

• If you plan to require Ajax, be prepared to

not support old browsers—think of your

• Look online for Ajax interaction patterns &

UI advice
Parting Thoughts
• Web 2.0 is exciting, thrilling,
sometimes a bit trying, and a number
of other *ings

• If you want to be cutting edge, you have

to work at it

• But it doesn’t have to be hard

• There’s a big community out there to
support you if you take the plunge
More Information
• I’ll be posting my slides, links, and the
code I’ve used (HTML/Javascript and
PHP) on my web site

• http://prototype.conio.net/
• http://script.aculo.us/