Skip to content
This repository has been archived by the owner on Sep 26, 2022. It is now read-only.

Differences and similarities #219

Open
Immortalin opened this issue Apr 15, 2021 · 6 comments
Open

Differences and similarities #219

Immortalin opened this issue Apr 15, 2021 · 6 comments

Comments

@Immortalin
Copy link

hperrin/svelte-material-ui#217

@Florian-Schoenherr
Copy link
Collaborator

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)

@TheComputerM
Copy link
Owner

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.

@hperrin
Copy link

hperrin commented Apr 15, 2021

@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.

@TheComputerM
Copy link
Owner

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.

@hperrin
Copy link

hperrin commented Apr 16, 2021

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.

@bato3
Copy link

bato3 commented Apr 23, 2021

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: #230

I have the impression that the documentation in Materialify is better. Although more buggy: #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 ).

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants