I’m working on a project where we need to combine several web apps into one big SPA. We’re looking at different ways to do this with a modular frontend setup. Here are some ideas we’ve been tossing around:
Using the single-spa framework
Going with iframes (the friendly kind)
Building our own JS framework from scratch
Something else entirely?
Right now, we’ve got this big monolith frontend that pulls in other apps as packages. It’s not working great for us because everything’s mushed together and it’s a pain to scale.
We’re aiming for:
Teams working independently
Deploying apps separately without messing up others
Sharing our Angular4 components across apps
Updating frameworks for each app without breaking stuff
We tried single-spa but ran into some snags with asset loading, global styling, and upgrading Angular. Now we’re wondering if iframes might be a better fit.
Any thoughts on using iframes for this? Are there any big downsides we should know about? Thanks for any advice!
yo Leo, iframes can work but they’re kinda old school. have u checked out web components? they’re pretty cool for modular stuff. or maybe look into webpack5’s module federation - it’s designed for exactly wat ur trying to do. might solve ur sharing issues without the iframe headaches. just my 2 cents!
hey there! have u looked into micro-frontends? they might be just wat ur looking for! how bout web components or module federation? they could help with ur independence & sharing goals. curious to hear more bout ur iframe idea tho - any specific concerns there? wat bout performance or SEO impacts?
I’ve faced similar challenges in my previous role. While iframes can offer isolation, they come with significant drawbacks in terms of performance and SEO. Instead, I’d recommend exploring Webpack 5’s Module Federation. It allows for truly independent development and deployment of micro-frontends while enabling seamless integration.
In our project, we successfully implemented Module Federation to break down a monolithic Angular application. It solved many of the issues you’re facing, particularly around independent deployment and sharing components across apps. The learning curve was steep initially, but the long-term benefits in scalability and maintainability were substantial.
Consider starting with a proof of concept using Module Federation. It might provide the modularity you need without the limitations of iframes or the complexity of building a custom framework.
how bout web components or module federation? they could help with ur independence & sharing goals. curious to hear more bout ur iframe idea tho - any specific concerns there? wat bout performance or SEO impacts?