Using XHP with Bootstrap

XHP is a great way to safely create HTML user interfaces from PHP or Hack. We love how extensible it is, allowing you to create your own pseudo-elements that are composed of more basic building blocks - ultimately a series of HTML tags. This solves a similar problem to partial templates in other systems. At its most basic level, XHP provides an XML-like syntax for creating stringable objects representing markup:

1
2
3
4
5
6
7
8
9
10
11
<?php
function render_without_xhp($css_class, $content) {
  // Use htmlspecialchars() in case $content contains
  // '<script>do_malicious_stuff();</script>' or similar
  print '<span class="'.htmlspecialchars($css_class).'">'.
    htmlspecialchars($content).'</span>';
}

function render_with_xhp($css_class, $content) {
  print <span class={$css_class}>{$content}</span>;
}

Today, we’re releasing XHP-Bootstrap (source is on GitHub), combining the safety of XHP with the power of the popular Bootstrap framework; for example, you can create a dropdown menu like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
print
  <bootstrap:dropdown>
    <bootstrap:button>
      Dropdown
      <bootstrap:caret />
    </bootstrap:button>
    <bootstrap:dropdown:menu>
      <bootstrap:dropdown:item href="#">
        Foo
      </bootstrap:dropdown:item>
      <bootstrap:dropdown:item href="#">
        Bar
      </bootstrap:dropdown:item>
      <bootstrap:dropdown:item disabled="true" href="#">
        Disabled
      </bootstrap:dropdown:item>
    </bootstrap:dropdown:menu>
  </bootstrap:dropdown>;

This produces the following:

The documentation includes live examples for all supported elements, including dropdowns.

One common question is why you’d want to do this instead of just using the CSS classes that bootstrap recognizes directly - there’s a few major advantages which can dramatically reduce debugging/development time:

• Validation - typo’ing a class name in CSS just results in it being ignored - you’ll have a mis-rendered page, but not much debugging information.  HHVM will tell you if you use an invalid element name, and XHP will tell you about mistakes with the attributes

• Semantic markup (server-side) - the element name describes exactly what it is, instead of everything being a <div> or with the meaning being hidden in a class.

• Encapsulation/implementation hiding - creating complex CSS components often requires a markup tree that doesn’t actually make sense for the content (e.g. deeply nested <div>’s), but is needed to apply the required formatting. Doing this every time you want to use the components leads to duplicated code, and it’s very easy to make mistakes.

• Easier upgrade path - if Bootstrap makes incompatible changes or current behavior becomes deprecated, XHP-Bootstrap could automatically start using the new behavior with no changes to your code, or raise clear and easy-to-debug exceptions. This depends on how Bootstrap itself evolves in the future, and we hope to work with the community to decide on the best way for XHP-Bootstrap to handle any issues.

XHP is well-loved by our frontend engineers, and we wanted to make it more useful to the community - at one of Facebook’s hackathons (where we’re encouraged to work on anything that we wouldn’t usually) we decided that this would be a good first step. We’ve included all the basic components, and we’re looking forward to hearing your feedback.

Comments

• Irfan Raza: Great work guys.
• Josan: This is cool. I'm wondering what project I can use this with.
• chahid khamis: I need ur help. How.may i contact you?
• Fred Emmott: Could you file an issue at https://github.com/hhvm/xhp-bootstrap ? I'm also usually on freenode (nick: 'fred') during Pacific hours
• Facebooks XHP in inniger Einigkeit mit Bootstrap - entwickler.de: […] Vorteile findet man in der Vorstellung Using XHP with Bootstrap. Das Projekt selbst findet man auf GitHub. Alles, was man dann noch benötigt, ist die HHVM und […]
• Cobis: Excellent. But may be you want to try this other tool: http://codecanyon.net/item/boothelp/11636009