These are chat archives for canjs/canjs

4th
Jul 2018
qantourisc
@qantourisc
Jul 04 2018 05:22
I think thats a dev build, there is a production build ? /me looks forit
qantourisc
@qantourisc
Jul 04 2018 06:03
Moving the entire logic: For Row -> For Colums -> If show -> Display-Data into a single stacheHelper really sped up things. Just wondering if there is a way that is nicer, where we are not resolving to manual html generation :)
Justin Meyer
@justinbmeyer
Jul 04 2018 14:16
If you don’t care about observability, you can turn it off with define maps by setting the type to “any”. This will not only speed up assigning that property, stache will render faster too
Bitcentive has a pretty big grid of maybe 30x20. I had to cache some calculations so it would render faster
Remind me tomorrow and I’ll post examples
qantourisc
@qantourisc
Jul 04 2018 14:43
My self-emposed speed requirements are rather high though ;) About 300ms for 40 rows @ 8colums is about the max ;)
Justin Meyer
@justinbmeyer
Jul 04 2018 16:17
If you can get me a demo of your setup, I can look at how we can speed up the performance
Getting examples is SUPER helpful
qantourisc
@qantourisc
Jul 04 2018 18:29
Suppose I could make a demo, where do you suggest I make one ?
But imo it's quite typical :D
qantourisc
@qantourisc
Jul 04 2018 19:43
@justinbmeyer Got some test-example, where would you like it ?
Single contained .html file
well and 1 CDN script
Justin Meyer
@justinbmeyer
Jul 04 2018 19:44
if it's all contained, you might be able to stick it in a JSBin, CodePen, or JSFiddle?
qantourisc
@qantourisc
Jul 04 2018 19:46
@justinbmeyer https://jsbin.com/soxojenaci/edit?html,output <= does this work for you ?
Excuse any mess / lack of comments etc ;)
I know some ways to speed it up, by stuff I mentioned before, but this is what I'd roughly like to write, and have it fast ;)
Justin Meyer
@justinbmeyer
Jul 04 2018 19:49
yes, that works, I'll check it out
thanks
qantourisc
@qantourisc
Jul 04 2018 19:52
It's just a horrible amount of nested-for-loops constructing big fat objects and doing tracing/and what not.
This kind of code runs slow anywhere in my experience ? (For example mako templates in python on a server.)
You need some kind of C/C++/... code to run this fast :D
Justin Meyer
@justinbmeyer
Jul 04 2018 19:54
one thing is that it is using can.Map
can.DefineMap is much faster
qantourisc
@qantourisc
Jul 04 2018 19:54
intresting
Justin Meyer
@justinbmeyer
Jul 04 2018 19:59
value:from="../{{key}}"
I think you want something more like value:from="../[key]"
the other thing is going to add some performance costs
qantourisc
@qantourisc
Jul 04 2018 20:07
https://jsbin.com/napetasolo/1/edit?html,console,output <= those tips shaved of a litle bit, like 0.9 -> 0.8 seconds
But nothing as fast as just taking the entire thing out and tossing it to some stacheHelper that does entire template thing in javascript with for loops and if elses
Which is ofcourse not a fair comparison, but still ;)
What DOES bother me atm:
can.route is borked for me atm :/
Let me cook something up
Justin Meyer
@justinbmeyer
Jul 04 2018 20:12
@justinbmeyer Faster compared to what ?
But not measurably faster without proper benchmarks (instead of hitting F5, to much variation ;)
Justin Meyer
@justinbmeyer
Jul 04 2018 20:16
our computers are different speeds
so yeah, I wanted to know if it was faster compared to what you had previously
so on the routing bin
what were you expecting link to produce?
qantourisc
@qantourisc
Jul 04 2018 20:17
"/login"
but I never got it to work properly in v2 either, so I might just have it all wrong
Justin Meyer
@justinbmeyer
Jul 04 2018 20:19
So, the state object that you pass to .link(text, state) is used to create the URL
qantourisc
@qantourisc
Jul 04 2018 20:19
so it's always a #! ?
Justin Meyer
@justinbmeyer
Jul 04 2018 20:19
so {tab:"test"} is going to replace the tab in "/{tab}" with test
it's always #! if you are using hashchange routing
if you load can-route-pushstate it changes to use / as the root
qantourisc
@qantourisc
Jul 04 2018 20:20
Suppose #! has a few advantages
Justin Meyer
@justinbmeyer
Jul 04 2018 20:21
the big advantage is that you don't need server support
say you setup a routing rule like .register("{page}/{action}")
qantourisc
@qantourisc
Jul 04 2018 20:22
Indeed ;)
Atm I have some extra code in the server for it ;)
Justin Meyer
@justinbmeyer
Jul 04 2018 20:22
and someone started at / but navigated to recipes/edit ... if they hit the browser refresh, you have to make sure the same html page that loads all your scripts is returned
qantourisc
@qantourisc
Jul 04 2018 20:23
yep ;)
Justin Meyer
@justinbmeyer
Jul 04 2018 20:23
and relative paths could change .. like if images were in /images
from / it's ./images/foo.png, then at recipes/edit it becomes ../images/foo.png
added the bin to the performance proposal: https://github.com/canjs/canjs/issues/4211#issuecomment-402554324
qantourisc
@qantourisc
Jul 04 2018 20:27
Dam, you guys seem to some nice work behind the screen !
O btw: currently I register each component in some map, so I can then check if a component is ready to display.
Or is there a location in can where I can check if a component has been registered ?
Justin Meyer
@justinbmeyer
Jul 04 2018 20:31

