Yesterday afternoon I Tweeted this:
I thought it might be worth explaining what I was talking about, using a metaphor lots of people would understand. So, consider a blueberry pie. To bake a blueberry pie, you assemble your ingredients, do some mixing and combining and stick it in the oven. Let’s say, though, that after the pie is out of the oven and cooled, a picky young man with short blond hair says “but Mom, I wanted cherry pie!” Being the outstanding parent you are, you lift the top off the pie, pick out every single blueberry and replace them with cherries. (I know, just go with it.) Remember that, it’ll be important in a few minutes.
On another day, you’re preparing your pie ingredients when the aforementioned picky young man again requests a cherry pie instead of blueberry. This time, you can replace the blueberries with cherries before mixing the ingredients and baking the pie. Same result, but one is clearly easier and less disruptive on the final product.
Finally, the pie is done and you cut a slice. Look at the cross-section of that slice of pie. You have a crust, filling, berries, maybe some ice cream or whipped cream on top. That’s the structure of the completed pie that’s ready to eat.
How does this tasty metaphor apply to Web pages, and specifically to my not-entirely informative Tweet?
A Web page, like a pie, has a structure that can be examined. It has text, images, colors, different fonts, maybe some embedded video clips. These are all elements that make up the structure of the Web page. This structure is called the Document Object Model, or DOM–for purposes of this post it’s not important what that means, but where you see “DOM” you can read “bits and pieces that make up a Web page.”
Let’s say you want to change one of these elements. You could do it after the page has been loaded (the Web browser is showing the page) or you could do it before the page has been sent to the Web browser. Changing the elements of the Web page after it has been loaded is usually done with JavaScript, which is code that runs in the Web browser and is analogous to removing the blueberries after the pie is baked. Changing the elements before the Web page is sent to the browser is, in this instance, done with PHP, which is code that runs on the Web server. This is like adjusting the pie recipe before mixing the ingredients.
The major difference, and why I was excited to discover this capability of PHP, is that adjusting or changing the Web page after it’s been loaded (with JavaScript) is about as simple as removing blueberries from a fully-baked pie. It depends on the capabilities of the Web browser viewing the page and in some cases of the OS running the Web browser. It also adds to the total amount of data sent from the Web server down to the browser (all content [text, images, video, etc] plus the extra code which runs after the page has loaded) and is just generally inefficient.
On the other hand, the ability of PHP to change the contents and structure of a Web page while its still in ingredient form and hasn’t been mixed and baked means that what’s sent down to the Web server is already what I want it to be and I can tweak it as much as I need to before it’s served.
This is a drastic oversimplification, of course–there are plenty of good reasons to fiddle with the DOM using JavaScript once the page has loaded; Web applications like Gmail, Twitter and even WordPress use this capability all the time to change, add or delete elements of the page without making a round trip back to the server. There are also lots of applications where large-scale preprocessing is done on the server with PHP and final tweaks are done in the browser, often depending on the specific browser and version being used. However, the pie metaphor does make a good high-level explanation of this aspect of Web page development.
At least, I think it does. What do you think? Comments welcome.
