Server-side rendering

[rehno-lindeque]

I've been investigating using Elm in a production environment (at CircuitHub.com). (The technology looks great, the elm devs have been doing an amazing job!) Something that I know is likely to crop up soon is the ability to render thumbnails server-side.

Would it be possible to use something like https://github.com/learnboost/node-canvas together with Elm? It is unclear to me whether this is viable (or planned) since elm provides an embed function and a worker function, but nothing that allows you to render directly into an existing canvas.

[DylanSale]

I imagine you would have to use the ports interface and implement the rendering using JavaScript. You might be able to reuse the existing render code. I don't have much experience with node though.

Dylan Sale On 11 Mar 2014 06:33, "Rehno Lindeque" notifications@github.com wrote:

I've been investigating using Elm in a production environment (at CircuitHub.com). (The technology looks great, the elm devs have been doing an amazing job!) Something that I know is likely to crop up soon is the ability to render thumbnails server-side.

Would it be possible to use something like https://github.com/learnboost/node-canvas together with Elm? It is unclear to me whether this is viable (or planned) since elm provides an embed function and a worker function, but nothing that allows you to render directly into an existing canvas.

Reply to this email directly or view it on GitHubhttps://github.com/evancz/Elm/issues/515 .

[rehno-lindeque]

node-canvas seems to have a pretty faithful canvas context API - so if I had the ability to explicitly pass in a canvas context to elm and if there is no other browser-only dependencies inside the generated rendering code, I think this could be quite straight-forward.

It might be worth mentioning that it is possible to use d3.js with nodejs by including https://github.com/tmpvar/jsdom in your project (https://groups.google.com/forum/#!topic/d3-js/XHbidy5pY8A), however I'm not overly fond of this approach as it's pretty heavy-handed. I was actually hoping to remove the dependency on jsdom from our code-base. My hope is that using elm would be as simple as having a canvas context available with the correct interface...

[evancz]

I'm not sure I understand the core of the question.

Elm Elements eventually map onto DOM nodes. This means that Elm can rely on browsers to do font rendering which is very non-trivial. The collage function will create a canvas for certain types of Form, but if you use toForm it falls back to DOM nodes.

In the sense that you can create an image from certain DOM node, it may be possible to create a thumbnail. It seems like that's not what you mean though.

Does this answer the question? If not, can you clarify and ask the question a different way?

[rehno-lindeque]

Thanks Evan, I see that https://developer.mozilla.org/en-US/docs/Drawing_text_using_a_canvas#fillText() takes a DOMString as input... Is this what you are referring to?

I have been operating under the assumption that everything I need to do would only require a canvas context... We do need some text rendering on the canvas itself - I didn't anticipate that it would require the DOM (i.e. https://github.com/learnboost/node-canvas appears to implement fillText without a DOM depedency - at least as far as I can make out).

PS Concretely, we are rendering footprints and schematic symbols for circuit boards and need a solution to rendering thumbnails server-side when a template is updated.

[rehno-lindeque]

I think I'm still being a bit vague... Something like this is roughly what I had in mind:

Elm.byCanvas(canvasContext, Elm.MyTemplate, myTemplateParameters);

For capturing the thumbnail, the method I have previously used is the toDataURL. E.g. https://github.com/rehno-lindeque/BIMsurfer/blob/master/src/canvas.thumbnail.coffee#L17

In other words, I would like to use elm with a canvas element alone (such as the one supplied by https://github.com/learnboost/node-canvas), but no other DOM elements since I wouldn't have the full DOM API availabe to me in nodejs.

[mgold]

Psst - there's also a mailing list for these kinds of more open questions.

[rehno-lindeque]

I'll close this for now and reopen if it really turns out to be a problem, thanks.