use scripttag or element id to fetch template and compile it #232

devmondo · 2015-04-03T19:22:09Z

hi again,

other libraries allow you to define templates in script tags or select an element by id or name and then bind the data to that element and in this case this wont be needed

 document.body.appendChild(view.render());

so if we can do something like this

<div id="template">
    Generate
    <input type="text" class="form-control" style="width:60px;display:inline-block;"
           value="{{<~>numItems}}"/> items: <br/>
    <repeat each="{{ range(numItems) }}" as="number"> {{~number}} <br/></repeat>
</div>
<script>
<script type="text/javascript">

    // create the template. accepts a string, or pre-compiled template
// prefered not to use jquery :)     
var template = $("#template")
    );

    // create the view from the template
    var view = template.view({
      message: "world"
    });

    // render the view, and append to the DOM
    // this should not be needed 
   // document.body.appendChild(view.render());
  </script>
</script>

The text was updated successfully, but these errors were encountered:

crcn · 2015-04-03T20:51:45Z

Hmm - only concern about implementing this sorta thing is that it's browser-specific - it wouldn't work so well on other platforms such as NodeJS.

This could be built as a component however:

<html>
  <head>
  </head>
  <body paperclip>

    <template name="blarg">

    </template>

    <!-- this doesn't work now, but it will in the future -->
    <blarg />

    <script type="text/javascript">

      pc.templates = {};

      function TemplateComponent() {
        pc.Component.apply(this, arguments);
        pc.components[this.attributes.name] = this;
      }

      // also make the template component global
      pc.components.template = pc.Component.extend(TemplateComponent, {
        update: function () {
          if (this._rendered) return;
          this._rendered = true;
          this.section.appendChild(this.childTemplate.view({
            parent: this.view
          }));
        }
      });
    </script>

    <script type="text/javascript">
      //paperclipify the entire web page
      var source = document.body.innerHTML;
      document.body.innerHTML = "";
      document.body.appendChild(pc.template(source).view().render());
    </script>
  </body>
</html>

ghost · 2015-04-03T20:55:44Z

Just a quick note to say a big thank you for all your answers and effort! Devmondo and I are working together on some projects and really fell in love with your project. So basically all his messages come from both of us, he's just doing all the talking for me as well :-)

crcn · 2015-04-03T20:58:21Z

Haha, no problem. Definitely point out any un-obvious weird bits if you come across them!

ghost · 2015-04-03T20:59:26Z

Thanks.. really appreciate this! It's a total pleasure to find such a kind and helpful developer..

devmondo · 2015-04-03T21:05:02Z

this is awesome, man you are so helpful, and as @lan3jur said we just started on working on some project, and we have researched a lot, and your template syntax and personal attitude is what is making us fall in love with this :)

hope you wont get bothered with the swarm of questions or bug reporting in future, i am really shocked this is not famous, i have researched like 1 week for databinding and templating stuff, and did not find this, i only found it by chance !!!

crcn · 2015-04-03T21:13:06Z

Awesome - keep the questions coming. More questions = more docs for paperclip. It'll benefit anyone else who wants to use it.

And yeah, It'd be awesome for paperclip to gain more traction as a template engine, but there's still quite a bit of noise - you got react, htmlbars (ember glimmer) ractive, and other new, hip reactive template engines. They're all fantastic options.

devmondo · 2015-04-03T21:15:46Z

we have tried them all, and Angular, but this is by far the cleanest and simplest i yet to come across, the one thing i am worried about though, is the use of dirty checking, is int angular criticized for this? could you elaborate on this and the comparison to object.observe performance ?

crcn · 2015-04-03T21:19:59Z

Edited the last comment - broke the thread. Here are some additional thoughts:

The key differentiator in paperclip is the interoperability. It's part of a "framework", but not in the traditional sense. I'm building out lots of little libraries that work well together - paperclip's just one of them. And the goal is to get everything to work with everything. I.e: paperclip should work with every framework, and every platform.

And just in case you're curious, here are the other things that work nicely with paperclip:

caplet - 11kb models library. Also works with react, angular, and other frameworks.
crudlet - reactive data store library (using node streams) which works with any transport. Goal here is to abstract your service layer so that you can do cool stuff like adding offline mode, caching, and realtime data in just a few lines of code. Also works pretty well with caplet.

Anyways, more stuff to come. So far we've got the M (caplet), and the V (paperclip). All that's left is the view controller.

crcn · 2015-04-03T21:23:21Z

