search

vuestorefront / vsf-capybara

Capybara is a Storefront UI based theme for Vue Storefront. Always Open Source, MIT license. Made with :green_heart: by Vue Storefront.
https://capybara.storefrontcloud.io/
MIT License
154 stars 84 forks source link

feature: registering ui components globally #584 #585

Open PawFV opened 3 years ago

PawFV commented 3 years ago

Implements solution mentioned in #584

CLAassistant commented 3 years ago

CLA assistant check
All committers have signed the CLA.

AishwaryShrivastav commented 3 years ago

Hey @PawFV, Isn't registering all the components globally affect the performance of the app ?

PawFV commented 3 years ago

Hey @PawFV, Isn't registering all the components globally affect the performance of the app ?

What is the performance impact of doing this?

From my point of view, not much, you prioritize development speed, clean code structure and scalability over 100kb extra in your bundle size. I'm just using what I listed above and if any it eased a bit the chaos when developing, I'm more concerned about the performance of other setups if that makes sense. If you want a clean approach which it's documented in Vuejs docs

docs

It's essentially describing the issue I see here, where you have too many repetitions. First thing that clicks into my mind when I start to see repeated patterns, "If I'm doing that much repetition then I'm doing something wrong".

You can actually use a fancier solution which is registering them on-demand, it's linked in the docs I sent you, here is the example.

Another issue I see with the way this whole ecosystem is that isn't published as an npm packages, so it would be miles easier to let the user decide which component/mixin/functionality they want to use and just link the docs for its usage.

Another example you can look is, a well known UI library, Vuetify. Take a look at how it's built.

Here is an example, I built a vuejs app with default webpack config without vuetify, and then with Vuetify install option. (Which just comes with automatic registration of components, you don't have to import them).

Plain vue webpack-plain

Vuetify installed webpack-vuetify

I could actually help you with lot's of issues but my time is very limited at the moment, if you want to include me as maintainer then that's another discussion that my company it's probably able to afford, just let me know :).

AishwaryShrivastav commented 3 years ago

Hey @Fifciu can you share your thoughts here ?

Fifciu commented 3 years ago

Hello. I wouldn't import every component, it is too much. Obviously, developer experience is very important. However, I wouldn't like to force my users to load so many unused components.

In my opinion, in the future - SFUI should release its own loader that automatically loads only used components, e.g. basing on this one - https://github.com/vuetifyjs/vuetify-loader and with this solution, we should have both amazing user & developer experience.

PawFV commented 3 years ago

SFUI should release its own loader that automatically loads only used components.

This, exactly!