These are chat archives for canjs/canjs

25th
Oct 2017
Gregg Roemhildt
@roemhildtg
Oct 25 2017 14:18
@bmomberger-bitovi I just got that issue we were working on last week figured out! - adding the can-symbols to the esri/arcgis accessor class
        // register one single watcher
        if (!handlers[key].watch) {
            const watchProp = path ? `${path}.${key}` : key;
            console.log(watchProp);
            handlers[key].watch = (parent || obj).watch(watchProp, (newValue, oldValue, propertyName, target) => {
                console.log(newValue);
                handlers[key].handlers.forEach((handle) => {
                    handle.call(window, newValue, oldValue); //<-- I changed "obj" to "window" here and now its working!
                });
            });
        }
I noticed that other stache listeners that call can-observation.onDependencyChange do so with the window binding. That did the trick :)
Gregg Roemhildt
@roemhildtg
Oct 25 2017 14:30
zoom.gif
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 15:06
Fascinating. You are correct that we don't generally call handlers on any particular object (handle.call(window, ...) is mostly the same as handle(...), but I didn't think it would cause issues like that.
Gregg Roemhildt
@roemhildtg
Oct 25 2017 15:27
Haha, so I'm confused again. I had it working.
I was testing something, and when the template was rendered, I had a setInterval that would update one prop I called "timer" on the viewModel...just to see what actually happens when a value changes. Now, if I remove this setInterval and this timer property, the view.zoom and other props are not updating :confused:
You were right though, I removed the handle.call and am just calling the handle and it appears work the same, still only if that timer property is being updated though
Its almost like that timer property is being registered as a dependent of the other props, and when timer updates, then can is checking for updates on those other props
Gregg Roemhildt
@roemhildtg
Oct 25 2017 15:33
If I set the timer to 1000 ms intervals, those properties only update once every second
So it had nothing to do with the handle.call, whatnot, its that the view.zoom is dependent on this timer prop that got registered
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 15:35
You may need to delve into the observation for the timer property and see what's going on when it updates.
Gregg Roemhildt
@roemhildtg
Oct 25 2017 15:41
Yeah, that's what I was going to look into next. Any tips on where to look? I get lost in the canBatch and other stacks lol. Its a little intimidating :scream:
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 15:44
https://github.com/canjs/can-event/blob/master/batch/batch.js#L318 is the relevant line for can-batch. Batched tasks get a 3-tuple of the function to call, the context object, and the args.
You would probably just want to make sure once that there aren't more things in the collection queue at the time the interval function causes the update.
They'd all be flushed at once, but it doesn't make sense for them all to be waiting on that one trigger, because starts and stops on batches generally happen in pairs.
Gregg Roemhildt
@roemhildtg
Oct 25 2017 16:06
I checked those lines, and I'm not seeing anything obvious. My update handle for view.zoom and view.center get called when the values change, but the value just doesn't update in stache until the timer runs. I can reproduce this in the jsbin: https://jsbin.com/niwotigawa/1/edit?js,console,output
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 16:24
I got it.
I think I know what's going on.
Observation dependencies aren't updated until a batchEnd event is fired.
So if you wrap your handler loop with can.batch.start() and can.batch.stop() it works
Gregg Roemhildt
@roemhildtg
Oct 25 2017 16:26
So, maybe I need to wrap my watch handle in batch start?
Ah :)
Gosh, its so simple, and now it works perfectly!
Gregg Roemhildt
@roemhildtg
Oct 25 2017 16:32
Thank you much! I think I might submit an update some of those can-symbol docs with what I've found, it might be helpful down the road.
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 16:35
Thank you as well. Your perspective helps us better understand where hidden dependencies may lie
Also we are in the process of overhauling observations and live binding of views so this may have fewer gotchas in the near future
Gregg Roemhildt
@roemhildtg
Oct 25 2017 16:38
zoom.gif
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 16:39
Looks good. You might want to truncate some of those decimal places, though.
Gregg Roemhildt
@roemhildtg
Oct 25 2017 16:39
Hey anytime :) Canjs is super cool.
Yes, I will be doing that :)
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 16:58
I'm talking about your difficulty getting your observable to work in the company Slack right now. Starting a batch was the right answer, but if you upgrade to CanJS 4.0 later (not released yet), you'll have to refactor this to use can-queues
Every time @@can.onKeyValue is called you'll get a queue reference to add the handler to when dispatching updates. It makes this process a bit easier, because you never call handlers directly and don't manage batching, but you will have to migrate your code to it.
Gregg Roemhildt
@roemhildtg
Oct 25 2017 17:03
Yep that makes sense. I've vaguely heard about the queues and it sounds like the right move...better debugging right?
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 17:04
that would definitely be part of it. I think we have 4 major queues that get used (notifying events, computing derived values, updating the view, etc.), but you can trace back a little easier to see where things have come from
Gregg Roemhildt
@roemhildtg
Oct 25 2017 17:17
Yeah, that sounds super useful. Do you know, are there any plans to develop a tool for chrome/firefox dev tools? Kind of like react and vue have?
Where you can inspect an element's scope, log stuff, etc
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 17:17
I would love to have one but I don't know of any plans to make one.
I get why it's so important for React, because the virtual DOM and components aren't accessible at all from the global context.
With Vue you can just look at the __app__ property on the element.
Gregg Roemhildt
@roemhildtg
Oct 25 2017 17:19
Its not too bad either with canjs...just import can-view-model and go
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 17:19
yes, though I think there's sometimes a learning curve for people because it's not obvious how to import that from the console.
Gregg Roemhildt
@roemhildtg
Oct 25 2017 17:22

