These are chat archives for canjs/canjs

2nd
Nov 2017
Prabhu Balaji
@Prabhu6294_twitter
Nov 02 2017 07:41
Hi Guys,
I have a general doubt reg CAN js is there anyone who can help me out
what is the adv of CAN js over any other JS frameworks like angular and React.
Prabhu Balaji
@Prabhu6294_twitter
Nov 02 2017 08:03
@frank-dspeed @AntonProkofyev can you guys help me with an answer
Justin Meyer
@justinbmeyer
Nov 02 2017 15:51
Hey all, here's a proposal for a "working with forms guide": canjs/canjs#3708
Mohamed Cherif Bouchelaghem
@cherifGsoul
Nov 02 2017 15:51
@justinbmeyer I love it :sparkles:
Justin Meyer
@justinbmeyer
Nov 02 2017 16:04

@Prabhu6294_twitter you might want to checkout: https://canjs.com/doc/guides/technical.html

In short:

  • CanJS is designed for long term cost of ownership (longevity) in mind. We want the code you write today to be useful tomorrow, while still adding new features to the stack. There are a million subtle things CanJS does to make this possible like releasing everything as individual packages managed within individual repos, reducing statefulness, having a symbol-based integration API layer.
  • CanJS is extremely flexible. If you want to build "low-level"/just above DOM stuff, there's tools for that (can-control). If you like streams, CanJS works with that. You can build custom events or custom attributes to work with forms. It has two-way bindings, but you could more easily follow a reducer-like pattern. It's observables can be used independently to wire up non-DOM apis like GoogleMaps or Canvas.
  • While we've got a smaller community, I think we are pretty "in touch" with our users. @chasenlehara and @phillipskevin do a great job helping everyone here.
Frank Lemanschik
@frank-dspeed
Nov 02 2017 16:29
@Prabhu6294_twitter it will be future prove and will always offer nice migration patterns for upgrades to newer tech. Its Easy to get First Resutls. And With new debug tools it will finaly be better debug able
also its importent to say that the creators of canjs did something thats called steal
which is amazing because it is a systemjs fork that uses the node like module resultion on frontend
i am even thinking about merging that into Polymer 4 next year
also they created donejs something like tooling for canjs that gives you a nice kickstart pattern with that awsome loader
The most best about canJs is that it demonstrates how to use many small node modules :) for creating web applications and load them frontend and backend side
And it supports old Browsers :)
if you need that its a great choice
but i can't stop talking about this stealJS :) its also a es6 polyfill :) as systemjs was that also
Frank Lemanschik
@frank-dspeed
Nov 02 2017 16:35
you can for example develop react applications with donejs without the build step because of steal :)
but you can also code WebComponents thats what i use it for and canjs gets used when i need to support old browsers on really slow network like when i would do applications for negeria
because of its bundling and encapsulation its a great fit for that
look into that i think there you find whats makes canjs better
Justin Meyer
@justinbmeyer
Nov 02 2017 17:11
Speaking of our debug tools ... we are starting to make progress on identifying the observable dependency graph
Slack_-_Bitovi.png
that's a log of something like:
<input value:bind="first"> with a ViewModel like vm = new DefineMap({first: "Manuel"})
If you graphed it, it would look like
Untitled.png
Eventually, I hope some debugging tool would be able to show:
Untitled.png
A dream tool would be able to graph an entire app this way ... so people could explore how an element or observable property is connected to the rest of the application
Frank Lemanschik
@frank-dspeed
Nov 02 2017 17:17
@justinbmeyer i think you will love my new <can-component> webcomponent
it attaches the viewModel directly to the html element
and is directly observe able in the console
so you see how it changes states
:D
also able to debug every state transition
via MutationObserve Browser API
so you can view your body viewModel and even live edit state in the browser
Kevin Phillips
@phillipskevin
Nov 02 2017 17:30
how is it different from can-element @frank-dspeed ?
Frank Lemanschik
@frank-dspeed
Nov 02 2017 17:30
it is totally diffrent !
it uses a viewModel like can-define-map
its a nativ element for replace can-component
it can render whole application entry points
Kevin Phillips
@phillipskevin
Nov 02 2017 17:31
can-element also uses can-define
Frank Lemanschik
@frank-dspeed
Nov 02 2017 17:31
i don't saw that i only saw it using the attributes
and can-define nativ
not map and also i was missing the stach support
as also the applying of less styles to the shadowDom of the element
also i have a attachment element steal-loader that can attach from inside of a link rel import
so that when i render can-component tags inside a document fragment
it attaches to the light dom of the window document and so on
it allows complet composition of can-components even diffrent versions of canjs
so lets say can-component webcomponent is more highlevel
its simply solves the need to place can-components as elements as it should be without creating a can-element
Frank Lemanschik
@frank-dspeed
Nov 02 2017 17:36
<can-component from="~/my-component/">
<my-component></my-component>
and i also have some fancy ssr features like you can have my-component already rendered in the html
and it can attach to that and replace it then incremental
so you can render inital with disabled form elements once attached all gets activated for input
:D
this abstracts the whole steal parts and all that
and allows easy reuseable webcomponents
out of can stuff like .less .stache .js
and the core api behind that is called nils
and is even able to do the same to all frameworks
so you can compose all frameworks as webcomponents
with diffrent versions :D
;)
thats the short description
<can-component from="~/my-component/">
<my-component></my-component>
ups
Frank Lemanschik
@frank-dspeed
Nov 02 2017 17:46

