nearform / the-micro-frontends-workshop

The Micro Frontends Workshop with Module Federation
https://nearform.github.io/the-micro-frontends-workshop/
9 stars 0 forks source link

Workshop Review Feedbacks #83

Open Puppo opened 11 months ago

Puppo commented 11 months ago

I reviewed of the workshop, and these are my feedbacks.

First of all, great job! Building a workshop for this topic is not easy.

The workshop is well structured in my opinion; there is an introduction about MicroFrontends, a second introduction about Module Federation, the exercises with Module Federation and the conclusion. The workshop goes straight to the point to teach how the Module Federation works, and it is perfect; in my opinion it could be more in-depth. Let me explain further.

First of all, in the MicroFrontends introduction, I would add something about the two main approaches to split the applications in MicroFrontend, so maybe adding two slides to indicate Vertical Splitting and Horizontal Splitting could help the audience to have a clearer idea about MicroFrontend splitting.

Then MicroFrontends is not only Module Federation: splitting, routing, communication, authentication and sharing info are crucial topics to prevent mess codebase. An idea could be adding other exercises to cover at least: communication, authentication and data sharing. I don't know how deep we want to go into this workshop; these ideas came to my mind after completing the workshop, so I just want to share my thoughts with you. Maybe leaving to the participants also an idea of how they can structure a MicroFrontends project could be helpful for them; we can choose between Monorepo or Polyrepo and create a simple example with 3 or 4 MF just to leave to them a starting point.

As I said before these are ideas to improve the workshop and bring more value to the participants, we can also decide to create different workshops for a specific topic, or we can also discard my opinions without any problems if we think Module Federation is the only topic that we want to cover.

bredikhin commented 11 months ago

Nice, thanks Luca! 🙏 Distilling it down to two suggestions:

Leaving up to @coston as one of the main stakeholders to decide if we wanna go ahead with any of these.

Also, regarding "adding other exercises to cover at least: communication, authentication and data sharing", could you elaborate a little bit? @Puppo

Puppo commented 11 months ago

@bredikhin Yes, of course.

Communication One of the problems with MicroFrontend is communication; an example could be I added a product to the basket, and the icon in the navigation bar must be updated with the new amount. To handle this case, basically, there is an EventBus where components can publish or subscribe events, and react to these events. A simple example to show how to build this EventBus could be helpful. We can also use native objects like Window (addEventListent...) and CustomEvent to show how it could be easy to create this layer.

Authentication Another important role in the MicroFrontends is the Authentication/Authorization MicroFrontend because it handles all the stuff to authenticate the user and then takes care of the user data. Typically, this MF has some pages to handle sign-in, sign-up, reset passwords, etc., but it also contains the JWT token or shares it with the shell to allow the rest of the application to use it. JWT could be saved in a cookie too, depending on the strategy, but maybe a shot slide with some info about this and a simple example, let the audience be more confident about this topic.

Data Sharing Sometimes it's necessary to share data between the MFs; the JWT token is an example. Maybe show some strategy to handle this problem and let the audience be more confident about how to handle it. This topic could be covered with Authentication too if we will decide to follow the path with the shared JWT.

Let me know if it's clear please

coston commented 11 months ago

@Puppo @bredikhin these are all really good ideas. They are meaty topics, that can take some time. This workshop is setup to get the basics in limited time. Let's not include them in the first iteration of this workshop. Polish and open it up at this point.

My recommendation: we release standalone exercises + blog posts for these next topics.

bredikhin commented 11 months ago

ok, thanks! 🙏 added to the list under "shared state" topic

@bredikhin Yes, of course.

Communication One of the problems with MicroFrontend is communication; an example could be I added a product to the basket, and the icon in the navigation bar must be updated with the new amount. To handle this case, basically, there is an EventBus where components can publish or subscribe events, and react to these events. A simple example to show how to build this EventBus could be helpful. We can also use native objects like Window (addEventListent...) and CustomEvent to show how it could be easy to create this layer.

Authentication Another important role in the MicroFrontends is the Authentication/Authorization MicroFrontend because it handles all the stuff to authenticate the user and then takes care of the user data. Typically, this MF has some pages to handle sign-in, sign-up, reset passwords, etc., but it also contains the JWT token or shares it with the shell to allow the rest of the application to use it. JWT could be saved in a cookie too, depending on the strategy, but maybe a shot slide with some info about this and a simple example, let the audience be more confident about this topic.

Data Sharing Sometimes it's necessary to share data between the MFs; the JWT token is an example. Maybe show some strategy to handle this problem and let the audience be more confident about how to handle it. This topic could be covered with Authentication too if we will decide to follow the path with the shared JWT.

Let me know if it's clear please