Dam, you guys seem to some nice work behind the screen !

Thanks! You seem great too.

qantourisc
@qantourisc
Jul 04 2018 20:31
meh
Justin Meyer
@justinbmeyer
Jul 04 2018 20:31
What do you mean by "register"?
haha
Do you mean when a component has been added to the page?
qantourisc
@qantourisc
Jul 04 2018 20:33
myAppState.loaded_components =  {}; 
function register_component( comp ){ myAppState.loaded_component[ comp.prototype.tag] = true }; 
register_component( can.component.extend() );
Asked differently: is there a place where I can fetch all the can.compent.extend that have been ran ?
Justin Meyer
@justinbmeyer
Jul 04 2018 20:34

btw, if you use three ` before and after your code

CODE

it formats your code for you

image.png
THIS IS MY CODE

that looks like you are trying to register all components that have been DEFINED

  • DEFINED means .extend

  • I interpret "ran" as instantiated ... which means an instance of an extended component was created

can-view-callbacks has the custom element registry
I don't know if we expose the whole registry so you can loop through it though
qantourisc
@qantourisc
Jul 04 2018 20:38
_tags ... so "do not use" ? ;)
hmmm doesn't look like an observable
o wait it might be
Justin Meyer
@justinbmeyer
Jul 04 2018 20:42
it's not observable
what do you want to do with it?
qantourisc
@qantourisc
Jul 04 2018 20:43
Then I can't use it ;) I need it to act on updates.
var spinner = can.stache("<i class='fa fa-spin fa-spinner' title='{{spinner_alt}}'></i>");
can.stache.registerHelper("loaded",
    function(comp,options){
        let value = can_resolve(comp);
        let state = options.scope.get("appstate.loaded."+value);
        if ( state ) return options.fn();
        return spinner( {spinner_alt:"Loading or missing/unregistered component: "+can.stache.safeString(value)} );
    }
);
And then you do {{#loaded some-comp}}<some-comp from:bind="stuff"/>{{/loaded}}
That or you make sure the comp is a dependency of your master comp ;)
But stuff is rolling like a train now ;)
Justin Meyer
@justinbmeyer
Jul 04 2018 21:17
so if you are using DoneJS (or steal), you can progressively load components and show a spinner while they are loading declaratively in HTML
PlaceMyOrder does this
<can-import from="components/my-component">
  {{#if isPending}}SPINNER{{/if}}
  {{#if isResolved}}<my-component/>{{/if}}
</can-import>
Thomas Sieverding
@Bajix
Jul 04 2018 22:13
Anyone tried Typescript w/ CanJS? I’ve never actually used Typescript but I do like the idea of better IDE integration
qantourisc
@qantourisc
Jul 04 2018 22:13
Another question: is there a way to have a read-only var from a map, but how do i set and get it then from within the definemap ?
Thomas Sieverding
@Bajix
Jul 04 2018 22:16
@qantourisc maybe look at using seal: https://canjs.com/doc/can-define/map/map.seal.html
Oh I’m thinking Object.freeze
qantourisc
@qantourisc
Jul 04 2018 22:28
Nea it's not seal i am looking for ;)
one way to do it is like: DefineMap({ _var: {}, var: { get: return this.get(_var); set: undefined} });
But I don't quite like that :p
Define a property that uses the fn to lazily init once read and isn’t writable