Backbone.js, Twig, and Drupal

At January's meet-up of the Portland Drupal Users Group, I presented on using Backbone.js and Twig with Drupal (slides).

Backbone.js is a web application framework that runs entirely on the client—that is, inside of the web browser. It allows you to write a snazzy front-end for a web app that provides a RESTful web service.

Front-end framework... called Backbone?

It's called Backbone because it gives structure to your JavaScript user interface code. So that, y'know, it has a "back bone." Keeping with the metaphor, there's another framework, inspired by Backbone, called Spine.

Example Backbone App

This simple todo-list app doesn't use any backend; it persists data in the browser's LocalStorage. Have a look at its annotated source code, as it's a great, short-and-sweet example of Backbone in action.

Why Backbone and Twig?

Backbone.js is included in Drupal 8 core, powering the new in-place editing interface; Twig has been adopted to replace PHP templates and theme functions.

In Drupal 8, Twig templates are rendered on the server, as PHP templates are now. But with Twig templates not containing PHP or other code that needs to run on the server, we can use Twig today, in the browser, with any version of Drupal. Twig's PHP implementation could also be grafted onto an older Drupal, to be used just for your custom templates. But I haven't needed to do that, so it's left as an exercise for the reader. So far, I've just used Twig client-side, where it needs only be integrated directly with Backbone. I chose one of the many JavaScript ports of Twig available: twig.js from John Roepke.

Integrating Twig with Backbone

There are many ways to accomplish using Twig templates instead of underscore.js templates (Backbone's default templating system). Here's a very simple method:

<script type="text/html" id="template-welcome">
  <h1 id="{{ html_id }}">{{ 'Welcome' | t }}<h1>
  {% if error_message %}
    <p class="error">{{ error_message }}</p>
  {% endif %}
</script>
var WelcomeView = Backbone.View.extend({
  template: twig({ data: $("#template-welcome").html() }),
  render: function() {
    var markup = this.template.render({
      html_id: "page-title",
      error_message: Drupal.t("DANGER!")
    });
    this.$el.html(markup);
    return this;
  }
});

This example shows a template that is shoe-horned into—err, I mean stored in—a <script> tag in your HTML. The raw content within the <script> tag is retrieved using jQuery and passed to the global twig() function, which compiles the template. When the view is rendered, we pass in any variables the template needs, like you do when calling theme() in Drupal. Unlike Drupal, there's no pre-template preprocess callback in this example, so the method invoking the template is solely responsible for what data goes into it. After rendering the template into a string of markup, we replace the view's HTML with that markup.

More in the Slides

This has been a brief introduction to Backbone and Twig. More information and links are in my slides, including an example of creating a JSON endpoint in Drupal that Backbone can query to retrieve model or collection data.