These are chat archives for canjs/canjs

21st
Dec 2016
Gira Minus
@gKreator
Dec 21 2016 07:46
What are streams for?
What are the benefits?
Frank Lemanschik
@frank-dspeed
Dec 21 2016 13:58
gKreator depends on your application how often it updates values
if you do something whats used by many people and should get realtime updates streams are needed
if you need to show values only once you better go with requests
because inital connection time to a stream takes longer in most cases
stream simply means listing to a websockets channel for data
in realy large applications for example kafka
Kevin Phillips
@phillipskevin
Dec 21 2016 14:27
@frank-dspeed I think he is talking about streams like http://canjs.com/doc/can-stream.html
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:29
dosn't that mimic a websocket like behave of computes and that?
Kevin Phillips
@phillipskevin
Dec 21 2016 14:29
@gKreator https://rpominov.github.io/kefir/ is the stream library we’re using. It has some nice examples.
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:29
ya i know it
Kevin Phillips
@phillipskevin
Dec 21 2016 14:29
it can be any event
input events for instance
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:30
ya and a stream is then useable like the stream from lets say a websocket stream
:D
so its like fake websocket :)
or fake is the wrong term your right its simply streaming of events
Kevin Phillips
@phillipskevin
Dec 21 2016 14:30
I thought you meant it was only for websockets
yeah, I get what you’re saying
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:31
i think the case where its suefull is in websocket communication
because its the same formart
Kevin Phillips
@phillipskevin
Dec 21 2016 14:31
I think there are lots of other uses also
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:31
ya probally don't tought much about that i am at present working on a wyswig editor for atom
to build donejs apps
:D
Kevin Phillips
@phillipskevin
Dec 21 2016 14:34
I’ve really wanted streams in previous versions of can when building components that have a property that is derived from several other properties
trying to think of an example
Kevin Phillips
@phillipskevin
Dec 21 2016 14:40
one example I can think of… an <input> that is displaying a value derived from what the user typed instead of exaclty what they typed
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:41
hmmm i tought with 2 way bindings all that don't happens
Kevin Phillips
@phillipskevin
Dec 21 2016 14:41
so like <input ($change)=“setRawInput(%element.value)” {$value}=“filtereredInput” />
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:41
i never runned into that
Kevin Phillips
@phillipskevin
Dec 21 2016 14:41
say you are creating a telephone input… and want to manually remove - characters if the user types them
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:41
i am always wondering what issues the people here are talking about i did realy complex large applications but don't runned into all that
Kevin Phillips
@phillipskevin
Dec 21 2016 14:41
that’s probably not the way to do it, but an example like that
sometimes it’s not about the size of the application
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:42
ya but in my case the size means realy diffrent stuff
Kevin Phillips
@phillipskevin
Dec 21 2016 14:42
just how picky the business owner is
or product manager
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:42
i also do for example market terminals
with scaners
Kevin Phillips
@phillipskevin
Dec 21 2016 14:42
or whoever makes the requirements
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:43
don't know maybe i don't run into that because i make the requirments depending on the goal
Kevin Phillips
@phillipskevin
Dec 21 2016 14:43
yeah, I think that probably has a lot to do with it
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:43
and so i am never forced to be compatible with something that don't works as expected
Kevin Phillips
@phillipskevin
Dec 21 2016 14:43
I’ve built lots of things that became very complex just because someone wanted a very specific behavior
that I would never have built if I were creating the requirements
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:44
ya but you can always code even realy complex stuff with some dirty code
if it only happens once
i cant imagin such complex behavier
Kevin Phillips
@phillipskevin
Dec 21 2016 14:44
so back to my example
<input ($change)=“setRawInput(%element.value)” {$value}=“filtereredInput” />
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:45
you always get values some how process them throw them out
Kevin Phillips
@phillipskevin
Dec 21 2016 14:45
filteredInput could be a getter based on the rawInput
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:45
sure but a function can do that based on the raw input
as well
Kevin Phillips
@phillipskevin
Dec 21 2016 14:45
yeah
I’m getting to the point
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:46
:D
i always solve that via custom functions
all this complex issues all here talking about like getting some values serialized based on conditions
its a function code able even with 100 propertys in minuts
Kevin Phillips
@phillipskevin
Dec 21 2016 14:46
I haven’t even said the complex issue yet...
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:47
then point out the complex part plz
i realy want to understand how to make a app complex :)
Kevin Phillips
@phillipskevin
Dec 21 2016 14:48
so if you have <input ($change)=“setRawInput(%element.value)” {$value}=“filtereredInput” /> and you want to be able to also set the filteredInput
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:48
wait wait why should i want to do that
whats the situation where that happens
Kevin Phillips
@phillipskevin
Dec 21 2016 14:48
so… for example, I recently built a location picker
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:48
when i want to set filtered input in perent i don't need a component
Kevin Phillips
@phillipskevin
Dec 21 2016 14:49
so a user would type in an input
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:49
Location picker for googe maps right?
Kevin Phillips
@phillipskevin
Dec 21 2016 14:49
something like that, yeah
so the user would type in an input, and see a list of locations
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:49
ok
Kevin Phillips
@phillipskevin
Dec 21 2016 14:49
we would show exactly what they typed in the {$value}
unless they selected one of the locations from the list
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:50
so far so well :)
Kevin Phillips
@phillipskevin
Dec 21 2016 14:50
then we would overwrite the {$value} with their selected option
but we also needed to keep their exact search query
so that we could store it in the database
so when they select an option from the list, we can’t overwrite the raw input they typed
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:51
isn't that as easy as writing old value to a var befor replace with selection?
Kevin Phillips
@phillipskevin
Dec 21 2016 14:51
you could do it that way
but then it’s complex when you reload this page
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:52
ok can you explain why i reload the page?
Kevin Phillips
@phillipskevin
Dec 21 2016 14:52
we had like a “My Searches” page
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:52
couldn't i store to localstorage for that case?
Kevin Phillips
@phillipskevin
Dec 21 2016 14:52
where the user could see a list of their search terms and whatnot
anyway… all of this could be solved 100 different ways
my point is, using streams makes this very nice
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:53
ok then i need to look into that
but at present it sounds as it makes that complex
:D
Kevin Phillips
@phillipskevin
Dec 21 2016 14:53
because you can make the filteredInput derived from the rawInput, but also merge it with the selectedLocation stream
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:53
sounds realy cool and awsom but also complex i don't realy understand what that means :)
but i will look into examples when i got time
Kevin Phillips
@phillipskevin
Dec 21 2016 14:54
yeah, hard to explain in chat
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:54
and will then understand it
Kevin Phillips
@phillipskevin
Dec 21 2016 14:54
that’s showing a counter of all of the times a derived property changes
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:54
so its like history
Kevin Phillips
@phillipskevin
Dec 21 2016 14:54
sort of
it’s really just counting
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:55
your using it like that
ok
hmmm ya could make things maybe easyer
Kevin Phillips
@phillipskevin
Dec 21 2016 14:55
so you could do
    get fullName() {
        this.fullNameChangeCount++;
        return this.first + " " + this.last;
    },
    fullNameChangeCount: {
       value: 0
    }
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:55
but i depend always on localstorage to save state
i think that has many advantages
Kevin Phillips
@phillipskevin
Dec 21 2016 14:56
but running side effects like that inside of getters gets very complicated as the component grows
yeah… I’m not really talking about saving state between page loads
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:56
no it also shares values :D
Kevin Phillips
@phillipskevin
Dec 21 2016 14:56
what do you mean?
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:56
a get request to localstorage in javascript is realy quick
:D
imagin 2 component parts
they can simply request local storage
and not any object getter setters
:D
Kevin Phillips
@phillipskevin
Dec 21 2016 14:57
so you’re saying you would store fullNameChangeCount in localStorage?
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:57
sure that
!
Kevin Phillips
@phillipskevin
Dec 21 2016 14:58
ok
Frank Lemanschik
@frank-dspeed
Dec 21 2016 14:59
but i would store that in a session json string
so i simply always have a json string in local storage
so i use a name for the object like the session id to track state
and prevent from errors and mix ups
but the realy nice thing about that is it also loads realy fast if values are in and it also works in cases where energie drops and you want to restart and continoue editing
Kevin Phillips
@phillipskevin
Dec 21 2016 15:00
it’s going to be much slower than just storing in an object
in memory
Frank Lemanschik
@frank-dspeed
Dec 21 2016 15:01
Sure That but as you also sayed :) in reload case
it would get re computed
Kevin Phillips
@phillipskevin
Dec 21 2016 15:01
I didn’t really mean reload necessarilly
Frank Lemanschik
@frank-dspeed
Dec 21 2016 15:01
ok lets exclude reload
Kevin Phillips
@phillipskevin
Dec 21 2016 15:01
it could be a page a user has never visited on that device
I just meant if you need to set the initial value of the component viewModel
Frank Lemanschik
@frank-dspeed
Dec 21 2016 15:02
ok then its always faster to read out the value of local storage then all that computing till the var is set right again
Kevin Phillips
@phillipskevin
Dec 21 2016 15:02
not if there’s nothing in localStorage
Frank Lemanschik
@frank-dspeed
Dec 21 2016 15:02
then the value is 0
thats perfect
we can init with count 0 and reset after storage response
Kevin Phillips
@phillipskevin
Dec 21 2016 15:03
ok, I’m not trying to convince you that you need streams
Frank Lemanschik
@frank-dspeed
Dec 21 2016 15:03
no i realy would love to understand why you did that :)
you helped me a lot
it was worth the effort
Kevin Phillips
@phillipskevin
Dec 21 2016 15:04
ok good :smile:
Frank Lemanschik
@frank-dspeed
Dec 21 2016 15:04
Thanks for that insights into your methods i have noted that this needs benchmarking :)
Kevin Phillips
@phillipskevin
Dec 21 2016 15:07
you’re welcome
Sunil George
@georgesunil81
Dec 21 2016 16:03
@phillipskevin thanks for the link on can-connect SignalR. It is going to be tremendously useful for me. I am using CanJS 2.3.24. Will can-connect be available with 2.3, or should I upgrade my canJS?
Kevin Phillips
@phillipskevin
Dec 21 2016 16:03
you can use can-connect with 2.3
I’m not sure if the signalr stuff works with 2.3
you’ll have to try it out :smile:
Sunil George
@georgesunil81
Dec 21 2016 16:07
Sure. Thanks @phillipskevin
Also, I am trying to see if aborting ajax requests is possible with 2.3? Have you come across the need for it? I need to do it in my project shortly.
Kevin Phillips
@phillipskevin
Dec 21 2016 16:20
yes, you should be able to abort the jqXHR
Sunil George
@georgesunil81
Dec 21 2016 16:25
Thanks @phillipskevin . So, here is how I use the can.model and call it -

