Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 18:27
    greenkeeper[bot] labeled #5392
  • 18:27
    greenkeeper[bot] opened #5392
  • 18:27

    greenkeeper[bot] on core-js-3.3.3

    chore(package): update core-js … (compare)

  • Oct 18 22:20
    greenkeeper[bot] labeled #5391
  • Oct 18 22:20
    greenkeeper[bot] opened #5391
  • Oct 18 22:20

    greenkeeper[bot] on can-observable-mixin-1.0.3

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

  • Oct 18 19:08
    cherifGsoul labeled #5390
  • Oct 18 19:07
    cherifGsoul opened #5390
  • Oct 18 18:45
    greenkeeper[bot] labeled #5389
  • Oct 18 18:45
    greenkeeper[bot] opened #5389
  • Oct 18 18:45

    greenkeeper[bot] on can-observable-bindings-1.3.0

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

  • Oct 18 18:29

    matthewp on master

    Update dist for release (compare)

  • Oct 18 18:29

    matthewp on v6.1.3

    Update dist for release 6.1.3 (compare)

  • Oct 18 17:59

    matthewp on can-observable-array-1.0.2

    (compare)

  • Oct 18 17:59

    matthewp on master

    fix(package): update can-observ… Merge pull request #5388 from c… (compare)

  • Oct 18 17:59
    matthewp closed #5388
  • Oct 18 16:46
    greenkeeper[bot] labeled #5388
  • Oct 18 16:46
    greenkeeper[bot] opened #5388
  • Oct 18 16:46

    greenkeeper[bot] on can-observable-array-1.0.2

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

  • Oct 18 12:45
    greenkeeper[bot] labeled #5387
Christopher Oliphant
@RALifeCoach
At this point, the code is as small as I can make it and still have it crash. The bug may be in lazy map, it may be in component, it may be somewhere else altogether.
here is the latest - I will also post the link in the issue
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