Right. Maybe a helpful debug note when the console is open could be displayed. I've seen some libs do that. Just dev.log

Welcome to canjs: to debug a component, type steal.import('can-view-model').then((vm) => { window.vm = vm; }); followed by
vm('my-custom-component').serialize();
or something

Brad Momberger
@bmomberger-bitovi
Oct 25 2017 17:22
If you're loading can with steal that works.
But if it's a global build you need can.viewModelor _define.modules['can-view-model']
And that's kind of hairy. I don't know of any place where we have code injected based on the module loader target.
(AMD require() would also need the treatment)
Gregg Roemhildt
@roemhildtg
Oct 25 2017 17:32
True. Good points
Nico R.
@nriesco
Oct 25 2017 19:56
anyone has implemented any validation on forms with canjs ? any tips or helpers?
Frank Lemanschik
@frank-dspeed
Oct 25 2017 19:59
i think that isn't needed
you can view the view model directly in the console
open the chrome dev console and look for the component tag
select it and then in console do console.log($0)
canjs internal attaches the view model to the component tags
you can also click on the small ev sign if you see it :)
depends on your browser version
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 20:06
The actual view model data isn't stored on the element.
Frank Lemanschik
@frank-dspeed
Oct 25 2017 20:06
it is
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 20:06
The only thing on the element is an id that maps to the DOM data cache.
Frank Lemanschik
@frank-dspeed
Oct 25 2017 20:06
i coded own ataching meachanims i aim to know ober 80% of active canjs code
thats not true
wait i show you how it works
it goes over can-view-callbacks and that
can-view-autorender ataches the ev to the component tag
Kevin Phillips
@phillipskevin
Oct 25 2017 20:08
what event are you talking about?
Frank Lemanschik
@frank-dspeed
Oct 25 2017 20:08
the viewModel
aka State
Kevin Phillips
@phillipskevin
Oct 25 2017 20:08
the viewModel isn't an event
Frank Lemanschik
@frank-dspeed
Oct 25 2017 20:08
no thats right but it shows the viewModel because of the event bindings
that are done
at present the main point is you can access the viewModel directly via console
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 20:09
You can see all the view models if you look at the can-util/dom/data/core module (in 3.10 and below) or the can-dom-data-state module (in 3.11 and later)
Kevin Phillips
@phillipskevin
Oct 25 2017 20:10
I don't think you can access the viewModel from the console
unless you're using jquery
Frank Lemanschik
@frank-dspeed
Oct 25 2017 20:10
sure you can
select the component tag
Kevin Phillips
@phillipskevin
Oct 25 2017 20:10
or you expose can-view-model glbally
Frank Lemanschik
@frank-dspeed
Oct 25 2017 20:10
and console.log($0)
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 20:10
that doesn't show view model data
Frank Lemanschik
@frank-dspeed
Oct 25 2017 20:10
selectedTag === $0
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 20:10
that shows the content of the tag.
Kevin Phillips
@phillipskevin
Oct 25 2017 20:10
image.png
Frank Lemanschik
@frank-dspeed
Oct 25 2017 20:11
wait i need to look at the code long time don't did that
Kevin Phillips
@phillipskevin
Oct 25 2017 20:11
$0 is just the currently highlighted element
Frank Lemanschik
@frank-dspeed
Oct 25 2017 20:11
but it must be there
Kevin Phillips
@phillipskevin
Oct 25 2017 20:11
that's just a chrome devtools thing
Frank Lemanschik
@frank-dspeed
Oct 25 2017 20:11
its set there
jquery does nothing else then selecting that dom node
Kevin Phillips
@phillipskevin
Oct 25 2017 20:13
no
jquery adds methods
$($0).viewModel()
would give you the viewmodel
Frank Lemanschik
@frank-dspeed
Oct 25 2017 20:15
    var scope = canViewModel(el);

    each(el.attributes || [], function(attr) {
        setAttr(el, attr.name, scope);
    });

    events.on.call(el, "attributes", function (ev) {
        setAttr(el, ev.attributeName, scope);
    });

    return scope;