I currently use the can.model as -

define(['can/model/model'], function() {
    var tasks = can.Model.extend({
        findOne: function(id, success, error) {
            return can.ajax({
                    type: 'GET',
                    url: '/tasks?id=' + id,
                    fixture: false
                })
                .then(success, error);
        }
    }, {});
    return tasks;
});

and in my controller, I call it as -

tasks.findOne(id) 
     .done(function(response) {
    //process response

     })
     .fail(function(response) {

    });
I tried can.ajax.abort() in my controller method, but it errored out!
Any hints on how I can abort the jqXHR given how I am using the model above? Please let me know once you get a chance.
Var tasks is a prmoise, maybe try to just kill the promise itself
Promise*
I ment tasks.findOne returns a jquery promise
On my phone lol
Kevin Phillips
@phillipskevin
Dec 21 2016 16:36
yes, it returns a jqXHR
that should have an abort method
Gira Minus
@gKreator
Dec 21 2016 16:37
Ohh it does return xhr? Nice
Sunil George
@georgesunil81
Dec 21 2016 16:41
Thanks @gKreator , @phillipskevin . So, here is my situation, I have a html drop down list containing task ids. When user selects a task id, the call to the API is made through the above model. But, the API response time on the calls vary so much that if the user selects different task ids "rapidly", the view gets rendered with the API response that may not be for the currently selected task id!
So, I want a mechanism to abort all prior API requests, or ignore API responses for all prior jqXHR requests except for the one that was made last.
Gira Minus
@gKreator
Dec 21 2016 16:42
Yeah, try var taskxhr = tasks.findOne (id); taskxhr.abort ();
Sunil George
@georgesunil81
Dec 21 2016 16:42
Once you get a chance, let me know if you have any ideas on how I could achieve it.
Sure. I will try that @gKreator .
Gira Minus
@gKreator
Dec 21 2016 16:43
Or console log taskxhr variable and take an ss of the output for me
Sunil George
@georgesunil81
Dec 21 2016 16:44
I guess I will need to store all the XHR requests in an array and abort them all except for the last one.
Gira Minus
@gKreator
Dec 21 2016 16:45
Yup, that will be ur safest route honestly
Kevin Phillips
@phillipskevin
Dec 21 2016 16:49
you’re talking about an exact problem that streams help with
so it also answers your earlier question @gKreator
I know you’re not using 3.0 @georgesunil81, but you might want to check it out
see if it’s worth it to be able to use can-stream and can-define-stream to solve this problem
the whole video is worth watching, but 3 or 4 minutes around the time that link starts talk about what you’re doing exactly
https://rpominov.github.io/kefir/#take-until-by is what you could use with can-stream
Sunil George
@georgesunil81
Dec 21 2016 16:59
Ah! Thanks @phillipskevin I will surely check into that. Thanks for the resources.
Meanwhile, I just logged the jqXHR object -
blob
taskxhr.abort () does not work. errors out!
Thomas Sieverding
@Bajix
Dec 21 2016 19:55
@georgesunil81 What ajax fn are you using?
Switch to can-util/dom/ajax/
Sunil George
@georgesunil81
Dec 21 2016 21:00
Thanks @Bajix. I will check it out. Will let you know. Thanks.
Sunil George
@georgesunil81
Dec 21 2016 21:32
@Bajix how is can-util/dom/ajax/ different than can.ajax that I am currently using?
Thomas Sieverding
@Bajix
Dec 21 2016 22:21
@georgesunil81 If you’re using 2.3 then you’re also using a version of jQuery that doesn’t have proper promises and doesn’t play nicely with things. If you’re using 3.x, then you shouldn’t be using ‘can’ anymore, but rather loading in the proper dependencies. You say your can.ajax doesn’t have the abort method, and can-util/dom/ajax/ definitely does.
Sunil George
@georgesunil81
Dec 21 2016 22:23
Thanks @Bajix for the insights there. I am planning to migrate to 3.x. I think it will bring in several benefits including the solution to what I am looking for.
Thanks for all your help.
Thomas Sieverding
@Bajix
Dec 21 2016 22:23
np
Gira Minus
@gKreator
Dec 21 2016 23:17
@phillipskevin Thanks, I'll check this out when I'm free :D