These are chat archives for ractivejs/ractive

29th
Dec 2017
Anatoli Radulov
@avoto
Dec 29 2017 01:23

Question: is there a better way to do this without using observers / computed (basically Javascript outside of the template):
playground demonstration of the question

Disclaimer: I know doing the above is very bad code, by adding logic in the template...

Chris Reeves
@evs-chris
Dec 29 2017 01:28
You could put the set in an on-change listener on the select
and also, instead of multiple inputs, you could add a conditional readonly to the one
but, being perfectly honest, if that works for you, do it! It's effectively a dom observer that only gets fired on render
Anatoli Radulov
@avoto
Dec 29 2017 01:39
Yeah, that is quite unique and yet powerful and definitely works for me. Also, the example i gave is based on an input, but in my case the condition value is not necessarily user input driven. It might be nice to have some different workaround on making the DOM ignore the value of @.set() which if not hidden renders inside the template as [object Promise]
the hidden <span> looks quite "hacky" :)
Chris Reeves
@evs-chris
Dec 29 2017 01:42
no need for it to be in a hidden span
Anatoli Radulov
@avoto
Dec 29 2017 01:43
If I don't have the span it renders as [object Promise]
because set returns a promise.
Chris Reeves
@evs-chris
Dec 29 2017 01:44
could also be a ternary directly inside an interpolator e.g. {{ .condition ? @.set(...) && '' : '' }}
Anatoli Radulov
@avoto
Dec 29 2017 01:44
ah! that's a great idea :)
Thanks for your opinion @evs-chris. Really appreciated!
Chris Reeves
@evs-chris
Dec 29 2017 01:46
👍
Cerem Cem ASLAN
@ceremcem
Dec 29 2017 13:39
there is something I want to get your opinions
Chris Reeves
@evs-chris
Dec 29 2017 14:07
suspense
Cerem Cem ASLAN
@ceremcem
Dec 29 2017 14:08
the first step for project AeCAD is creating a "footprint editor", which is something like online form of Inkscape. And the next step is creating PCB editor. considering the way arrows are drawn, a PCB editor is is much like a flow chart editor. So I want to follow the path: If all drawings are represented in SVG, 1) Ractive would shine out in the app, 2) I may find a chance to follow the "observer pattern" (I'll explain later).
The problem we are discussing that manipulating SVG is not performant and will cause a slow application in the end
I /think/ using Ractive in the process (in manipulating SVG) would be performant. I'm lost what to choose at this point
Chris Reeves
@evs-chris
Dec 29 2017 14:13
you must be taking about huge svg?
talking*
I haven't had any performance issues with moderately complex non-cad stuff
Cerem Cem ASLAN
@ceremcem
Dec 29 2017 14:14
Cerem Cem ASLAN
@ceremcem
Dec 29 2017 14:29
I meant by the "observer pattern": I'm planning to create a <Trace ... /> component that will define a "trace primitive" which will interact with other components on the circuit board, like shoving, adjust its sections' lengths while being dragged, will buble up the collisions etc... all by itself, like in the video (+ 45 seconds)
Chris Reeves
@evs-chris
Dec 29 2017 14:43
ah, yes, I would expect the pathfinding to be more intensive than actually shuffling the svg bits around
also, I haven't benchmarked in a while, but I'm pretty sure ractive perf suffers with large numbers of components
so I'd keep to lighter weight constructs for components, traces, and layers
Cerem Cem ASLAN
@ceremcem
Dec 29 2017 16:55
@evs-chris so you mean it's better to avoid such complex svg operations
Chris Reeves
@evs-chris
Dec 29 2017 17:07
no, just that I wouldn't create component instances for each trace and component
Anatoli Radulov
@avoto
Dec 29 2017 17:39
@evs-chris I would assume that using partials is going to be a good alternative when talking about hundreds / thousands reusable fragments of SVG code, right? (saying that by simply assuming that there's less infrastructure / computation vs component's lifecycle events, etc)
Chris Reeves
@evs-chris
Dec 29 2017 17:41
yep
Anatoli Radulov
@avoto
Dec 29 2017 17:45
@ceremcem one complex thing I dealt with when implementing a similar SVG app was mouse event handling. I would recommend on having a single place in the code where you handle the mouse events vs having many handlers in various components. Then also having various SVG paths which the user interacts with contain identity attribute (ids) usable via Ractive.get() / .set() to get the right part of your model.
Anatoli Radulov
@avoto
Dec 29 2017 17:54
Also, sometime ago I dealt with solving the problem milkr.io and lucidchart.com have - making the UI experience sane when needing to scroll over a large piece of content. They both solve it different, and because I didn't like either approach I ended up with this idea: unlimited scroll - try scrolling on this page using a trackpad, the keyboard arrow keys or dragging with the mouse outside of the images.
Anatoli Radulov
@avoto
Dec 29 2017 18:06
Herewith a version allowing drag-scroll even if you drag on an image
Cerem Cem ASLAN
@ceremcem
Dec 29 2017 18:07
@avoto the last one provides much smooth feeling
the other approach in my case is using a 2D game engine (we are considering PixiJS currently)
Paul Maly
@PaulMaly_twitter
Dec 29 2017 18:17
@ceremcem I think you can try to use Svelte components for manipulating svg elements and integrate it to Ractive app. Seem, it won't be so hard, because Svelte compiles to vanilla js, so you can just use decorators for it.
I already had an experience of refactoring the parts of the app which dependents on productivity, using vanilla js. So, seems Svelte could become more convenient way for writing of such patches
Anatoli Radulov
@avoto
Dec 29 2017 19:32
@ceremcem sure, that would work too. If you're interested, this is what I have it used for (mix of HTML and SVG mind map like widget) screenshot
Cerem Cem ASLAN
@ceremcem
Dec 29 2017 19:34
@PaulMaly_twitter doesn't Svelte have such an overhead when using "everything is a component" approach? I can't imagine why Svelte wouldn't have that issue while Ractive has...
Paul Maly
@PaulMaly_twitter
Dec 29 2017 19:37
First of all, Svelte much faster than Ractive. Second one, Svelte components is just an abstraction (like DSL), real code is just vanilla js. So, Svelte basically as fast as vanilla JS.
Cerem Cem ASLAN
@ceremcem
Dec 29 2017 19:37
@avoto I took a look at milkr.io, which is a mind mapper as far as I could understand. I think they (milkr.io and the PCB editor) share lots of common operations under the hood
@PaulMaly_twitter that wouldn't be true. Svelte may be 1000x faster than Ractive, but there would be another reason if there is a noticeable performance overhead between Ractive partials and Ractive components; something like an algorithmic problem
Paul Maly
@PaulMaly_twitter
Dec 29 2017 19:43
Hm, what do you mean?
Chris Reeves
@evs-chris
Dec 29 2017 19:43
svelte skips a whole lot of stuff that ractive can't really, partially due to some refactoring needed in ractive, svelte's compile to direct dom code, and not having to cover the feature base that ractive does
Paul Maly
@PaulMaly_twitter
Dec 29 2017 19:44
yep
Chris Reeves
@evs-chris
Dec 29 2017 19:46
ractive components have a good deal of overhead beyond partials because of all of the lifecycle and state setup involved in each instance
Cerem Cem ASLAN
@ceremcem
Dec 29 2017 19:47
@evs-chris if I really needed components, wouldn't implementing those as partials be re-inventing the components, thus cause the same overhead?
Chris Reeves
@evs-chris
Dec 29 2017 19:49
what part of components would you need? there are some things you simply can't re-invent
you can go a really long way with the much lighter (than a component, ever so slightly heavier than a plain partial) macro partial, though
Cerem Cem ASLAN
@ceremcem
Dec 29 2017 19:51
component events would be the key feature of components in this case
Chris Reeves
@evs-chris
Dec 29 2017 19:52
yeah, those would be the hardest to recreate
Cerem Cem ASLAN
@ceremcem
Dec 29 2017 19:53
by the way, what are those macros? where can I find information about them?
Chris Reeves
@evs-chris
Dec 29 2017 19:53
you can raise events from a context object
they're very new
and not properly documented yet
;-)
Cerem Cem ASLAN
@ceremcem
Dec 29 2017 19:54
yup, I've seen about macros in a PR of yours, if I recall correctly
Chris Reeves
@evs-chris
Dec 29 2017 19:55
await implemented as a macro
also the basis for async components
Paul Maly
@PaulMaly_twitter
Dec 29 2017 19:56
const Card = Ractive.macro(
    handle => {
      handle.setTemplate( template );
    }, {
      cssId: 'rm-card',
      css: $CSS,
      attributes: []
    }
  );
