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

Post by 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,
- 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.
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
--
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
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<http://raptorjs.org/optimizer/get-started-cli/>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

Post by 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

Post by 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,
- 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.
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
--
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
.
Visit this group at http://groups.google.com/group/genshi?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.