muuri icon indicating copy to clipboard operation
muuri copied to clipboard

Modular architecture

Open romgerman opened this issue 3 years ago • 4 comments

Hey. It would be nice if we could use only what we need. Ex I don't need dragging, sorting and filtering, only layout. But currently I need to include whole big library to do only portion of the things it can do.

Thanks!

romgerman avatar Apr 01 '21 14:04 romgerman

Yep, it would be nice, but unfortunately that's not trivial to implement. If you have a suggestion how to implement that change I'm all ears :)

niklasramo avatar Apr 05 '21 10:04 niklasramo

I've read some of the code, here's my 2cents:

The current version is awesome, flexible, but

  • can be done better in size constrained projects
  • although the code is modern and efficient, it can also give me the jQuery shills thanks to its implementation which basically "polyfills" legacy browsers out of the box, two versions of the index.js can be written as well as rollup.config to enable an ES6+ version exclusive to modern browsers and lighter in size and an ES5 version with a set of polyfills for IE10+

The src/Grid/Grid can be split into 3 independent classes (probably more might be better)

  • GridLayout the base class to only compute fluid layout
  • GridSortAndFilter extends the above and add sorting and filtering features
  • GridDragLayout extends the first to enable editable layouts via all the drag features
  • an additional Grid combines the two above and delivers the exact same as our current mighty version.

The more I read, the more I think src/Packer/Packer is kinda mandatory in every and all situations.

Well?

thednp avatar May 20 '21 09:05 thednp

@thednp Thanks so much for the suggestions and ideas :)

The next version ( in dev branch) version will drop support for IE and legacy Edge, so it will unfortunately give less jQuery shills, but I think it's the right move forward. The good side in this is that the codebase gets a bit lighter.

I haven't yet though out exactly how the Grid class should be split up, but I've been thinking that the core of Muuri should only handle the layout stuff and everything else should be a plugin/extension. This would mean that animations, filtering, sorting and everything drag n' drop related would be official extensions/plugins. This also requires refactoring Muuri to be easily extendable via some sort of plugin system (if needed).

niklasramo avatar May 21 '21 18:05 niklasramo

I already have a valid ESLint version of Muuri with class definitions, except drag functionality which is something I don't need for front-end, I believe very few actually need it. The move to TS is something that I don't know much about. I know it's easy to create a .d.ts file to import ES6 stuff, usually other contributors help with me that.

But still I'm interested in the future versions regardless.

thednp avatar May 21 '21 19:05 thednp