TheComputerM / svelte-materialify

A Material UI Design Component library for Svelte heavily inspired by vuetify.

Home Page:https://svelte-materialify.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Differences and similarities

Immortalin opened this issue · comments

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)

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

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.

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.

commented

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