Full Example WebComponent that can be link rel imported
mycomponent.html

<link rel="import" href="node_modules/@nikolaus/nils-canjs/can-component.html">
<link rel="import" href="node_modules/@nikolaus/nils/elments/nils-import.html">
<can-component from="~/my-component/">
<nils-import target="body">
<my-component></my-component>
</nils-import>

index.html

<head>
<link rel="import" href="mycomponent.html">
</head>
<body></body>
so placing the link tag to mycomponent.html
makes it auto attached to body
What do you think about that :)
i Think santa claus will be nice this year
Frank Lemanschik
@frank-dspeed
Nov 02 2017 19:16
so to make a conclusion i did a can element that allows you to describe the logic via html
and also i have bundled inside that can-define and can-stache can-view-model
and i attach the viewmodel directly to the element so that it is view able in the console directly and manipulate able i am not sure about the behaviers of can-element but will test them
and also support that can-element is a great thing
it only leaks of extra tooling but i will supply that
Respect for the idea :) your the only one in the canjs community that understands what will happen as nativ es6 and html linking is finally there
bundling got now totally diffrent
when i now finished the wrappers for all the frameworks up we finaly got the shiny world of self encapsulated reuseable html
download edit use no unexpected side effects
no dependency managment
Frank Lemanschik
@frank-dspeed
Nov 02 2017 19:23
my components now loading faster and i have fastest inital response
most time in under 200ms interactiv after 500ms
Really well
and we are talking about a big Office Like application
Rob Halff
@rhalff
Nov 02 2017 20:27
loading time is overestimated IMHO. :-)
Frank Lemanschik
@frank-dspeed
Nov 02 2017 20:40
nope
read about it here
in google materials concepts
we have even estimated interaction intervals
like 100ms 500ms
we call it the RAIL
0 - 16ms    People are exceptionally good at tracking motion, and they dislike it when animations aren't smooth. Users perceive animations as smooth so long as 60 new frames are rendered every second. That's 16ms per frame, including the time it takes for the browser to paint the new frame to the screen, leaving an app about 10ms to produce a frame.
0 - 100ms    Respond to a user action within this time window and users feel like the result is immediate. Any longer, and the connection between action and reaction is broken.
100 - 300ms    Users experience a slight perceptible delay.
300 - 1000 ms    Within this window, things feel part of a natural and continuous progression of tasks. For most users on the web, loading pages or changing views represents a task.
1000+ms    Beyond 1 second, the user loses focus on the task they are performing.
10,000+ms    The user is frustrated and is likely to abandon the task; they may or may not come back later.
understanding the user is importent
its the key to success
in the next 3 years the price will be decupled from value of a product and will be set by customer experience
so even if i seel my beff 5x more expensiv then my neigboor but i have the better service and customer sadisfaction then i will get the customer
Rob Halff
@rhalff
Nov 02 2017 20:44
Increase in loading time is great, but it does not compare to the functionality provided by your application. Try measuring the loading time of gmail.com.
Frank Lemanschik
@frank-dspeed
Nov 02 2017 20:44
you should never ever forget
that it is somethign diffrent to handle load spikes of some million people
:D
gmail in our dev environment
is hell fast
you probally would never belive it
but ok i see we need to care about load times even even more
:D
Rob Halff
@rhalff
Nov 02 2017 20:46
My current application's loading time is not fast, hence, I do not care about it's loading time while I need the functionality.
Frank Lemanschik
@frank-dspeed
Nov 02 2017 20:46
soon when the appstream tech is more evolved
we will also handle device processing server side
so the device speed don't matters
@rhalff functionality sure but getting functionality is easy
getting it the right way is more complex
Rob Halff
@rhalff
Nov 02 2017 20:47
is your corp caching your gmail logins and refreshes? that would explain :p
Frank Lemanschik
@frank-dspeed
Nov 02 2017 20:48
nope my corp is google
Rob Halff
@rhalff
Nov 02 2017 20:48
ah.
Frank Lemanschik
@frank-dspeed
Nov 02 2017 20:48
i have the source :)
but anyway its legacy code
Rob Halff
@rhalff
Nov 02 2017 20:49
ok cool, I like gmail.
Frank Lemanschik
@frank-dspeed
Nov 02 2017 20:49
sure but soon when webcomponents do fully arrive there will be components that you can use with your own mail server
so i think creating something like gmail your self will get possible
you simply drop in a widged here a widged there and then it will work you will run a little nodejs api that fetches your mails into your database and thats it
the most complicated about gmail is the hosting part
i hope nvidia finishes soon his new codecs then we will be able to stream complet screens from remote like teamviewer
Rob Halff
@rhalff
Nov 02 2017 20:53
Not sure, most of those services seem to become unexpectedly unpredictable if not backed and bought by big corps. The email must be readable. Inaccessible email servers are scary. But then again, you could be bought, so at least no worries for yourself.
Frank Lemanschik
@frank-dspeed
Nov 02 2017 20:53
but with much less bandwidth
nvidia has some hot stuff ready
but it needs documentation
a full hd web codec with really good compression
i have never worrys :)
Rob Halff
@rhalff
Nov 02 2017 20:54
What does nvidia has to do with email?
Frank Lemanschik
@frank-dspeed
Nov 02 2017 20:55
it has something todo with rendering screen content in the browser
Application Streaming
that means the Application runs on our side
you only get the view
without rendering
we track the mouse and keyboard input
and then send only that
so you download only the interactive live application while its running on our servers
so you can for example play Doom on your smartphone that is 3 years old
:D
Rob Halff
@rhalff
Nov 02 2017 20:56
What's the format you receive?
Frank Lemanschik
@frank-dspeed
Nov 02 2017 20:57
i don't remember the code name
but its a video
we will hear all about that soon
its able to stream full hd over a 120kb down stream
its a amazing algo
Rob Halff
@rhalff
Nov 02 2017 20:57
and all that runs canjs? pretty cool :p
Frank Lemanschik
@frank-dspeed
Nov 02 2017 20:58
all that can run in canjs sure
canjs is modular it supplys some helpers thats it
it supplys observe ables like can-define that you can even use for backend only stuff
Rob Halff
@rhalff
Nov 02 2017 20:58
Well right now I'm in canjs legacy hell.
Frank Lemanschik
@frank-dspeed
Nov 02 2017 20:59
then migrate
the guys did some code mods
to automatic upgrade your project
Rob Halff
@rhalff
Nov 02 2017 20:59
ran that, but zero hits.
Frank Lemanschik
@frank-dspeed
Nov 02 2017 20:59
hmmmm
Rob Halff
@rhalff
Nov 02 2017 21:00
but it's from 2014 something or earlier even.
prior to es6, react, vuejs etc. So I don't blame :-)
Frank Lemanschik
@frank-dspeed
Nov 02 2017 21:00
ReCode it
can't be so hard
you know the logic already
as the app is done
Rob Halff
@rhalff
Nov 02 2017 21:01
npm was new, and most frontend was on bower.
Frank Lemanschik
@frank-dspeed
Nov 02 2017 21:02
now bower is dead
Rob Halff
@rhalff
Nov 02 2017 21:02
lots of api changes, all my templates are also in ejs.
Frank Lemanschik
@frank-dspeed
Nov 02 2017 21:02
deprecated
migrated to yarn
it was a nice time bower :)
the time is moving faster now
All what you know today is already deprecated
lol
Rob Halff
@rhalff
Nov 02 2017 21:08
bower should have never been created, he didn't get the concept of node modules I guess.
bower came after node modules.
Justin Meyer
@justinbmeyer
Nov 02 2017 21:09
@rhalff do you know which version?
of canjs you are using?
3.0 has ESJ
Rob Halff
@rhalff
Nov 02 2017 21:13
2.1.4 using ejs templates.
also the jquery version.
Justin Meyer
@justinbmeyer
Nov 02 2017 21:16
what do you mean by "the jquery version"?
Frank Lemanschik
@frank-dspeed
Nov 02 2017 21:16
$.can ? :=)
the jquery wrapped one :)
Justin Meyer
@justinbmeyer
Nov 02 2017 21:17
all of 2.X is "jquery wrapped"
Rob Halff
@rhalff
Nov 02 2017 21:17
in contrast to mootools, yui etc... :p
Justin Meyer
@justinbmeyer
Nov 02 2017 21:17
so I'm not 100% what he means
ok, that's good
so in theory a 3.0 update (including using the code-mods) should be doable
Rob Halff
@rhalff
Nov 02 2017 21:19
just the ejs I don't like to change, because that's like rewriting each and every template.
Justin Meyer
@justinbmeyer
Nov 02 2017 21:20
yeah, you shouldn't have to
Rob Halff
@rhalff
Nov 02 2017 21:20
anyway, it's just my personal project.
no big deal :D
Justin Meyer
@justinbmeyer
Nov 02 2017 21:21
ok, well if you ever try it let me know ... we can guide you
Rob Halff
@rhalff
Nov 02 2017 21:21
thanks
Justin Meyer
@justinbmeyer
Nov 02 2017 21:21
it's likely you can migrate to 3.0 with the can-jquery/legacy and can-ejs packages
Rob Halff
@rhalff
Nov 02 2017 21:22
ok cool.
Justin Meyer
@justinbmeyer
Nov 02 2017 21:22
and then at least you'd be able to 1. Get fixes and 2. Build new stuff in more modern APIs
Rob Halff
@rhalff
Nov 02 2017 21:24
It's not like I want to use jQuery, but it was a more obvious choice back then.
Frank Lemanschik
@frank-dspeed
Nov 02 2017 21:24
jquery is nothing bad at all
it allows fast prototyping