Introducing Raptor Templates: The Power of Genshi for JavaScript

[Patrick Steele-Idem]

Hi all,

About a year ago, when comparing popular templating languages, I came across Genshi and was impressed by the clean syntax. Unfortunately it only worked for Python and I was looking for a good templating solution for JavaScript. I decided to create a new JavaScript templating language that was largely compatible with Genshi, but added a ton of new features, including the following:

• Client/server support
• Custom taglibs
• Custom compile-time transformers
  
• Helper functions
• Asynchronous fragments
• Streaming
• Compilation to native JavaScript code
• High performance JavaScript runtime
  
• Short-hand conditionals
• for-loops with status variables
• Conditional attributes and boolean attributes
• Integration with Node.js and Rhino
• Smart whitespace removal
• etc.

Check out the online demo!:

http://raptorjs.org/raptor-templates/try-online/

Would love to get feedback, or, if you are interested in contributing please let me know.

Keep up the awesome work with Genshi, but hopefully you all find the JavaScript implementation helpful.

Cheers,

Patrick

[Eli Stevens (Gmail)]

Thanks for posting this; I've been wanting something like this for a while (I even began to sketch out something similar, but it never progressed beyond the toy stage: https://github.com/wickedgrey/jenshi ).

One question that wasn't quickly answered by looking at the docs: what does it take to get the templates working from inside an html page?  It's not clear what needs to be done if a project doesn't want to buy into the entire raptor stack.  Is the work described at http://raptorjs.org/optimizer/get-started-cli/ mandatory?

Also, is there a document that describes the precise differences in template language from genshi?  I see "else" attributes; are there more?

Cool stuff.  :)

Thanks,

Eli

--
You received this message because you are subscribed to the Google Groups "Genshi" group.
To unsubscribe from this group and stop receiving emails from it, send an email to genshi+un...@googlegroups.com.
To post to this group, send email to gen...@googlegroups.com.
Visit this group at http://groups.google.com/group/genshi?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Patrick Steele-Idem]

Hi Eli,

Thanks for the feedback. Nice to see that I wasn't the only one to try this :) The interesting thing about Raptor Templates is that it compiles into very efficient JavaScript functions. XML just happens to be the input format that is used to build the AST that is used by the code generator. Before the code generation phase any number of transformers can be applied to the intermediate AST. In addition, each node in the tree can have a custom compiler associated with it so there is really no limit to what you can do with Raptor Templates (even without changing the core compilation engine).

The CLI for the RaptorJS Optimizer can be used to compile templates and it can also be used to generated optimized builds for the runtime code required to render a template in the browser. For example:

$ raptor-optimizer raptor raptor/templating ./test.rhtml --name my-bundle

INFO raptor/optimizer/cli: Optimizing bundle with name "my-bundle"...

INFO raptor/optimizer/OptimizerWriterMixins: Writing bundle: "body/application/javascript/my-bundle"...

INFO raptor/optimizer/OptimizerFileWriter: Writing bundle file to "my-bundle.js"...

INFO raptor/optimizer/OptimizerWriterMixins: Bundle "my-bundle" (js, body) written to disk in 165ms

INFO raptor/optimizer/PageOptimizer: Optimized page "my-bundle" in 206ms

Optimization successfully completed!

That will generate a resource bundle named "my-bundle.js" in the current directory and it will include the core "raptor" module, the "raptor/templating" module and the compiled "test.rhtml" template. Just include that file in your page and you are ready to render the template in the browser. The "raptor" module and the "raptor/templating" module will add a little less than 5k (gzipped) to your page weight and that includes a full AMD implementation, a partial ES5 shim and the Raptor Templates runtime engine.

However, what I find much easier is to use the optimizer taglib for Raptor Templates:

http://raptorjs.org/optimizer/get-started-raptor-templates/

The optimizer taglib will generated optimized resource bundles for all of your page dependencies and it will automatically compile RHTML files into JavaScript and it will inject the HTML markup into your page to include those optimized resource bundles.

I have not put together any document describing the differences between Genshi and Raptor Templates. If there is more interest from the Genshi community then that is something I'll be happy to put together. For all of the tags/attributes that were pulled in from Genshi you will hopefully find the same API (except with a different namespace). But as you pointed out, I have added a lot of additional tags and custom attributes (and you can add your own as well).

Let me know know if you have additional questions.

Thanks,

Patrick