DEV Community

Cover image for Modular Front-end development

Modular Front-end development

Islam Sayed on April 01, 2019

šŸŽ™ I am making a research for an article about modular approach in Front-end development šŸ’». I'd be thankful if anyone could help me with good resources. šŸ’š

Collapse
 
wodcz profile image
Martin Janeček

Not exactly Modular in terms of making project-independent modules, but possibly some thoughts could be helpful in your research: hackernoon.com/fractal-a-react-app...

Collapse
 
islam profile image
Islam Sayed

Thank you, Martin ā¤ļø

Collapse
 
jovidecroock profile image
Jovi De Croock • Edited

I don't know about your state management or tech stack but this is the approach we took for a really big react-redux application: dev.to/jovidecroock/modular-redux-...

Essentially when evaluating an approach you have to aim at achieving a good level of cohesion and close to no coupling between modules (except your normal commons like your Button abstraction,...).

Logical cohesion is what we strived for in the article I mentioned earlier, at the moment we group everything for example like this:

Our project has objective so we have a folder "project" with a few submodules and one of those is objectives.

This makes it so that we can lazy load modules and their data requirements, this also implies that for example an npm module we only use in module x won't be required initially until we load in module x.

Collapse
 
ecomuere profile image
Ivan Llorente

Micro frontend micro-frontends.org

Collapse
 
niorad profile image
Antonio Radovcic

This calls for WebComponents!
=> webcomponents.org

Collapse
 
evanplaice profile image
Evan Plaice

If you're looking for standard (ie zero dependency) Web Components written in vanilla JS, check out.

github.com/vanillawc