Loading...

Facebook f8: Open Source PHP development using XHP

Submitted by: etlgfx
Updated: ; Posted:
Facebook f8 getting ready for an Open Tech talk

Introduction

XHP is was developed by Facebook as a templating language to make front end code easy to understand. XHP is a PHP extension which augments the syntax of the language such that XML document fragments become valid PHP expressions. This allows you to use PHP as a stricter templating engine and offers much more straightforward implementation of reusable components.

The XML document fragments is a key concept here, and much like XML proper you can define something similar to a DTD for the language that basically describes which elements are allowed or expected where and in what order. Instead of using a flat DTD file and strict XML syntax they opted for a object oriented PHP class mechanism. I'm going to go through this step by step as it was presented to us in the talk.

A Simple example

<?php
if ($_POST['name']) {
?>
    <span>Hello, <?=$_POST['name']?>.</span>
<?php 
} else {
?>
    <form method="post">
    What is your name?<br>
    <input type="text" name="name">
    <input type="submit">
    </form>
<?php
}

Above you see an example of a really simple plain PHP template, below is the XHP equivalent version:

<?php
// note: includes omitted
if ($_POST['name']) {
  echo <span>Hello, {$_POST['name']}</span>;
} else {
  echo
    <form method="post">
      What is your name?<br />
      <input type="text" name="name" />
      <input type="submit" />
    </form>;
}

The two examples obviously look very similar but you'll notice a few things. There are no quotes around echo strings, as XHP basically interprets whatever follows an echo statement as an XML document fragment. Secondly, PHP variables are embedded inline with the rest of the echo strings. And third -- my personal favorite -- there is no context switching in and out of PHP.

Something that is decidedly less obvious here, but actually of more importance, is XHP's automatic variable escaping. Directly using the value of a $_POST variable can be dangerous as it leaves you open to cross-site scripting attacks. A malicious user could insert HTML with fancy script tags inside the $_POST variable. XHP automatically runs outputted variables through htmlspecialchars(). Since this is done automatically by the XHP extension, you don't need to worry about remembering to add the calls everywhere you do an echo or <?= ?>

Obviously there is a lot more you may want to do inside your templates, which is why XHP also supports function calls and ternary operators and whatnot inside the curly braces, it sounds like you can basically put any kind of PHP call inside the curly braces.

String Concatenation?

Since we're dealing with XML document fragments, string concatenation is not the way to go. XML likes to be a tree all the time, so instead of concatenating a bunch of strings, here is the XHP way of combining template shards:

<?php
$list = <ul />;
foreach ($items as $item) {
	$list->appendChild(<li>{$item}</li>);
}

DTD kind of

Continuing in the vein of XML fragments. If you where using XML (properly?) you would be defining a DTD to describe exactly what shape and format your XML tree is expected to be in. XHP has a similar object oriented PHP way of describing the structure of their documents.

class :fb:thing-box extends :x:element {
	attribute
		string title = "No Title",
		enum { "cool", "lame" } type;

	children (:fb:thing | :fb:thingy)*;
}
class :fb:layout extends :x:element {
	children (:fb:left-column?, :fb:content);
}

Basically the first class describes an element that can have two attributes: title and enum, and zero or more children named 'thing' or 'thingy'. The naming convention here should look extremely familiar to those who have worked with DTDs before, it's just encased in a PHP class.

The second class specifies the specific order you are expecting your elements to be in. First zero or one 'left-column' element, then a 'content' element. There are more things you can define using this language, but I'll leave that to the reader to find out from their github site linked here.

Notes

In PHP 5.3 you currently cannot use the [] operator on a function call. They mentioned that this will be included in PHP 5.4 and I believe it's already included in the XHP extension. This is definitely a welcome addition to the PHP language.

XHP apparently runs about 2-3x slower than using plain PHP templating using string concatenation. But the Facebook guys obviously thought the trade offs in easy of development, stricter definition of templates and reusability of components was worth the trade off. He also mentioned that Only about 1% of CPU time is spent on page rendering, so they were willing to take the tiny performance hit there.

My Opinion

I think this is a very interesting new templating language. It's clearly superior to using plain PHP templates. I've always hated working that way for most of the reasons mentioned here. XHP is definitely an interesting alternative to other templating tools like Smarty, which doesn't give you the strictness, but perhaps gives you slightly better performance and caching features than XHP and more flexibility.

I basically see XHP as a middle ground between using e.g. Smarty and XSLT for templating. XSLT is very rigid, because of everything being built directly on XML. You get the same DTD features (if you use them) and an extremely powerful querying language in XPath, but XSLT isn't very fault tolerant, doesn't perform very well, is extremely verbose.

Obviously any package you go with will be a trade off between features, performance, and flexibility. I'm not going to make a recommendation, as I haven't used XHP yet personally, but from what they presented, it looks pretty promising.

10:13a Sep 30th, '11

Good articles or blog posts and it is so very helpful.

Related Blog Posts