Giter Club home page Giter Club logo

Comments (13)

heapwolf avatar heapwolf commented on July 30, 2024

Goes against philosophy of the library. The libraries principal motivation is Separation of Concerns. Javascript has no business being inside html, and unless you are writing a library like jQuery or mootools, html should usually stay out of the Javascript.

from plates.

mwawrusch avatar mwawrusch commented on July 30, 2024

I get your philosophy, storing html template code in javascript, from a practical perspective this unfortunately does not work for me. And just to clarify, I was not talking about putting Javascript into the html, but the template html as part of a script tag, which is extremely useful for client side only apps.
In any case thanks for your time in writing this library. That's definitely appreciated.

from plates.

tblobaum avatar tblobaum commented on July 30, 2024

@hij1nx how do you load up a large template?

from plates.

heapwolf avatar heapwolf commented on July 30, 2024

How do you define large? ...my primary inhibition about using a script tag to hide html fragments is that it feels over engineered. using a script tag to hide templates is really only useful when your template consists of non-standard html and will potentially produce parser errors. If you have a large template to conceal, you may consider the following, it would be much simpler...

<style>
  .templates { display: none }
</style>

<!-- ... -->

<div class="templates">
  <div id="template1">...</div>
  <span id="template2">...</span>
</div>

<!-- ... -->

from plates.

mwawrusch avatar mwawrusch commented on July 30, 2024

Large in my case is multiple templates, at least hundred lines of html, probably more, split in > 10 templates, which are written in haml (that backend is still in ruby) and emitted as html. Benefit for writing it in haml (as standard html, no template preprocessing) is that the html is hundred percent correct and no bugs can creep in.

And two reasons for wrapping it in a script tag instead of the way you described:

  1. No parsing takes place. It seems to me that parsing it twice would defeat one selling argument of plate, that it is super fast.
  2. Potential side effects with having the templates in the dom tree and jquery plugins inadvertently interacting with them. I might be overcautious here, but if something like this happens it takes ages to debug.

from plates.

heapwolf avatar heapwolf commented on July 30, 2024

sounds crazy ;o)

Large in my case is multiple templates, at least hundred lines of html

Should never happen on the client (in an ideal world), so reflow, dom-tree etc are moot.

which are written in haml (that backend is still in ruby)

You are definitely in the 20 of the 80/20. in fact i'd say you're in the 5-10. I see what you mean about the haml creating correct html, but imho haml looks like ascii vomit ;o) and i'd personally rather keep the extra layer out of my stack.

To address your points... 1) this is a client-side domain-specific problem. templates as large as your talking about on the client side are a design deficiency. even if you hide it from the dom-tree initially, parsing an html fragment of this size and incurring the costs associated with injecting it back into the document (reflow etc) will result in a slow user experience [as im guessing that this would happen more than once since we're talking about templating].

  1. this is a good point, having something in the dom-tree already, there is the opportunity for a template or a part of it to accidentally get clobbered by a selector or unwitting script. I'm not sure this argument, or the later justify introducing potentially more complex requirements such as mime types and script tags.

conversely, there is no code requirement from plates to use a script tag to hide a template. So even though i don't think it should be the default convention, it's still perfectly valid to use it.

I think this is possibly a subject that could be covered in the docs. If so, I think we could present both options.

from plates.

mwawrusch avatar mwawrusch commented on July 30, 2024

Well, I wish I would be in the 1%, the 20% to 2% is really the bad spot in life :)

Regarding haml, I actually prefer the jade syntax, but it's not worth changing the code for me. And I think it's like coffeescript vs javascript - you either love it or hate it :)

And the templates itself are rather small, but there are many of them, something like 20 templates with 5 - 10 lines of html. Most of them are rarely invoked, so speed is not an issue (I always test on a 5 year old windows machine - if it runs there it will everywhere)

Fully agree with your last 2 paragraphs.

from plates.

heapwolf avatar heapwolf commented on July 30, 2024

Do you want to draft something/make a pull request on the readme.md regarding usage/best practice surrounding hiding template fragments? maybe starting with the simple html case and progressively enhancing to the script-tag case? You appear to understand the problem-domain well.

from plates.

mwawrusch avatar mwawrusch commented on July 30, 2024

Love to. I'll write something will send pull on Saturday.

from plates.

mwawrusch avatar mwawrusch commented on July 30, 2024

I created a wiki instead of pulling readme, it is easier for me to work with it. I"ll update the page a bit tomorrow, fill in the missing code pieces and add a second page regarding how to name your classes etc.

Here is the link for the first one, corrections are welcome, I am not a native speaker so there will be grammatical errors:
https://github.com/flatiron/plates/wiki/Client-Side-Plating

from plates.

heapwolf avatar heapwolf commented on July 30, 2024

woah, you rock man.

from plates.

tblobaum avatar tblobaum commented on July 30, 2024

Hey, that looks like what i needed too. You can use native code to grab those nodes too. I'm sure a best practice will emerge for defining and grabbing templates that aren't in script tags

function OuterHTML(element) {
    var container = document.createElement("div");
    container.appendChild(element.cloneNode(true));
    return container.innerHTML;
}

from plates.

mwawrusch avatar mwawrusch commented on July 30, 2024

Thanks guys. @tblobaum I'll add your code with the next iteration to the wiki.

from plates.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.