These are chat archives for ractivejs/ractive

5th
Jan 2018
Cerem Cem ASLAN
@ceremcem
Jan 05 2018 14:11
I wonder one thing: if svelte components are able to be progressively adapted into our apps, then svelte itself seems to be able to progressively adapted into - say - ractive. does it make sense?
Joseph
@fskreuz
Jan 05 2018 14:17
progressively adapted == server-rendered by one, hydrated by the other?
or did you mean write in the same syntax, can be rendered by either tool (i.e. React and Inferno)?
or something else entirely?
Paul Maly
@PaulMaly_twitter
Jan 05 2018 14:22
I think we able to re-write some heavy ractive-components with svelte-components and wrap them with decorators.
It'll be easy to re-write because simular api and easy to integrate like jquery plugins
Cerem Cem ASLAN
@ceremcem
Jan 05 2018 15:43
as far as I could understand, svelte's claim is that we can write some components in svelte, independent from the framework we use, and we would be able to use these components as if we wrote them in our current framework. only difference will be that they are more performant
if a speedup is applicable by compiling a component into javascript codes, ractive might prefer compiling them under the hood for us, without visiting svelte.
kouts
@kouts
Jan 05 2018 15:46
I have read that too but I have no idea how for example an Ractive component will communicate with a Svelte component
Joseph
@fskreuz
Jan 05 2018 15:48
Svelte compiles to vanilla JS, so it's just like writing vanilla in whatever app except you let Svelte do it. So technically, yes you can embed Svelte apps in a Ractive app.
In the same way, you can embed a Ractive app anywhere you find a DOM element. :D

ractive might prefer compiling them under the hood for us, without visiting svelte

That was the goal of component files - you write the app using component files, and abstract away the loader, parser and renderer. If Ractive had the same component syntax and API as svelte, you could technically swap one for the other, without rewriting the component file. Svelte just took the idea even further by eliminating the runtime and did codegen.

Joseph
@fskreuz
Jan 05 2018 15:59
Ractive could theoretically follow Svelte and do codegen, but some of the APIs would need to change. Svelte relies on predefined dependencies (see computed props) whose Ractive equivalent is done dynamically and implicitly.
my 2c
Joseph
@fskreuz
Jan 05 2018 16:08
Probably the closest thing to "emitting performant code" for Ractive code is running your code through something like prepack. https://prepack.io/ You'll still need the runtime tho.
Paul Maly
@PaulMaly_twitter
Jan 05 2018 16:18
Svelte is top-level DST + compiler to vanilla js. So, output i
is just stand-alone js constructors which can be easily integrated to Ractive app as any other
Paul Maly
@PaulMaly_twitter
Jan 05 2018 16:28
I think something like this:
import SvelteComponent from ''
const comp = new SvelteComponent();
w
Mobile sorry
Cerem Cem ASLAN
@ceremcem
Jan 05 2018 18:57
I didn't still apply the code splitting approach yet, so performance is not a requirement yet (because code splitting will perform a superb speedup, I guess)
prepack looks promising, but didn't work for me
Paul Maly
@PaulMaly_twitter
Jan 05 2018 20:38
In case of Ractive code
In case of Ractive code splitting won't perform a superb speed up, actually)))
Paul Maly
@PaulMaly_twitter
Jan 05 2018 20:45
Because the weight of Ractive itself basically a big part of whole the app
Joseph
@fskreuz
Jan 05 2018 21:12
It's an example of the space-time trade-off. Consider this: If svelte generated code for each component, each component would likely have bits of code that are redundant, increasing the size of the app. To solve this issue, you'd normally turn these redundant bits of code into helper functions, which eerily looks like a runtime, reducing size but hands off processing to generic and potentially costly functions.
If one could structure Ractive like RxJS, where you only include the bits you need and not the entire library, that would be a good start (i.e. If I don't use transitions, import "core" ractive without transition code). RxJS even goes as far as splitting off individual operators and methods (i.e. if I only use ractive.on, and ractive.observe, only import both, and not include the rest).
Paul Maly
@PaulMaly_twitter
Jan 05 2018 21:16
Actually, not) As Rich told me, redundant code for each component is:
function SvelteComponent(options) {
    init(this, options);
    this._state = assign({}, options.data);
    this._fragment = create_main_fragment(this._state, this);
    if (options.target) {
        this._fragment.c();
        this._fragment.m(options.target, options.anchor || null);
    }
}
assign(SvelteComponent.prototype, proto);
export default SvelteComponent;
Joseph
@fskreuz
Jan 05 2018 21:17
Of course, Svelte has more optimizations than just trading space for processing. But the example still stands, what you shed off one, you gain in the other.
Paul Maly
@PaulMaly_twitter
Jan 05 2018 21:17
Not so much)
Other functions is shared and tree-shaking optimise them.
But I like your approach with splitting Ractive's codebase to separate sub-modules.
Joseph
@fskreuz
Jan 05 2018 21:33
This was suggested before. Another one of those "not impossible, but not trivial" things to do.
Paul Maly
@PaulMaly_twitter
Jan 05 2018 21:49
Yep, I saw an issue.
Btw, this is example how we can integrate Svelte components into Ractive app:
Cerem Cem ASLAN
@ceremcem
Jan 05 2018 21:51
heheh. we have a 3d progress bar: http://jsfiddle.net/ceremcem/v0g7f3p1/
Paul Maly
@PaulMaly_twitter
Jan 05 2018 21:52
But it's not so goo example, because this component doesn't support dynamic items and works with dom items already exist on component create.