Build an app using micro frontends with single-spa

[joycelee11]

Details

• Microservices are commonly used in backend: Instead of using one big project to contain all of your backend functionalities, you split them into independent pieces based on their shared purpose.
• Microservices can be used in frontend as well: You can split an app into smaller independent components. This architecture allows you the develop your frontend in parallel across different teams, using the same or different frameworks.
• How? Using single-spa! The JavaScript library single-spa is a JS router for frontend microservices.

In this talk, I’ll guide you through the single-spa library and how to use it to set up your first micro frontend architecture.

Speaker

Veerle van Leemput - GitHub, LinkedIn

Veerle is an entrepreneur and Data Scientist who gets excited about data and programming. She is Managing Director and Head of Data Science at Analytic Health, a UK-based company that develops intelligent and accessible technology which gives organisations the tools they need to accelerate innovation in healthcare. With a Master’s Degree in Data Science and multiple years of experience in the pharmaceutical market, she develops healthcare applications in R (Shiny), Vue.js and Node.js.

What the speaker would like to know

• Are you familiar with micro frontend architecture and single-spa?
• Do you want this talk to be more conceptual (e.g. use-cases) or hands-on?
• What else would you like to know about this topic? (e.g. the deployment part of such a structure on Azure)
• What would you want to take away from this talk?

Share your thoughts

1. Upvote ⬆️ if you're interested in this topic
2. Leave a comment to:
   • Answer the questions above
   • Share other suggestions
   • Or simply give some encouragement to the speaker! ✨

[msjh80311]

1. What scale is your project will you choose the solution?
2. How do you manage dependencies?
3. What are the constraints/concerns when implementing micro frontend?

Thanks for sharing!

[prateekkrjain]

I would like to know more about 'single-spa' but from a Data Science perspective. A lot of times we just want to visualize our results where Tableau or Power BI suffice.
But, a lot of time we want to integrate some pipeline, i.e. giving a little control to the user like providing an option to change some parameters and at the backend, we re-calculate some stuff and display it to the user. In such scenarios creating Web-APIs is helpful.

So, since Veerle (speaker) also has experience in Data Science, I would love it hear about some use-cases from this perspective.

[hypebright]

Interesting question about single-spa and Data Science. And I think that's very much related to the first question @msjh80311 that asks- because for building a simple standalone dashboard that pulls analyzes data or shows you the results of a ML model I wouldn't choose single-spa necessarily. But if you would develop a portal, or a large app that has multiple sections doing all very different things I would consider it. But it's definitely something that I can talk about, because our app that is being built with single-spa is a dashboard like app with Data Science behind it.

[iam-gopi]

I would like to hear more on Single SPA and micro UI.

[sumitchd]

I'd like to know how we can manage common dependencies among all the microfrontends(MF) effectively, should the common ones be loaded by the host ? how should the version upgrades happen for such packages.

How do multiple MFs communicate with one another, using a global redux store ? or registering events on window ? pros and cons

How do we ensure consistent style patterns among all MFs, how to avoid css collisions ?