Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Dec 14 20:01
    greenkeeper[bot] labeled #5450
  • Dec 14 20:01
    greenkeeper[bot] opened #5450
  • Dec 14 20:00

    greenkeeper[bot] on semver-7.0.0

    chore(package): update semver t… (compare)

  • Dec 14 16:58
    millette starred canjs/canjs
  • Dec 14 00:14
    greenkeeper[bot] labeled #5449
  • Dec 14 00:14
    greenkeeper[bot] opened #5449
  • Dec 14 00:14

    greenkeeper[bot] on can-super-model-2.0.0

    fix(package): update can-super-… (compare)

  • Dec 14 00:13
    greenkeeper[bot] labeled #5448
  • Dec 14 00:13
    greenkeeper[bot] opened #5448
  • Dec 14 00:13

    greenkeeper[bot] on can-define-rest-model-2.0.0

    fix(package): update can-define… (compare)

  • Dec 14 00:12
    greenkeeper[bot] labeled #5447
  • Dec 14 00:12
    greenkeeper[bot] opened #5447
  • Dec 14 00:12

    greenkeeper[bot] on can-define-realtime-rest-model-2.0.0

    fix(package): update can-define… (compare)

  • Dec 14 00:07
    greenkeeper[bot] labeled #5446
  • Dec 14 00:07
    greenkeeper[bot] opened #5446
  • Dec 14 00:07

    greenkeeper[bot] on can-connect-ndjson-2.0.0

    fix(package): update can-connec… (compare)

  • Dec 13 21:27

    greenkeeper[bot] on @octokit

    (compare)

  • Dec 13 21:25

    greenkeeper[bot] on @octokit

    chore(package): update @octokit… (compare)

  • Dec 13 21:21

    greenkeeper[bot] on @octokit

    (compare)

  • Dec 13 21:20

    greenkeeper[bot] on @octokit

    chore(package): update @octokit… (compare)

Christopher Oliphant
@RALifeCoach
Kevin Phillips
@phillipskevin
@RALifeCoach so your performace is better now using LazyMap?
Christopher Oliphant
@RALifeCoach
I am working through the changes now and I will keep you posted
the update is now down to 1 second
I was really hoping to have it lower
in the .6-.8 range
Christopher Oliphant
@RALifeCoach
            var template = can.stache('<player-row id="player-row-{{pid}}" {pid}="pid" {parent}="parent"></player-row>');
            var fragment = template({
                pid: this.pid,
                parent: this
            });
the player-row component has a viewModel and in the viewModel there is a set on pid. However, the set isn’t getting called. Instead the component starts trying to fill out the fragment from it’s stache view.
Thomas Sieverding
@Bajix

@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.

Guido Smeets
@gsmeets
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?
Mohamed Cherif Bouchelaghem
@cherifGsoul
@gsmeets did you do a filter for closed issues?
Guido Smeets
@gsmeets
@cherifGsoul yeah I did, just can't recall what it was named
I, got it #1700
Mohamed Cherif Bouchelaghem
@cherifGsoul
ok I tought it was opened by you ;)
Dovid Bleier
@dbleier
when a compute changes value, do only other define getters that use that compute rerun, or do map methods using the compute also rerun?
Mohamed Cherif Bouchelaghem
@cherifGsoul
@dbleier in stache I think both
Dovid Bleier
@dbleier
@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
Mohamed Cherif Bouchelaghem
@cherifGsoul
you should bind an event handler on that compute
Dovid Bleier
@dbleier
how do I do that inside of a map? all the examples I saw use bind as an external line of code
Mohamed Cherif Bouchelaghem
@cherifGsoul
@dbleier do you use can.map.define plugin?
Dovid Bleier
@dbleier
do you mean in viewModel: { events: { {someprop change}: function()
yes
Mohamed Cherif Bouchelaghem
@cherifGsoul
so you can have set setter on that prop that invoke your method
Dovid Bleier
@dbleier
ah right, let me think about how that would work in my design
Mohamed Cherif Bouchelaghem
@cherifGsoul
ok
Dovid Bleier
@dbleier
@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) {
  }
}
Christopher Oliphant
@RALifeCoach

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.

Dovid Bleier
@dbleier
what would I bind to to emit a change event when the List is updated?
Mohamed Cherif Bouchelaghem
@cherifGsoul
@dbleier I think you should listen to sign changes
Dovid Bleier
@dbleier
sign the VM prop or the connect prop?
I don't think the sign getter is called again after the list is updated
at least I don't see that happening
Mohamed Cherif Bouchelaghem
@cherifGsoul
the setter should be called
@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 :/
Dovid Bleier
@dbleier
@cherifGsoul I just but a debugger; line in set for both signPromise and sign and neither got hit
Mohamed Cherif Bouchelaghem
@cherifGsoul
@dbleier can you make a jsbin?
Dovid Bleier
@dbleier
ok
Christopher Oliphant
@RALifeCoach
@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.
Mohamed Cherif Bouchelaghem
@cherifGsoul
@RALifeCoach
   can.Component.extend({
tag: ‘my-component’,
template: can.view(‘#some-template’),
viewModel: {
    define: {
        xxx: { type: ‘string’ }
    }
},
events: {
"{viewModel} xxx":function(){
}
}
});
Justin Meyer
@justinbmeyer
@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
Christopher Oliphant
@RALifeCoach
@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.