Regarding the dirty type checking in angular - it's actually a pretty performant & simple approach. React does this with their dom-diffing.

Paperclip has kind of a dirty type checking approach - it's all built into the accessor, and you can easily swap it out for something else. Adding support for Object.observe shouldn't be too tough to implement, and should be by far the fastest option.

devmondo · 2015-04-03T21:47:47Z

thanks for the reply man, so in other words, paperclip is not slow on large data pages or eat memory or drain battery :)
from your experience and projects you used it on, could you share with us how much did it scale and if there is bottle necks ?

yea the accessors concept is amazing, did you check Polymer/observejs,
it uses object.observe and falls back to dirty checking if it is not there
https://github.com/Polymer/observe-js
this should be fun and interesting to see how Paperclipsjs will perform with that :)

crcn · 2015-04-03T22:06:01Z

The only real bottleneck is that templates are immutable, so if you're trying to do complex UI, then React, or some other virtual-dom library are probably better options. 95% of the time though, single page apps are simple enough that a plain-ol template engine such as paperclip do the job well. It really depends on the application requirements.

If what you're doing however is moving lots of elements around at the same time, then that's where paperclip really shines. You shouldn't have any performance issues - even on mobile devices. There are some also nifty mechanics within paperclip that'll speed up your application such as recycling views.

Here's an old, outdated & broken benchmark suite: http://jsperf.com/pc-templating-comparison/2

Notice "paperclip recycle" - all that stuff is paperclip magic that happens behind the scenes. This is all thanks to the immutability of the engine.

Also, here's another example:
paperclip-dbmonster.herokuapp.com

devmondo · 2015-04-04T06:13:46Z

man, thanks a lot for the detailed answer, the benchmark look stunning, it is faster than react!!

i am confused though what is the kind of app that has complex UI and will be slow with paperclip, do you mean for example Facebook, or real time stock data? because the DBMonster, is like outstanding performance, and there is a lot of data moving!!!

i dont think any application we will make will have that amount of Data Display at once.
our app will be like wordpress, and it will have realtime chat like gitter, so is this problem?

and speaking of mobile, we are planning to create mobile App, is classdojo mobile app made with PaperClip if so this is amazing!!! so how you deal with datalists on mobile, as from what i read, it is the biggest issue on mobile when doing hybrid Apps

ghost · 2015-04-04T09:09:10Z

I like this more and more each day :)

devmondo · 2015-04-04T10:24:43Z

in regards to caplet, have you seen Aurelia, the thing i like the most about it is that it is MVVM so your view is just normal html file with binding directives like paperclip and your view model is just ES6 class.

i really really like this approach, no extend, no model and collection model like backbone or ember, you just bind to your class properties and methods, and the way view is bound to viewmodel is through router, i hope we can do the same with paperclip, as it will make syntax and work flow more concise :)

devmondo · 2015-04-04T10:35:56Z

oh yeah, the above template example, dont work is there a typo or it is just for illustration purposes :)

crcn added the question label Apr 3, 2015

crcn closed this as completed Apr 21, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

use scripttag or element id to fetch template and compile it #232

use scripttag or element id to fetch template and compile it #232

devmondo commented Apr 3, 2015

crcn commented Apr 3, 2015

ghost commented Apr 3, 2015

crcn commented Apr 3, 2015

ghost commented Apr 3, 2015

devmondo commented Apr 3, 2015

crcn commented Apr 3, 2015

devmondo commented Apr 3, 2015

crcn commented Apr 3, 2015

crcn commented Apr 3, 2015

devmondo commented Apr 3, 2015

crcn commented Apr 3, 2015

devmondo commented Apr 4, 2015

ghost commented Apr 4, 2015

devmondo commented Apr 4, 2015

devmondo commented Apr 4, 2015

use scripttag or element id to fetch template and compile it #232

use scripttag or element id to fetch template and compile it #232

Comments

devmondo commented Apr 3, 2015

crcn commented Apr 3, 2015

ghost commented Apr 3, 2015

crcn commented Apr 3, 2015

ghost commented Apr 3, 2015

devmondo commented Apr 3, 2015

crcn commented Apr 3, 2015

devmondo commented Apr 3, 2015

crcn commented Apr 3, 2015

crcn commented Apr 3, 2015

devmondo commented Apr 3, 2015

crcn commented Apr 3, 2015

devmondo commented Apr 4, 2015

ghost commented Apr 4, 2015

devmondo commented Apr 4, 2015

devmondo commented Apr 4, 2015