Examples of using compiled jade templates in the browser

[Edmund von der Burg]

Hello,

I'd like to compile my jade templates down to javascript using 'jade
--client' and then use them on the browser to render content (using
the runtime.js code). But I'd like to see some examples of how others
have done this.

Things I'd like to look at are how best to send the compiled templates
to the browser, how to run the functions on the browser. When they are
created all the functions have the name 'anonymous' - is this
something that I should change when packaging them up?

I feel like I'm missing something and that the lack of examples is
because it is easy.

Thank you,
Edmund.

[Anand George]

Have found this jade-visualizer quite handy...  https://github.com/tamizhvendan/jade-visualizer 

--
You received this message because you are subscribed to the Google Groups "Express" group.
To post to this group, send email to expre...@googlegroups.com.
To unsubscribe from this group, send email to express-js+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/express-js?hl=en.

[Edmund von der Burg]

On 22 May 2012 16:10, Anand George <mranan...@gmail.com> wrote:
> Have found this jade-visualizer quite handy...
> https://github.com/tamizhvendan/jade-visualizer

That is interesting, but it sends the templates back to the server for
rendering.

I'm interested in compiling the templates to js on the server as part
of a build process, and then using those compiled templates in the
browser.

Yours,
Edmund.

[Pierre Guillaume Herveou]

Hi there

I created a build tool (https://github.com/pgherveou/squid) for my projects 

it compiles jade template for you on the fly (as well as coffee and stylus) and wrap them inside a requirejs define function with a dependency set on jade (this is hardcoded at the moment but I will make this configurable)

So basically to use my template I just need to do something like that

var tpl = require('.path/to/my-template') 

    , html = tpl({foo:'bar'});

whether you use require-js or not the idea is just to server jade client runtime, your compiled template and use the  function to render your html

[Edmund von der Burg]

On 22 May 2012 16:56, Pierre Guillaume Herveou <pghe...@gmail.com> wrote:
> Hi there
>
> I created a build tool (https://github.com/pgherveou/squid) for my projects
> it compiles jade template for you on the fly (as well as coffee and stylus)
> and wrap them inside a requirejs define function with a dependency set on
> jade (this is hardcoded at the moment but I will make this configurable)

This is very close to what I want! Especially the RequireJS wrapping.

Having looked at your code I see that what I've been looking for is
the amdWrap function in
https://github.com/pgherveou/squid/blob/master/src/lib/JadeBuilder.coffee
- ideally this would be integrated into jade itself so that we could
just call

tplFn = jade.compile code, {filename: file, client: true, amdWrap:
'jadeName', compileDebug: false}

where 'jadeName' is the name of the jade runtime (defaults to
'jade-runtime' if the argument is 'true').

I'll ask if that change would be accepted.

> So basically to use my template I just need to do something like that
> var tpl = require('.path/to/my-template')
>     , html = tpl({foo:'bar'});
>
> whether you use require-js or not the idea is just to server jade client
> runtime, your compiled template and use the  function to render your html

Unfortunately the layout you use for your code and the layout we use
differ :( so I think it would be hard for me to use squid without
significant changes.

But thank you for pointing me at it - reading through it has shown me
how it should be done :)

Cheers,

Edmund.


>>
> --
> You received this message because you are subscribed to the Google Groups
> "Express" group.

> To view this discussion on the web visit
> https://groups.google.com/d/msg/express-js/-/u8Ee3y-LPNAJ.

[Edmund von der Burg]

On 23 May 2012 10:25, Edmund von der Burg <ev...@ecclestoad.co.uk> wrote:
> On 22 May 2012 16:56, Pierre Guillaume Herveou <pghe...@gmail.com> wrote:
>> Hi there
>>
>> I created a build tool (https://github.com/pgherveou/squid) for my projects
>> it compiles jade template for you on the fly (as well as coffee and stylus)
>> and wrap them inside a requirejs define function with a dependency set on
>> jade (this is hardcoded at the moment but I will make this configurable)
>
> This is very close to what I want! Especially the RequireJS wrapping.
>
> Having looked at your code I see that what I've been looking for is
> the amdWrap function in
> https://github.com/pgherveou/squid/blob/master/src/lib/JadeBuilder.coffee
> - ideally this would be integrated into jade itself so that we could
> just call
>
>  tplFn = jade.compile code, {filename: file, client: true, amdWrap:
> 'jadeName', compileDebug: false}
>
> where 'jadeName' is the name of the jade runtime (defaults to
> 'jade-runtime' if the argument is 'true').
>
> I'll ask if that change would be accepted.

Oh dear - late to the party again:
https://github.com/visionmedia/jade/issues/634

From that exchange it would seem that the best approach is a separate
npm module that can provide a AMD wrapped runtime.js, compile the
templates to AMD wrapped functions and possibly also provide an
Express middleware to serve the compiled templates during development.
In production they should be bundled up with the rest of the
javascript as required.

I'll look at implementing that instead.

Cheers,
Edmund.

[Edmund von der Burg]

On Wednesday, 23 May 2012 10:35:37 UTC+1, Edmund von der Burg wrote:

Oh dear - late to the party again:
https://github.com/visionmedia/jade/issues/634

From that exchange it would seem that the best approach is a separate
npm module that can provide a AMD wrapped runtime.js, compile the
templates to AMD wrapped functions and possibly also provide an
Express middleware to serve the compiled templates during development.
In production they should be bundled up with the rest of the
javascript as required. 

Et voila: https://github.com/mysociety/node-jade-amd

Also on npm as 'jade-amd' 

This should work well for me - it lets me run middleware when developing that intercepts requests for templates compiled to javascript and compiles and AMD wraps them on the fly. When it comes to building the project there is a command line tool that compiles and wraps the templates, and also the runtime.js file. It uses the jade that you install using npm rather than embedding it so there should be no version mismatch errors.

The output is then suitable to start using with RequireJS, and can be optimised like any other javascript.

There is a very simple example app with a guided walk through to show you all the steps:

  https://github.com/mysociety/node-jade-amd/tree/master/example

Hope others find this helpful - I'll start to integrate it with our bigger project tomorrow so there well be some bugfixes and a new version published soon :)

Cheers,

  Edmund.

[JGAui]

I've created a simple too to do this: http://projects.jga.me/clientjade/  

I just run it from my makefile when I deploy.

Usage:

clientjade test1.jade test2.jade > templates.js

Then in your client js:

jade.render(document.getElementById('test2'), 'test2', { items: ['item1', 'item2', 'item3'] });

[Pierre Guillaume Herveou]

Out of curiosity? What kind of project layout do u use? Squid just build from a dir a to a dir b by default I use src to project root but that could be configurable