I'm going for a pre-parsed ractiveJS templates system and I'm wondering if it's worth the work.
As far as I've seen templates don't get parsed until it's actually rendered, which is smart, but I guess if it's a big template, I'll get bigger parse times, so, how can I track that ? Or if it's not work tracking, is it a performance improvement to send them already parsed ?
Asking because I'm on NodeJS now and it's quite easy to use gulp and parse them when server starts.
You can parse templates manually with Ractive.parse(template):
var start = window.performance.now();
var parsed = Ractive.parse( `
<h1>Hello {{name}}!</h1>
<p>We're using Ractive.js version {{version}}. This template was parsed in {{time.toFixed(2)}}ms</p>
` );
var time = window.performance.now() - start;
var ractive = new Ractive({
el: 'main',
template: parsed,
data: {
name: 'world',
version: Ractive.VERSION,
time: time
}
});
<script src='http://cdn.ractivejs.org/edge/ractive.js'></script>
<main></main>
Parsed templates are a little bit larger than unparsed templates (typically around 30-40% larger), so it's a trade-off – less work, more bytes. FWIW I always pre-parse my templates.
Related
I've been writing a custom script for QuickBase, which requires some date manipulation. I decided to use moments.js and, since I'm using it within quickbase, I am loading moments.js dynamically, using $.getscript. I've done this process before with other plugin (jquery.md5.min.js), and this works correctly.
The problem is, even though moment.js is read correctly, when I try to use it (for instance, see the console.log() I added for debugging, I get an error message telling me that "moment is not defined".
I know moment.js is being read because I already had it dumped into the console after loading, and I'm trying to use its functions only after it is loaded via the asynchronous methods. I have also played with a few simple jsfiddles just to make sure I was calling it correctly. I also checked several times the url and it is correct. The rest of my code is also correct (if I comment out the lines with moment(), it works as expected).
$.getScript(domain + dbid_app + urlMoments)
.done(function(script, textStatus) {
rightNow = moment();
dfd.resolve(); // Resolve when the script is finished loading.
console.log("moments.js has finished loading.\n\n" + textStatus);
console.log(rightNow);
})
.fail(function( jqxhr, settings, exception ) {
console.log( "Triggered ajaxError handler." );
});
How do I call the moment() function? When running the fiddle, and after looking at many online examples, it is as simple as: var myTime = moment();, but this is not working inside of my script. Is there a chance that, even after loading moments.js with $.getscript(), it was not executed? From what I can see on the source code of moments.js, the factory function should be automatically called, shouldn't it?
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
global.moment = factory()
}
One last thing: the url points to the QuickBase code page I created with moments.js. This is also how I'm using jquery.md5.js without any problems.
It looks like your issue might be caused by Quickbase loading a different version of moment.js already. Specifically, Quickbase forms are using Moment 2.8.4 in some capacity and it is being loaded using RequireJS. Following Moment's example for using RequireJS I was able to get a moment object with the following code:
require(['moment'], function(){
moment();
});
rightNow = moment();
I hope that helps you solve your problem.
I want to give my users the possibility to create document templates (contracts, emails, etc.)
The best option I figured out would be to store these document templates in mongo (maybe I'm wrong...)
I've been searching for a couple of hours now but I can't figure out how to render these document template with their data context.
Example:
Template stored in Mongo: "Dear {{firstname}}"
data context: {firstname: "Tom"}
On Tom's website, He should read: "Dear Tom"
How can I do this?
EDIT
After some researches, I discovered a package called spacebars-compiler that brings the option to compile to the client:
meteor add spacebars-compiler
I then tried something like this:
Template.doctypesList.rendered = ->
content = "<div>" + this.data.content + "</div>"
template = Spacebars.compile content
rendered = UI.dynamic(template,{name:"nicolas"})
UI.insert(rendered, $(this).closest(".widget-body"))
but it doesn't work.
the template gets compiled but then, I don't know how to interpret it with its data context and to send it back to the web page.
EDIT 2
I'm getting closer thanks to Tom.
This is what I did:
Template.doctypesList.rendered = ->
content = this.data.content
console.log content
templateName = "template_#{this.data._id}"
Template.__define__(templateName, () -> content)
rendered = UI.renderWithData(eval("Template.#{templateName}"),{name:"nicolas"})
UI.insert(rendered, $("#content_" + this.data._id).get(0))
This works excepted the fact that the name is not injected into the template. UI.renderWithData renders the template but without the data context...
The thing your are missing is the call to (undocumented!) Template.__define__ which requires the template name (pick something unique and clever) as the first argument and the render function which you get from your space bars compiler. When it is done you can use {{> UI.dynamic}} as #Slava suggested.
There is also another way to do it, by using UI.Component API, but I guess it's pretty unstable at the moment, so maybe I will skip this, at least for now.
Use UI.dynamic: https://www.discovermeteor.com/blog/blaze-dynamic-template-includes/
It is fairly new and didn't make its way to docs for some reason.
There are few ways to achieve what you want, but I would do it like this:
You're probably already using underscore.js, if not Meteor has core package for it.
You could use underscore templates (http://underscorejs.org/#template) like this:
var templateString = 'Dear <%= firstname %>'
and later compile it using
_.template(templateString, {firstname: "Tom"})
to get Dear Tom.
Of course you can store templateString in MongoDB in the meantime.
You can set delimiters to whatever you want, <%= %> is just the default.
Compiled template is essentially htmljs notation Meteor uses (or so I suppose) and it uses Template.template_name.lookup to render correct data. Check in console if Template.template_name.lookup("data_helper")() returns the correct data.
I recently had to solve this exact (or similar) problem of compiling templates client side. You need to make sure the order of things is like this:
Compiled template is present on client
Template data is present (verify with Template.template_name.lookup("data_name")() )
Render the template on page now
To compile the template, as #apendua have suggested, use (this is how I use it and it works for me)
Template.__define__(name, eval(Spacebars.compile(
newHtml, {
isTemplate: true,
sourceName: 'Template "' + name + '"'
}
)));
After this you need to make sure the data you want to render in template is available before you actually render the template on page. This is what I use for rendering template on page:
UI.DomRange.insert(UI.render(Template.template_name).dom, document.body);
Although my use case for rendering templates client side is somewhat different (my task was to live update the changed template overriding meteor's hot code push), but this worked best among different methods of rendering the template.
You can check my very early stage package which does this here: https://github.com/channikhabra/meteor-live-update/blob/master/js/live-update.js
I am fairly new to real-world programming so my code might be ugly, but may be it'll give you some pointers to solve your problem. (If you find me doing something stupid in there, or see something which is better done some other way, please feel free to drop a comment. That's the only way I get feedback for improvement as I am new and essentially code alone sitting in my dark corner).
As we all know, Meteor's initial payload sent to the client comprises (in production) a concatenated javascript file containing the Meteor platform, packages, and all templates parsed into Meteor's reactive templating system. Server-side rendering, where the templates are rendered to HTML and sent to the client in the initial payload, is on its way but doesn't have an expected release date yet.
I'm looking for a way to "hack" or approximate server-side rendering given the available functionality in Meteor 0.8.x. Specifically, I want to:
enable the page to render its initial contents without first waiting for the several hundred KB Meteor platform javascript file to be downloaded and parsed.
alternatively, modify Meteor so it only sends the templates it needs to render the initial request in the javascript payload, and fetches the remaining templates once render is complete.
The use case is http://q42.com. I recognise Meteor isn't the best fit for static websites like this one but I want to try and see how far I can get anyway. Right now the Meteor platform JS file is over 600 KB in size (±200 KB gzipped) and I'd like to reduce this size if possible.
Note: I'm aware of and already using Arunoda's fast-render package, which is intended to send data with the initial payload. In this case I want to cut down on time-to-first-render by also getting the templates themselves down faster.
This is a little bit tricky. But there are some things you could do. This may not be the beeest way to do it but it could help you get started somehow.
Meteor is build with many packages as 'default', sometimes some are not needed. You can remove the standard-app-packages and add the packages (that you need and use manually) listed here: https://github.com/meteor/meteor/blob/devel/packages/standard-app-packages/package.js
To cut down the templates you would have to include the bare templates that you use and include the other template's separately and perhaps send down the Template information via a Collection, using a live observer handle to initiate the templates
You would have to 'render' the templates on the server side or store them manually in your collection using Spacebars.compile from the spacebars-compiler package which is a little tricky but you could have it done decently:
This should give you a rough idea, not sure how to get passed the 'eval' bit of it though:
HTML file in /private/template.html
<template name="test">
Hello {{name}}
</template>
JS file in /private/template.js
Template.test.name = function() { return "Bob" }
Server side code
var collection = new Meteor.Collection("templates");
var templateData = Assets.getText("template.html");
var templateJs = Assets.getText("template.js");
var compiled = Spacebars.compile(templateData).toString();
var jsData = templateJs;
collection.insert({templateName:"test", data: templateData, js: templateJs});
Client Side code
collection.find().observeChanges({
added: function(id, fields) {
var template = fields.data,
name = fields.name,
js = fields.js;
Template["name"] = UI.Component.extend({
kind: "name",
render: eval(template),
});
eval(js);
}
});
Then just subscribe to the collection asking for your template and it should exist. If you use iron-router I think (not sure) you could make the subscription wait before the template is rendered so you could have it work.
Again this is just a 'hacky' solution, one thing I personally don't like about it is the use of eval, but javascript needs to run somehow...
You could loop through files in a particular folder using fs = Npm.require('fs') to render each template too.
One alternative would be to inject a 'script' tag calling the compiled js template and template helpers to let the template exist.
Is there a way to get multiple files from S3 (or any CDN) in one request?
For example, I have four files on S3:
example.com/cdn/one.js
example.com/cdn/two.js
example.com/cdn/three.js
example.com/cdn/four.js
I would like to be able to request any combination of them at a time. I currently have to include them separately:
<script src="example.com/cdn/one.js" />
<script src="example.com/cdn/two.js" />
But I would like to include them as one request:
example.com/cdn/code.js?one&two
I've considered combining the needed combinations into single files, but there will be way too many combinations for that to be realistic. I've also considered combining all of them into one file, but that would be ridiculously large.
First of all: Your question is more a JS thing than related to S3 / CDNs in general. And to answer your question: You can't "combine" them in one http request.
If you don't want to concatenate and minify them you should take a look at RequireJS, which could handle loading of your scripts – it's async and won't block the browser from rendering.
This is a really great article about async loading: css-tricks.com - Thinking Async which will give you a better insight.
EDIT after comment:
You can in fact use PHP to concatenate & minify your JS files on the fly, but this will put additional load on your server and you'll loose the benefits you get from a CDN … Another approach would be using a build system, which packs everything before it goes into production.
For further information on this topic take a look at the following links:
PHP5 - minify
PHP5 - Assetic
How do I concatenate JavaScript files into one file?
To do on the fly minifaction on your dev system (if it's a Mac) you may want to try CodeKit.
Here is one way you could do that (assuming you just use one&two&three and note file=one&file=two&file=3):
function getJs() {
var url = window.location.toString();
var query = url.split("?");
var params = query.split("&");
// iterate through array of params and write JS
for (i=0; i<params.length; i++) {
var name = params[i] + ".js";
document.write("<script defer language='javascript' type='text/javascript' src='" + name + "'><\/sc" + "ript>");
}
}
This should load after the page is loaded. Then in in your HTML perhaps. I haven't tested this but should be what you're looking for I reckon.
How does one create an array of loaders?
The bigger picture:
I have written a mapping program in flex. I want to change my mapping program so that all I need to do is drop in a new xml file instead of going into my flex file and adding the exact number of item loaders I need. So I guess I'm looking for an array of loaders that can load the image files that are within my XML file.
xml file example:
<locations>
<location>
<name>Big Star</name>
<street>123 Some St.</street>
<city>City</city>
<state>XX</state>
<zip>555555</zip>
<lat>12.34567</lat>
<long>-67.54321</long>
<iconFile>bigStar_icon.gif</iconFile>
<imageFile>bigStar_img.swf</imageFile>
<motion>no</motion>
<featured>yes</featured>
<category>Grocery</category>
</location>
</locations>
this xml can sometimes have 2000 locations.
Yeah, that's a pretty bad question. Literally (if facetiously):
var loaders:Array = [new Loader(), new Loader()];
Trying to read into what you asked, it sounds like you are trying to load up a whole bunch of stuff and handle them all loading together somehow... and if you have to ask, you're going to struggle.
You could try using the Bulk Loader library though, which does this for you reasonably well. There are probably others.
Not a direct answer to the question since it's a bit vague + #alecmce already gave an answer (I would go for a loader queue such as BulkLoader in this situation as well).
However, since I noticed a similar question some time ago I just wanted to point out that instantiating all the loaders at once just feels a bit wrong.
Wouldn't it be a bit appropriate to just store the urls and handle process them one by one ?
Basic example :
(beware I typed it in without testing...)
// So here's the point: only Strings are stored ...
var urls:Array = new Array('image1.jpg','image2.jpg',image3.jpg);
loadNext();
function loadNext()
{
if(urls.length() == 0)
return;
load(urls.shift())
}
function load(url:String):void
{
// The loader is created lazily just before before we need it
var loader:Loader = new Loader(new URLRequest(url));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded)
loader.load(url);
}
function onLoaded(e:Event):void
{
event.target.removeEventListener(Event.COMPLETE, onLoaded);
addChild(event.target.content); // ... or whatever has to happen here.
loadNext();
}