Jump to content

Requests for comment/HTML templating library/Knockoff - Tassembly/Mobile spike

From mediawiki.org

The mobile web team dedicated 4 man-hours to answering the question "Could we use Knockoff client side templates right out of the box?" In other words, could we translate our existing templates into Knockoff syntax, swap our existing Hogan template parser for the Tassembly template parser, and get appropriate HTML output within MobileFrontend? If not, what needs to change?

First, I will explain how Knockoff/Tassembly was set up for testing. The file tassembly.js was added to MobileFrontend/javascripts/externals/ and added to the mobile.templates ResourceLoader module definition. The hogan.js file was removed from the module. In MobileFrontend/javascripts/common/templates.js, the line return Hogan.compile( templateBody ); was changed to return tassembly.compile( templateBody );. Hogan templates were manually translated into Knockoff syntax and then precompiled into Tassembly templates (from the command line: node knockoff.js < knockout-template.html > tassembly-template.json).

The preliminary answer is that Knockoff/Tassembly cannot currently be swapped in to replace Hogan without some changes. Some of the issues include:

  1. ResourceLoader seems to expect that all templates are .html files. Tassembly templates are JSON.
    This issue can be solved by using the Mantle extension.
  2. Some MobileFrontend templates need logic that exists outside of tags (for example, the error messages in NotificationsOverlay.html). Knockoff currently requires all logic to be within tags. It should be fairly easy to add this functionality to Knockoff, however, as it is already supported in Knockout (via containerless control flow syntax).
    Gabriel says he's going to look into adding support for this to Knockout within the next week.
  3. Tassembly compiles templates into rendering functions. The MobileFrontend View code expects compiled templates to be objects with a rendering function.
    This is easy to change in MobileFrontend.
  4. Tassembly adds template-partials at compile time. MobileFrontend adds template-partials at render-time.
    Render-time support now added to Tassembly.[1]

One additional issue is that Tassembly (the template rendering engine) requires that templates be pre-compiled from Knockoff syntax into Tassembly syntax. This is currently done manually via a node.js script. It may be possible to move this functionality into ResourceLoader and have the Tassembly versions cached, but this would add an extra layer of complexity to the rendering process. It may also be possible to combine Knockoff and Tassembly into one client-side template processor, but this would likely result in significant performance degradation and overhead increase for the client. Kaldari (talk) 23:26, 27 June 2014 (UTC)[reply]