These are chat archives for canjs/canjs

25th
Mar 2016
Christopher Oliphant
@RALifeCoach
Mar 25 2016 11:20
can-compile suggests using mustache templates
When I tried using can-compile of stache templates the output file was simply the input file on one line
as well the sites that measure performance suggest that mustache is faster than stache
Christopher Oliphant
@RALifeCoach
Mar 25 2016 11:48
Anyone here???
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 25 2016 12:20
@RALifeCoach yes
Christopher Oliphant
@RALifeCoach
Mar 25 2016 12:24
This performance issue is killing me. I have applied as many of the suggestions as I can. Bajix viewed the stache file and made further suggestions, also implemented.
I have measured the performance for initial load and reloading the same data onto the existing page. The load takes 4 seconds and the reload even longer - closer to 6 seconds.
I expected the re-load to be pretty much instant as no data values changed
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 25 2016 12:28
How dont use binding and {{#each}} as suggested
Christopher Oliphant
@RALifeCoach
Mar 25 2016 12:28

I measured this statement’s timing:

var stache2 = new Date().getTime();
this.playerRowMap.attr('player', data.player);
var stache3 = new Date().getTime();

the values in data.player are the same as the values in the Map. That statement run 156 times took 5 seconds.

I do not use binding and I do not use #each
The component only has one small repeating section. The main looping is done outside of the component.
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 25 2016 12:34
do you have live-binding?
Christopher Oliphant
@RALifeCoach
Mar 25 2016 12:35
What is live-binding?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 25 2016 12:36
live data binding to reflect data changes automaticaly in the rendered template
Christopher Oliphant
@RALifeCoach
Mar 25 2016 12:36
I am looking through the docs and I only see live-binding for ejs and mustache
I hope so
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 25 2016 12:37
even for stache
Christopher Oliphant
@RALifeCoach
Mar 25 2016 12:37
isn’t live binding default?
{{xxx}} is automatically updated when xxx changes
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 25 2016 12:38
for example dont use {{#each items}} ... {{/each}}
use {{#items}} instead
Christopher Oliphant
@RALifeCoach
Mar 25 2016 12:38
and in my map functions I use this.attr(‘xxx’) for any value that could change. I use this.yyy for values that will not change.
I don’t use #each
remember the primary loop is outside of the component
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 25 2016 12:39
if you have a large list you should use pagination also
Christopher Oliphant
@RALifeCoach
Mar 25 2016 12:39
(although when I moved it to be inside the component, it didn’t speed things up at all.)
156 items is not that large a list
My stache file is 200+ lines long with 4 sub-components
That’s why I would love it if there were a pre-compiler for the stache as there is for ejs or mustache
any suggestions?
Christopher Oliphant
@RALifeCoach
Mar 25 2016 12:48
how would that help me? All it says is that using ! will load the stache file as a dependency
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 25 2016 12:49
can-compile should compile stache too cc @daffl
Christopher Oliphant
@RALifeCoach
Mar 25 2016 12:50
@cherifGsoul It doesn’t. All it does is convert many lines into a single string.
I tried using the string in my component, but there was no performance difference.
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 25 2016 12:50
single line of what? JS or raw stache?
Christopher Oliphant
@RALifeCoach
Mar 25 2016 12:52
{{xxx}}
{{yyy}}
became
{{xxx}}{{yyy}}
here is the output from can-compile:
(function(window) {
 can.view.preloadStringRenderer('player-row_stache',can.stache("<div class=\"leaderboard-item player-row-{{pid}} {{highlight}} {{expanded}}\">\n    <table class=\"table\">\n        <tr class=\"row-main\">\n            {{^isProAm}}\n                <td class=\"col-pin\">\n                <span class=\"favorite add-to-favorite\" style=\"{{#if options.isInMyLb}}display:none;{{/if}}\">\n                    <span class=\"favorite-tooltip\">\n                        Add player to<br />\n                        <strong>My Leaderboard</strong>\n                    </span>\n                </span>\n\n                <span class=\"favorite remove-from-favorite\" style=\"{{^if options.isInMyLb}}display:none;{{/if}}\">\n                    <span class=\"favorite-tooltip\">\n                        Remove player from<br />\n                        <strong>My Leaderboard</strong>\n                    </span>\n                </span>\n                </td>\n            {{/if}}\n\n            <td class=\"col-pos\">\n                {{#if options.isActive}}\n                    {{safeValue player.current_position}}\n                {{else}}\n                    {{toUpperCase player.status}}\n                {{/if}}\n            </td>\n\n            <td class=\"col-move hidden-small\" {{#if player.highlight}}style=\"background:{{player.highlight}}\"{{/if}}>\n                <show-movement {movement}=\"player.movement\"></show-movement>\n            </td>\n\n            {{^isProAm}}\n                <td class=\"col-country visible-large\">\n                    <country-flag {country}=\"player.player_bio.country\"></country-flag>\n                </td>\n            {{/if}}\n\n            <td class=\"col-player\">\n                <div>\n                    {{^isProAm}}\n                        <country-flag class=\"visible-medium\" country=\"{{player.player_bio.country}}\"></country-flag>\n                        <a class=\"name {{#if options.isActive}}expansion{{/if}}\"\n                            href=\"{{#if options.isActive}}javascript:void(0);{{else}}{{player.scorecardsURL}}{{/if}}\"\n                            onclick=\"{{#if options.isActive}}leaderboardContext.analytics.inactivePlayerLink(\'{{player.player_id}}\', this); return true;{{/if}}\">\n\n                            <player-name {player}=\"player\" {options}=\"options\"></player-name>\n                        </a>\n                    {{else}}\n                        <player-name {player}=\"player\" {options}=\"options\"></player-name>\n                    {{/if}}\n\n\n                    <feature-icon type=\"article\" types=\"articles\"\n                                  {options}=\"options\"\n                                  {has-media}=\"hasMediaContent \'articles\'\"></feature-icon>\n                    <feature-icon type=\"photo\" types=\"photos\"\n                                  {options}=\"options\"\n                                  {has-media}=\"hasMediaContent \'photos\'\"></feature-icon>\n                    <feature-icon type=\"video\" types=\"videos\"\n                                  {options}=\"options\"\n                                  {has-media}=\"hasMediaContent \'videos\'\"></feature-icon>\n\n                    <a class=\"hidden-small live-at-video\" target=\"_blank\" href=\"{{player.liveAt}}\" style=\"{{^if player.liveAt}}display:none;{{/if}}\"></a>\n\n                    {{#if options.showSponsorLogo)}}\n                        <img class=\"hidden-small sponsor-logo\" src=\"{{#if options.isMyLb}}{{options.myLbPlayerSponsor}}{{else}}{{options.playerSponsor}}{{/if}}\" alt=\"{{options.sponsorName}}\" />\n                    {{/if}}\n\n                    {{#if options.showOcqsLogo}}\n                        <img class=\"ocqs-logo\" src=\"{{#if options.isMyLb}}{{options.ocqsMyLbLogo}}{{else}}{{options.ocqsLogo}}{{/if}}\" alt=\"\" />\n                    {{/if}}\n                </div>\n            </td>\n\n            <td class=\"col-total\">\n                {{#if showDashes}}
it’s too long to see it all
Christopher Oliphant
@RALifeCoach
Mar 25 2016 12:59
If I take a small segment of my stache and rename it to mustache and run can-compile, I get:
(function(window) {
 can.view.preloadStringRenderer('player-row_mustache',can.Mustache(function(scope,options) { var ___v1ew = [];___v1ew.push(
"<div class=\"leaderboard-item player-row-");___v1ew.push(
can.view.txt(
true,
'div',
'class',
this,
can.Mustache.txt(
{scope:scope,options:options},
null,{get:"pid"})));___v1ew.push(
" ");___v1ew.push(
can.view.txt(
true,
'div',
'class',
this,
can.Mustache.txt(
{scope:scope,options:options},
null,{get:"highlight"})));___v1ew.push(
" ");___v1ew.push(
can.view.txt(
true,
'div',
'class',
this,
can.Mustache.txt(
{scope:scope,options:options},
null,{get:"expanded"})));___v1ew.push(
"\"",can.view.pending({scope: scope,options: options}),">");___v1ew.push(
"\n    <table class=\"table\">\n        <tr class=\"row-main\">");___v1ew.push(
"\n");___v1ew.push(
can.view.txt(
0,
'tr',
0,
this,
can.Mustache.txt(
{scope:scope,options:options},
"^",{get:"isProAm"},[

{fn:function(scope,options){var ___v1ew = [];___v1ew.push(
"                <td class=\"col-pin\">\n                <span class=\"favorite add-to-favorite\">\n                    <span class=\"favorite-tooltip\">\n                        Add player to<br />\n                        <strong>My Leaderboard</strong>\n                    </span>\n                </span>\n                <span class=\"favorite remove-from-favorite\">\n                    <span class=\"favorite-tooltip\">\n                        Remove player from<br />\n                        <strong>My Leaderboard</strong>\n                    </span>\n                </span>\n                </td>");___v1ew.push(
"\n");return ___v1ew.join("");}}])));___v1ew.push(
"        </tr>\n    </table>\n</div>\n");; return ___v1ew.join('') })); 
})(this);
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 25 2016 13:01
yes b/c it's not the same parser
Christopher Oliphant
@RALifeCoach
Mar 25 2016 13:03
agreed - so is there a stache parser for precompiling?
turning it into a single string is not exactly pre-compiling - and it made no difference when I tried using it
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 25 2016 13:04
I dont think precompling the stache can enhance the perfs
It's already parsed
Christopher Oliphant
@RALifeCoach
Mar 25 2016 13:06
then I guess my brief venture into CanJS has come to an end :-(
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 25 2016 13:07
why?
I will show you and example that handle many rows of todos
Christopher Oliphant
@RALifeCoach
Mar 25 2016 13:08
A todo has 2 fields on each row. The stache file is 10-15 lines long.
My stache file is over 200 lines long
with 30 fields on each row with many conditions affecting those fields
Hey, I am open to being convinced. Bring my run times down from 5 seconds to < 1 second and I am sold.
But as it stands right now, the response times would not be acceptable for the client
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 25 2016 13:12
It depends on many factors
if I can not have all the code involved for rendering and binding I can not give a right diagnostic
Christopher Oliphant
@RALifeCoach
Mar 25 2016 13:15
those are the three main elements
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 25 2016 13:18
Im seeing the bin
Christopher Oliphant
@RALifeCoach
Mar 25 2016 13:19
they are combined as follows:
            this.playerRowMap = new global.pgatour.leaderboard.components.playerRow.PlayerRowMap(data);
            var template = can.stache('<player-row id="player-row-' + this.pid + '"></player-row>');
            this.container.append(template(this.playerRowMap));
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 25 2016 13:23
@RALifeCoach I have to take time to see what's going on in your code
Christopher Oliphant
@RALifeCoach
Mar 25 2016 13:27
no problem - take your time
Matthew Phillips
@matthewp
Mar 25 2016 13:44
The template being precompiled or not is not related to your issue
Christopher Oliphant
@RALifeCoach
Mar 25 2016 13:45
All right. As a point of interest, is there a compiler built into the steal-tools? I saw conflicting information about that when I looked it up in google.
Matthew Phillips
@matthewp
Mar 25 2016 13:45
could you file a bug? we're more likely to look into performance issues than anything else
there's a compiler/plugin for steal
Christopher Oliphant
@RALifeCoach
Mar 25 2016 13:46
I can file a bug. Through github?
Matthew Phillips
@matthewp
Mar 25 2016 13:47
yeah, canjs/canjs
lay out what you are trying to do and the performance you're seeing
Christopher Oliphant
@RALifeCoach
Mar 25 2016 13:48
I’m sorry I haven’t filed a bug before. Do I open an issue?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 25 2016 13:51
Yes open an issue
Christopher Oliphant
@RALifeCoach
Mar 25 2016 13:54
As a point of interest, is there a compiler built into the steal-tools? I saw conflicting information about that when I looked it up in google.
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 25 2016 13:54
Christopher Oliphant
@RALifeCoach
Mar 25 2016 13:55
Are you going to need the jsbin data for the issue?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 25 2016 13:59
the jsbin yes and put all information that you judge can help
Christopher Oliphant
@RALifeCoach
Mar 25 2016 14:04
have you any ideas from your initial investigation?
As a point of interest, is there a compiler built into the steal-tools? I saw conflicting information about that when I looked it up in google.
Matthew Phillips
@matthewp
Mar 25 2016 14:06
is there a compiler built into the steal-tools
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 25 2016 14:06
yes @matthewp already answered that :)
Matthew Phillips
@matthewp
Mar 25 2016 14:06
What do you mean? If you use steal your templates will be built into production .js, is that what you mean?
you can just `import template from 'tmpl.stache';
and not have to worry from there
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 25 2016 14:07
For the code I saw it quickly b/c Im working right now
Christopher Oliphant
@RALifeCoach
Mar 25 2016 14:16
Sorry I missed the earlier answer
Thomas Sieverding
@Bajix
Mar 25 2016 23:17
@matthewp He’d still need the ! though: import template from ‘tmpl.stache!’;