@RALifeCoach @pYr0x
5) Use computes like a mad man. The goal is to lower unnecessary change events. For example, the isAdmin getter I described above is actually really performant, as now I can bind to it elsewhere, and something like changing users or logging in that would trigger isAdmin to be re-computed wouldn’t trigger other computes that are dependent on isAdmin from re-computing if isAdmin doesn’t change
isAdmin: {
get: function() {
var profile = this.attr('profile');
if (profile) {
return profile.attr('tier') === config.tiers.indexOf('admin');
}
return false
}
}Changing profile / tier would recompute this. But if the value hasn't changed, computes dependent on this wouldn't recompute
ok.. and what about the point 5) bajix said?
Computes cache if they're bound, and then re-compute whenever an observable they've bound to changes. Only if the re-computed value is different will it then emit a change event. So the general technique is to utilize computes for intermediate values, such that more expensive, poorly-cacheable computes would be re-computed less frequently. This is especially true for Component helpers, as new Document Fragments that would otherwise be identical still need to be re-rendered.
There's no need to shy away from components within loops either if that means that you're better able to accomplish the above. Using an extra component wins out if it reduces unnecessary DOM manipulation.
For example, the Chat app I work on uses a message component when iterating user messages. Consecutive messages from the same author are grouped, and messages can come out of order; using a component to manage state based off of the prev/next message means my section helpers trigger O(n^3) times less often.
TLDR; Make cache-able computes. Use cache-able intermediates. Win at helpers. Win at computed objects.
Hmm, there was an issue on github that discussed all the details for the 2.3 binding syntax, I can't find it anymore. Anyone happen to know which issue I'm referring to?
@gsmeets did you do a filter for closed issues?
@cherifGsoul yeah I did, just can't recall what it was named
I, got it #1700
when a compute changes value, do only other define getters that use that compute rerun, or do map methods using the compute also rerun?
@cherifGsoul not in stache, on VM methods that are not stache related, for internal non-visual processing
related to that, when can-connect fall-through-cache updates the List after retrieving updates from the server, I want it to call methods in my VM
I am currently sifting thru can-connect code to understand how it updates the list
you should bind an event handler on that compute
how do I do that inside of a map? all the examples I saw use bind as an external line of code
@dbleier do you use
can.map.define plugin?
do you mean in viewModel: { events: { {someprop change}: function()
yes
so you can have
set setter on that prop that invoke your method
ah right, let me think about how that would work in my design
@cherifGsoul do you know if when fall-through-cache updates, it calls the setter of the prop that called getList?
for example
signPromise: {
get(lastval, set) {
return Sign.getList({...});
},
set(newval) {
}
},
sign: {
get(lastval, set) {
this.attr('signPromise').then(function(signs) { set(signs[0]);}
},
set(newval) {
}
}
further to this discussion, I have a component with it’s internal viewModel i.e.
can.Component.extend({
tag: ‘my-component’,
template: can.view(‘#some-template’),
viewModel: {
define: {
xxx: { type: ‘string’ }
}
}
});I add the component to my page via:
var template = can.stache(‘<my-component id="me"></my-component>’)
$(‘body”).append(template());
var myComponent = $(‘#me’);
myComponent.bind(??????);I want to bind to the component to know when the value of xxx changes.
what would I bind to to emit a change event when the List is updated?
@dbleier I think you should listen to
sign changes
I don't think the sign getter is called again after the list is updated
at least I don't see that happening
@RALifeCoach we can not make it like that
@dbleier sorry I didnt have a closer look at
fall-through-cachebehavior so I dont know how it realy does things :/
@cherifGsoul I just but a debugger; line in set for both signPromise and sign and neither got hit
@cherifGsoul okay, that’s what I thought. What I have done is trigger an event from within the component and listen for the event in the owning module. That works.
@RALifeCoach
can.Component.extend({
tag: ‘my-component’,
template: can.view(‘#some-template’),
viewModel: {
define: {
xxx: { type: ‘string’ }
}
},
events: {
"{viewModel} xxx":function(){
}
}
});
@RALifeCoach was unable to read all of what you wrote ... but I want to address one thing you said .... CanJS, and most frameworks, make your life easier, but that always comes at some performance cost
C makes your life easier than assembly, but at some cost
JavaScript makes your life easier than C, but at some cost
CanJS makes your life easier than plain JS, but at some cost
Why does CanJS's observables covert the entire object into an observable? Because when MOST properties are used (which is the case for MOST apps), its faster to do all of them right away instead of progressively convert them like LazyMap
@justinbmeyer I am willing to accept some performance hit when initially creating the page. I was surprised when updating the page took even longer. My expectation was that Can JS would be quick and efficient especially when no DOM updates were required.
CanJS's observables are "quick" but not quick compared to plain JS objects
they have been worked on a lot to make performance as fast as possible
btw, if you have objects that you don't need observable, you can define their type like
"type": "*"
with the define plugin
those objects will not be converted to Maps / Lists
When I strip down the big object to be an object that contains only needed properties, there is slight improvement on initial load and a huge improvement on update.
I did make use of type: ‘*’ - that gave some improvement
I wonder if this is what @Bajix was talking about
are you listening to "change" events?
the number of props shouldn't matter to update
ah ... if you are listening to "change" events ... then @Bajix is also right that additional slowness will be introduced
in the initial render
b/c bubbling will need to be setup
I don’t have a need to fire events on data changing. The only events would be internal to the UI. (Updating the DOM when a value changed.)
not sure what that means ... does that mean
no, you are not binding on "change" events?
the 1st time you run will set up the cache
then try making a change to the data in the fixture
you'll notice it console.logs the cached data only
if you run a 3rd time you'll see the updates
@RALifeCoach if you'd like to check if bubbling is getting setup, you can put a debugger here: https://github.com/canjs/canjs/blob/master/map/bubble.js#L42
if that gets hit, something is setting up bubbling
the goal is to get logHellos to fire again after cache is updated
@justinbmeyer in many ways my code is quite simple. All data is display only. There is some binding against controls, but not against the data itself.
I have to run to a wedding, so I probably won't check back until tomorrow. thanks for the help
@RALifeCoach if that's the case, I wouldn't convert it to a Map at all
Once everything is loaded, the page is quite quick.
the problem is that on initial display the controls are loaded and then updated on all 156 rows
@justinbmeyer what would you use if not a Map? I thought maps were the heart of canjs. My app is also read only and changes are only based on what is received from the server
Are you suggesting that I pass all data as attributes to the component? There are a lot of attributes!
@justinbmeyer are you still here?
This is the annoying part - someone makes a statement, I ask for clarification and … silence. This doesn’t happen all the time, but enough that it is annoying.
And you guys have been great - I do not say that often enough. I praise you guys to the folks at work. The level of response to questions from original developers is truly amazing.
We are at our work offices and we took time to help you
Thank you :)
It’s just the statement, question, silence that’s trying. If you are busy, fine, just let me know.
:)
He might just mean to pass the raw data to your template
instead of creating a can.Map instance and passing that
Justin made a statement - I don’t need to use a Map. That’s a significant statement, one that the other user questioned as well. We both asked for more details and I now may wait an hour to a few days to get a response.
@RALifeCoach jeez man ... I was literally helping you up to the second I had to leave for a client training
I was late for my car even
sorry for not letting you know
anyway, I'm going to have to start the training now. I will hopefully be available after 7 PM CST, but I might go to dinner
and then talk to my wife / baby
and hopefully after that be available
@justinbmeyer I do appreciate your help. Now that I know, I will make plans to work on other tasks. When you are free, please fill in the details to your “don’t need a Map” statement. I will check tonight or tomorrow for details. Enjoy your time eating, and spending time with your wife and baby.
@RALifeCoach I think @phillipskevin gave details about that
he means use plain javascript objects
@phillipskevin wrote, "@phillipskevin
He might just mean to pass the raw data to your template
instead of creating a can.Map instance and passing that” notice the word ‘might’ and I asked how would I pass the data, would I use attributes when creating the fragment to add to my document?
He might just mean to pass the raw data to your template
instead of creating a can.Map instance and passing that” notice the word ‘might’ and I asked how would I pass the data, would I use attributes when creating the fragment to add to my document?
just like this:
var template = can.stache('<player-row id="player-row-{{pid}}" {pid}="pid" {parent}="parent"></player-row>');
var fragment = template({
pid: this.pid,
parent: this
});
at 10:25 I wrote, "Are you suggesting that I pass all data as attributes to the component? There are a lot of attributes!”
sorry, I wasn’t trying to be confrontational. I just meant, I didn’t think you wanted more info on my suggestion.
so, in the code above, it is just a plain object being passed to the renderer
Those two attributes get converted inside the Map to 50+ attributes. I could reorganize and pass the 50+ attributes in a few objects. Is that what you are suggesting?
I’m not suggesting any detailed solution for your code. I don’t know your codebase that well.
If what you want to do is take data you receive from a server and pass it to a template, you can just do it without creating can.Maps
by passing the raw data to your stache renderer function
I don’t know for sure if that is what Justin is proposing
I will try on JSBin and see how it all hangs together
If I click on ‘here’ before the timer fires, then it works and the timer event throws an exception. If I wait for the timer to fire, the names disappear and clicking on the anchor throws and exception.
It is a short JSBin
Things work fine when I update the simple PID property.
@RALifeCoach is there something specific you want me to look at in the jsbin?
are you just wondering why the last line doesn’t work?
I am just wondering why the last line doesn’t work. It seems I cannot replace an attribute which is an object.
it is set earlier - it becomes unset when I try to update the player object
is this related to the question about not using Maps?
it looks like it’s
toStringing your object
Yes, this is something that will have to happen in my code.
so you call
template({pid: '11111', player: player}) with the initial data from the server
and then later you need to update it?
the data in player will change often
@justinbmeyer in many ways my code is quite simple. All data is display only. There is some binding against controls, but not against the data itself.
I definitely misunderstood that to mean the data wouldn’t be changing
I have to run to a meeting, be back in a few
but maybe Justin can explain more what he was suggesting when he is around later
actually - your question started me thinking - I changed .attr(‘player', player) to .data(‘player’, player) and the JSBin is now working
I don’t see it change to
iiiii ppppp
Bummer
that’s working
it’s a bit sketchy, but it’s working
I’m not really sure if that will perform any better
and it will take me a couple of hours of work to find out
You can just set player to an object
Because I am trying to pass an object into the component via attributes
that didn’t work when I tried it
You’re trying to construct the component from JSON passed as attributes?
I think something akin to data-player=‘{“foo”:”bar”}’ would work
This would only work on insertion
Also, but why?
I have the insertion working fine. I need help getting the update to work.
Why? An idea suggested by Justin.
@justinbmeyer in many ways my code is quite simple. All data is display only. There is some binding against controls, but not against the data itself.
This message was deleted
This message was deleted
@RALifeCoach if that's the case, I wouldn't convert it to a Map at all
since Justin won’t be around until later this evening, I took a guess that he meant to just pass the raw data to the template renderer
then we went down this rabbit hole
@Bajix any ideas on how to pass an object into the component?
can.view(‘#my-template’, { player: {} }, function( frag ) { … })
You have several options. 1) Update it within the component. 2) Update your root scope lexically 3) Use sibling components, write to the reference scope & have your main component bind to changes 4) Use can.viewModel 5) Use Model stores to indirectly update data
can.view will accept a PJSO, can.Map instance, or can.view.Scope instance
- I understand
- I do not understand
- I understand
- How would I access can.viewModel from outside the component?
- I do not know what you mean by Model stores?
BTW, I found another option http://jsbin.com/qahepi/27/edit?html,js,console,output
You could use a can.view.Scope instance to build a scope tree from multiple can.Map instances, that would traverse in reverse order
If you pass a PJSO into can.view, it’ll become a can.Map instance regardless
lol - it was suggested by Justin - I am just trying to figure out what he meant
Here is his statement, "if that's the case, I wouldn't convert it to a Map at all”
and using ‘*’ requires a map
like I said before, I think he might have said that thinking that you don’t need to update the data
“the case” in the statement “if that’s the case” was that your data didn’t need binding
You would need to use a can.Map.extend that takes advantage of type: ‘*’ to prevent those properties from automatically being converted
If you just pass a PJSO into can.view, it’s the same as constructing a can.Map
The only way to avoid implicitely construction can.Map / can.List instances is to explicitely use type: ‘*’ on those properties
You could be right. I will await his return and see what he has to say on the matter. I managed to solve the problem, and that was fun.
It is now time for me to run. Thanks again for all your help and assistance.
Justin will say the same
@Bajix I will be optimistic and see what Justin has to offer, although I expect you are right.