thats it
thats exactly the place where the viewScope gets attached
i know that because i coded own versions of that
i could not have it working when i would be wrong
but i maintain a hell ton of code
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 20:16
That doesn't set the scope as the attr
Frank Lemanschik
@frank-dspeed
Oct 25 2017 20:16
so its not easy to find the examples
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 20:16
It reads the value of the attr from the element and sets that on the scope.
Frank Lemanschik
@frank-dspeed
Oct 25 2017 20:17
this is the setupScope function
render(renderer, setupScope(el), el);
sets it
BTW @phillipskevin we should really replace that with canReflect.setKeyValue
Kevin Phillips
@phillipskevin
Oct 25 2017 20:19
yeah, there's an issue open
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 20:19
:+1:
@frank-dspeed setupScope() does not set the scope on the element.
Frank Lemanschik
@frank-dspeed
Oct 25 2017 20:21
i will find that code snippet over the next week again
canjs is really splitted
i am sure it sets exactly there and its even documented some where
maybe its in can-util or some of the new smaller packages i really don't remember it
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 20:22
can-dom-data-state perhaps?
Frank Lemanschik
@frank-dspeed
Oct 25 2017 20:22
possible
i remember that part
i was converting can-component
to webcomponent
thats why i was going so deep
Kevin Phillips
@phillipskevin
Oct 25 2017 20:23
but that's not on the actual element
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 20:24
domData works a lot like jQuery's data store.
It's a cache dictionary and everything that has associated data gets an expando property matching a key in the dictionary.
Frank Lemanschik
@frank-dspeed
Oct 25 2017 20:25
hmm possible but hopefully soon don't matters anymore
:D
with the new nativ es6 support in browsers
no need to relay on that
the viewModel will be drivied directly from the component
maybe it ends up in only can stache without even nesting of components
for small code snippets even can stache and element are not needed
we have the nativ MutateState Observer
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 20:27
You can make can-components without stache.
Frank Lemanschik
@frank-dspeed
Oct 25 2017 20:27
and that already builds the better logging for state mutations
you can't have livebindings without stache
anyway can-component is not needed anymore
as it combines stache + viewModel
with a tag
that tag now gets defined via the webcomponent
so whats left is render stache + viewModel
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 20:29
You can have live bindings without stache. It's more work than it's worth unless you make your own templating language, but it's entirely possible.
Frank Lemanschik
@frank-dspeed
Oct 25 2017 20:29
also big bundels will not happen any more
and complex bundle algos arn't needed
as long as u use modlet structure
sure livebindings without stache are easy
i demonstrated it to you yesterday
and live binded 2 form filds via streams
with only 4 lines of code could reduce to a even more shorter 2 line version
livebinding is as easy as using MutationObserve
the new browser api that replaced dom events
and for form filds and that simply use nativ events
but the most hard canjs issues are all solved by webcomponents
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 20:34
observing mutations and browser events is only half the equation. You also need to reactively redraw on data changes.
Frank Lemanschik
@frank-dspeed
Oct 25 2017 20:34
and all done issues
yes thats the smallest problem with webcomponents
as this === element
its as easy as this.innerHTML = 'REDRAWN'
and with mutation observe you get add remove events from lists and all that
its simple on component level
its only complex on a big stack but because of the encapsulation this is easy
more easy as with a framework
only some helpers are needed like domDiff for compatibility
and redraw of html partial
for example if i render a ejs template and then only want to render changed values
then i can use domDiff on the existing element with the new rendered ejs
that also solves ejs not compatible with define map
that concepts work with anything you can combine react canjs vue all together
ok react is dead :)
because of Facebooks new BSD Licence
but jsx will stay
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 20:40
How does Facebook making React more free kill it?
The old license definitely prevented adoption
one example
there is a lot of text about such stuff
license is a complex issue
that only people that care about such stuff understand
took me years to understand all the models and how they used in diffrent companys
Kevin Phillips
@phillipskevin
Oct 25 2017 20:41
they re-licensed after that
Frank Lemanschik
@frank-dspeed
Oct 25 2017 20:42
any way react is dead
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 20:42
Yeah, dude, how did you miss that?
It's pure MIT now.
Frank Lemanschik
@frank-dspeed
Oct 25 2017 20:42
its easy i don't depend on it
so it is easy to miss
:D
the most importent is i have all issues solved for the future
and if the relicence again it will not make me worry
they offer nothing usefull
donejs offers steal thats usefull at present
don't found something better fitting for legacy es5 code
it even allows some es6 but the production transpiling needs to be done external by babel minify
to get nativ es6
also canjs got the best component system at present in general till its replaced with nativ stuff
Brad Momberger
@bmomberger-bitovi
Oct 25 2017 20:45
We have an open issue for that right now. stealjs/steal#1276
Frank Lemanschik
@frank-dspeed
Oct 25 2017 20:46
i know i created also one
its in rfc
we need to bundle webcomponents with it
that would make it ahead of the competition
i am at present experimenting with a own sort algo for the dependency tree
and then concat the files
but will take time till its as mature as steal is already
i found out steal needs a base url setting :) as alternate to the starting point
i fake that at present with a empty module
this way i can use steal frontend side in webcomponents
ah anyway i write to much i will do screen casts about all that but i think the next 3 years get hot
and i really get reuse able components :)
without all the work that i have when i want to code 50 donejs apps
Frank Lemanschik
@frank-dspeed
Oct 25 2017 20:51
that comes exactly at the right time configuring the new bootstrap with steal is horror
having bootstrap as webcomponent saves new users hours