Cerem Cem ASLAN
@ceremcem
Dec 29 2017 19:57
let's consider the following example: What should I choose if I want to implement a SVG circle "component" that the instances can be hold with mouse click and dragged by mouse. If a dragging circle (A) collides with another circle (B), the other circle (B) will be pushed by A
hmm. I'm like creating a game engine from scratch with Ractive...
Chris Reeves
@evs-chris
Dec 29 2017 20:12
I'd do that with a plain old object represented by a circle element with an event listener that handles adjusting the coords and then doing the collision check after movement
{{#each elems}}{{>.type}}{{/each}}
type circle: <circle x={{.x}} ... on-drag="@.move(., delta)" />
and have move handle collision checks and resulting movement propagation
ignoring layers and crossing them, your components would just be a big, relatively easy to deal with array of objects
Chris Reeves
@evs-chris
Dec 29 2017 20:23
do you already have an algorithm to handle traces?
I've looked into self-sorting dependency graphs before and kinda checked out because I'm not exactly strong in the maths
Cerem Cem ASLAN
@ceremcem
Dec 29 2017 20:25

do you already have an algorithm to handle traces?

there isn't any implemented yet.

Cerem Cem ASLAN
@ceremcem
Dec 29 2017 20:37
@evs-chris let me implement an example demonstrating such a behaviour, so that I can be more clear about the subject
Cerem Cem ASLAN
@ceremcem
Dec 29 2017 20:49
is there something I should add for on-drag support?
Chris Reeves
@evs-chris
Dec 29 2017 21:30
that's an event that handles mousedown-mousemove-mouseup and touchstart-touchmove-touchend, which afaik doesn't exist at this point
Paul Maly
@PaulMaly_twitter
Dec 29 2017 22:58
@evs-chris Whether adapters work for @shared values or not?
Chris Reeves
@evs-chris
Dec 29 2017 22:59
I'd say no, because there's no instance to get the adaptors from
should probably make it pull from the defaults
Paul Maly
@PaulMaly_twitter
Dec 29 2017 23:01
ok, I got it
thanks!