search

codyhouse / codyhouse-framework

A lightweight front-end framework for building accessible, bespoke interfaces.
https://codyhouse.co/
MIT License
1.16k stars 172 forks source link

Modularize CodyHouse #122

Open vaelu opened 2 years ago

vaelu commented 2 years ago

Hello

We are currently searching a way to optimize the modularization of CodyHouse, to then use CodyHouse also in bigger projects where the performance would suffer if everything is in one file.

I always loved CodyHouse for its component-driven concept, but there is one thing I always thought could be optimized. The most modern web projects today are modularizing their sites into components and then load a single CSS and JS file for every component. Since HTTP/2, loading more files asynchronously is the better practice as loading one big file. In addition, this would allow practices like loading a critical CSS first and then lazy-loading the rest.

My idea is to make a Gulpfile which does not include all base styles, custom styles and components in one style.css file but makes one file which includes the base styles and custom styles (purged), and for every component it makes its own file (e.g. radio-switch.css).

Same for the JS, one file with the util.js and framework base stuff, and for every component an own file (e.g. radio-switch.js).

This would solve a performance issue which is, in my opinion, huge. We often had the situation in projects that we had one little component which is only used on one site, but this component has 100 lines of CSS code and 80 lines of JS code, which is then included on every site in the whole project and is getting loaded without being used in 99.99% of the cases.

I really hope that we can start a little discussion here, and I would appreciate it if there would be an option to use CodyHouse in this way.

claudia-romano commented 2 years ago

Hi there, I can see your point and it makes total sense.

About the gulp file: you should see it as a starter template, that can be modified according to your project needs.

For example, you could modify the sass and scripts tasks so that not all CSS/JS is bundled in a single file; then load the CSS/JS files of each component selectively.

Unfortunately, we are not able to provide multiple gulp files that can cover all possible use cases but the default one we provide should be a good starter template.

If you have any questions about customizing it, let us know and we'll try to help! Cheers!