Skip to content

Instantly share code, notes, and snippets.

@caridy
Last active December 17, 2015 04:08
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save caridy/5548076 to your computer and use it in GitHub Desktop.
Save caridy/5548076 to your computer and use it in GitHub Desktop.
Template registration process in YUI

This gist was updated based on the discussion here : https://groups.google.com/forum/?fromgroups=#!topic/yui-contrib/cUpVvtoUBa8

Template Registration

With the ability to precompile templates into javascript and the abtraction layer provided by Y.Template to normalize the api to render those templates, we got one step closer to create applications that can be template language agnostic.

The premise here is to create a YUI Application that references templates by name and call for render when needed without having to know what engine to use, or what file generated the compiled template, or what api should be used for a particular template.

In order to facilitate this, we should have a centralized registration mechanism used by the application to register any template that is provisioned, in which case we can decouple the provisioning process from the actual rendering process.

Proposal

The initial proposal is to utilize Y.Template as the central hub for all those templates, and doing so by introducing three new static methods, register, unregister and render.

Register a template

To register a compiled template:

var revivedTemplate = Y.Template.register('templateName', template);

note: the revivedTemplate is probably the same as argument template, but just a guarantee that the function complies with the revive API in Y.Template.

note: the register method override any existing template with the same name. this will help with live updates in development mode.

Unregister a template

To unregister a template by name:

var wasRegisteredBool = Y.Template.unregister('templateName');

which returns a boolean in case you want to know if the template was previously registered.

Render a template

To render a registered template:

var html = Y.Template.render('templateName', data);

All together (in code):

var revivedTemplate = Y.Template.register('name', function (data) {
    return 'some string';
});
var someString = revivedTemplate({foo: 'foo'});

The means the function passed to register() should be a function which conforms to the above contract. It is up to the thing which precompiles it to encapsulate or close-over any underly template engine specifics.

var someString = Y.Template.render('name', {foo: 'foo'});
var wasRegisteredBool = Y.Template.unregister('name');

The example

A good example of this will be a nodejs application that uses YUI on the server side to precompile templates generating YUI Modules that can be use on-demand or required by our business logic, where those modules can do the provision of templates into the internal register, which guarantees that our business logic can render them. Some code:

Pre-compiled template into a module:

YUI.add('foo', function (Y, NAME) {
  var compiled = function (data) {
    /* compiled template */
    return '<html fragment>';
  };
  Y.Template.register('foo', compiled);
}, '', {requires: ['template-base']});

Where the business logic can require foo to guarantee the provision:

YUI.add('bar', function (Y, NAME) {
  var html = Y.Template.render('foo', {
    tagline: 'bar is now template language agnostic'
  });
}, '', {requires: ['foo']});

Few more notes

  • The internal cache mechanism should not be expensive
  • Y.Template._cache = {}; as the cache mechanism should be just fine.
  • Throwing when unregistered template is invoked
  • Y.Template.render vs Y.Template.prototype.render might be confused, we need to clearly state this in the docs.
  • The nature of the render method is syncrounous, hence any register template should be syncronous.
@tivac
Copy link

tivac commented May 9, 2013

@rgrove I'm curious about the assertion that we can't assume that template engines will be function(data) => html, isn't that what Y.Template already does for Y.Template.render? It does it via the template engine "interface", but still.

I agree with you conceptually that supporting other styles of template usage is important, but wouldn't those other template engines still need to implement the engine interface that Y.Template expects? I guess the argument can be made that since we're dealing with precompiled templates that the engine then becomes less important as you wouldn't want to load it anyways. It seems like any engine that is so different from what seems like the "standard" could be expected to provide a function(data) => html flow as part of the precompilation/revival process to use this API. Even if it was just a small translation module it'd still presumably be able to fit into this very basic model w/ a minimum of code.

