svelte-materialify icon indicating copy to clipboard operation
svelte-materialify copied to clipboard

Differences and similarities

Open Immortalin opened this issue 3 years ago • 6 comments

https://github.com/hperrin/svelte-material-ui/issues/217

Immortalin avatar Apr 15 '21 03:04 Immortalin

https://github.com/hperrin/svelte-material-ui/blob/master/packages/button/Button.svelte vs. https://github.com/TheComputerM/svelte-materialify/blob/master/packages/svelte-materialify/src/components/Button/Button.svelte Main difference is probably that we built ours "from scratch" and it looks more like svelte code. There are multiple people working on different implementations of the material spec in svelte right now. I would love one solution for material components written in svelte, though I think we will end up with web components and native-svelte components.

I would say that right now, this lib looks a lot like Vuetify and hperrin's lib looks like a wrapper around mdc with their "Advanced Approach", where mdc does the business logic. He'll probably have less to worry about functionality at some places, but we can find new approaches with Svelte's reactivity.

So it's 2 different approaches and code styles. Later on we'll have even more approaches to material in the svelte ecosystem. Let the best implementation + team win! (lol) (+still waiting for some way to benchmark)

Florian-Schoenherr avatar Apr 15 '21 08:04 Florian-Schoenherr

Yeah, one thing is that we have built this with svelte specific features in mind, while the other one is made up of pure js.

TheComputerM avatar Apr 15 '21 09:04 TheComputerM

@TheComputerM I don't know what you mean by "pure js". SMUI is mostly Svelte. The parts that come from MDC-Web are pretty small JS blobs.

hperrin avatar Apr 15 '21 20:04 hperrin

Nah like this: https://www.github.com/hperrin/svelte-material-ui/tree/master/packages%2Fbutton%2FButton.svelte

Instead of using the class directive, a function is used to filter classes.

TheComputerM avatar Apr 16 '21 03:04 TheComputerM

That's because a class directive only works on DOM elements. SMUI lets you change which DOM element many of its components render (so, for example, you can render a button with an anchor element). If you try to put class:myclass on a <svelte:component />, it won't compile.

hperrin avatar Apr 16 '21 15:04 hperrin

SMUI is implementation material.io. (uses their css) Materialify seems to be inspired by the React library. They write own CSS, which can result in such errors: https://github.com/TheComputerM/svelte-materialify/issues/230

I have the impression that the documentation in Materialify is better. Although more buggy: https://github.com/TheComputerM/svelte-materialify/issues/148

Personally, I wouldn't be able to write a component for SMUI. I don't understand their code. For me, this is an important factor, because I learn by analysing the code. And the one from Materialify resembles the Svelte component, not some "api-proxy". But how you implement it doesn't have much of an impact on how you use the component. Some components may or may not be missing.

I am curious if there would be significant differences in the output code (file size / resource consumption ).

bato3 avatar Apr 23 '21 15:04 bato3