Or maybe I'm totally off base here, I just don't know of any templating engines that work any other way off the top of my head so I'm having a hard time seeing how they'd fit. Granted, I haven't done super-extensive of research into templating solutions beyond the popular ones.

@rgrove
Copy link

rgrove commented May 9, 2013

@tivac Good point. I suppose if you assume that a registered template will always have been compiled with a Y.Template engine, then we can leave it up to the engines to ensure that their compiled functions always follow the same signature, regardless of the underlying implementation.

@caridy
Copy link
Author

caridy commented May 9, 2013

In my mind, Y.Template is not different from View constructor in express (aka app.set('view')), this thing defines a simple API for view engines to follow, but doesn't enforce too many things, it just have two rules:

  • when a new instance is created, name and options will be provided as constructor arguments.
  • the object requires to have path member and render() method that receive data and a callback function.

that's about it, nothing fancy, but the trick here is what @tivac just mentioned, if you have an engine that is too crazy to fit into that, just create a function that takes care of that normalization. In the context of Y.Template that's precisely what the revive process should do. E.g:

YUI.add('foo', function (Y, NAME) {
  var compiled = function (format, data) {
    /* compiled template */
    return '<html fragment>';
  }; 
  var helpers = {}; // collect helpers from somewhere
  Y.Template.register('foo', function (data, options) {
       compiled('http', Y.merge(data, helpers, options));
  });
}, '', {requires: ['template-base']});

and that is probably more efficient that brining the cavalry to normalize that compiled template, which is another option:

YUI.add("foo",function(Y, NAME){
   var revived = Y.Template.Handlebars.revive(function (Handlebars,depth0,helpers,partials,data) {
     // a lot of generated code goes here...
     return buffer;
  }),
  Y.Template.register('foo', revived);
}, "", {requires: ["handlebars-base"]});

These are equivalent, since you will do:

YUI().use('foo', function (Y) {
   var html = Y.Template.render('foo', data);
});

It doesn't matter much how the template was provisioned, but obviously having the ability to rely on the build process to produce a YUI module that does not require you to load any particular engine when in the runtime, is going to be a big plus for many, while the revive workflow, just like the render workflow is still on the table for those who don't mind to load those engines.

@caridy
Copy link
Author

caridy commented May 9, 2013

@rgrove, about this:

Y.Template.Micro as the default fallback engine means that, to use this thing, you will have to load template, instead of template-base even when I will not need it (yes, it is small, but I don't want it there if I don't need it).

Not true. You only need to load Y.Template.Micro if you aren't going to specify another engine.

Not accurate. According to what you said "The engine will default to Y.Template.Micro if it wasn't specified.", that means Y.Template.register should have access to Y.Template.Micro if needed but not by requiring it, which sounds like a weird decoupling. Who will guarantee that this is going to be in place if needed? developers?

@rgrove
Copy link

rgrove commented May 9, 2013

@caridy

Not accurate. According to what you said "The engine will default to Y.Template.Micro if it wasn't specified.", that means Y.Template.register should have access to Y.Template.Micro if needed but not by requiring it, which sounds like a weird decoupling. Who will guarantee that this is going to be in place if needed? developers?

This fork of the conversation no longer seems to have a point given that we both agree with what @tivac said earlier, which means specifying an engine is no longer necessary, but as far as what I was thinking earlier...

As a developer, if you don't specify an engine, you're opting into Template.Micro. If you don't specify an engine and Template.Micro isn't loaded, that's an error, and it's your fault. If you don't want to load Template.Micro, specify another engine that you do want to load. Pretty simple.

But again, no longer necessary.

@derek
Copy link

derek commented May 10, 2013

Note: Discussion has moved to [Proposal] Y.Template.register / Y.Template.render as static methods on the yui-contrib mailing list.

@caridy
Copy link
Author

caridy commented May 13, 2013

The comments are closed now, any follow up should go thru: https://groups.google.com/forum/?fromgroups=#!topic/yui-contrib/cUpVvtoUBa8

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment