<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: ryan forte</title>
    <description>The latest articles on DEV Community by ryan forte (@rdforte).</description>
    <link>https://dev.to/rdforte</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F865551%2F4f875484-2469-48e3-817a-7b12e275c89c.png</url>
      <title>DEV Community: ryan forte</title>
      <link>https://dev.to/rdforte</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/rdforte"/>
    <language>en</language>
    <item>
      <title>Running Go in Containers: The Issue You Didn’t Know Existed 🐳</title>
      <dc:creator>ryan forte</dc:creator>
      <pubDate>Wed, 18 Sep 2024 22:02:19 +0000</pubDate>
      <link>https://dev.to/rdforte/the-implications-of-running-go-in-a-containerised-environment-3bp1</link>
      <guid>https://dev.to/rdforte/the-implications-of-running-go-in-a-containerised-environment-3bp1</guid>
      <description>&lt;p&gt;I’m gonna get straight to the point. &lt;strong&gt;Go is not CFS aware&lt;/strong&gt;. Yep thats right it ain't, so if your running any containerised application that uses Go and your not aware of the performance implications of running Go in Docker then hopefully this article will shine some light on the issue and show you how you can configure GOMAXPROCS for your Go applications.&lt;/p&gt;

&lt;h2&gt;
  
  
  Intro to GOMAXPROCS
&lt;/h2&gt;

&lt;p&gt;GOMAXPROCS is an env variable and function from the &lt;a href="https://pkg.go.dev/runtime@go1.23.1" rel="noopener noreferrer"&gt;runtime package&lt;/a&gt; that limits the number of operating system threads that can execute user-level Go code simultaneously. If GOMAXPROCS is not set then it will default to &lt;a href="https://pkg.go.dev/runtime@go1.23.1#NumCPU" rel="noopener noreferrer"&gt;runtime.NumCPU&lt;/a&gt; which is the number of logical CPU cores available by the current process. For example if I decide to run my Go application on my shiny new 8 core Mac Pro, then GOMAXPROCS will default to 8. We are able to configure the number of system threads our Go application can execute by using the runtime.GOMAXPROCS function to override this default.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is CFS
&lt;/h2&gt;

&lt;p&gt;CFS was introduced to the Linux kernel in version &lt;a href="https://kernelnewbies.org/Linux_2_6_23" rel="noopener noreferrer"&gt;2.6.23&lt;/a&gt; and is the default process scheduler used in Linux. The main purpose behind CFS is to help ensure that each process gets its own fair share of the CPU proportional to its priority. In Docker every container has access to all the hosts resources, within the limits of the kernel scheduler. Though Docker also provides the means to limit these resources through modifying the containers cgroup on the host machine.&lt;/p&gt;

&lt;h2&gt;
  
  
  Performance implications of running Go in Docker
&lt;/h2&gt;

&lt;p&gt;A common issue I feel Go devs have is always thinking that concurrency is faster and the more threads you are running on the better. If your someone who thinks this way, sorry to break the news to you but that is not always the case.&lt;/p&gt;

&lt;p&gt;Let's imagine a scenario where we configure our ECS Task to use 8 CPU’s and our container to use 4 vCPU’s.&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

{
    "containerDefinitions": [
        {
            "cpu": 4096, // Limit container to 4 vCPU's
        }
    ],
    "cpu": "8192", // Task uses 8 CPU's
    "memory": "16384",
    "runtimePlatform": {
        "cpuArchitecture": "X86_64",
        "operatingSystemFamily": "LINUX"
    },
}


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;The equivalent in Kubernetes will look something along the lines of:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

apiVersion: v1
kind: Pod
metadata:
  name: app
spec:
  containers:
  - name: app
    image: app
    resources:
      limits:
        cpu: 4


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;In ECS the CPU Period is locked into 100ms. View ECS CPU Period configuration &lt;a href="https://github.com/aws/amazon-ecs-agent/blob/d68e729f73e588982dc2189a1c618c18c47c931b/agent/api/task/task_linux.go#L39" rel="noopener noreferrer"&gt;here&lt;/a&gt;. In kubernetes the administrator can configure the &lt;code&gt;cpu.cfs_period_us&lt;/code&gt; which also has a default value of 100ms.&lt;/p&gt;

&lt;p&gt;The CPU Period refers to the time period in microseconds, where the kernel will do some calculations to figure out the allotted amount of CPU time to provide each task. In the above configuration this would be 4 vCPU’s multiplied by 100ms (cpu period) giving the task 400ms (4 x 100ms).&lt;/p&gt;

&lt;p&gt;If all is well and good with our Go application then we would have go routines scheduled on 4 threads across 4 cores.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffbmxrbv2n13hatprk9ht.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffbmxrbv2n13hatprk9ht.png" alt="4 threads"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Threads scheduled on cores 1, 3, 6, 8&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;For each 100ms period our Go application consumes the full 400 out of 400ms, therefore 100% of the CPU quota.&lt;/p&gt;

&lt;p&gt;Now Go is NOT CFS aware &lt;a href="https://github.com/golang/go/issues/33803" rel="noopener noreferrer"&gt;golang/go#33803&lt;/a&gt; therefore GOMAXPROCS will default to using all 8 cores of the Task.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fems30tclihipdwqt9oew.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fems30tclihipdwqt9oew.png" alt="8 threads"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now we have our Go application using all 8 cores resulting in 8 threads executing go routines. After 50ms of execution we reach our CPU quota 50ms * 8 threads giving us 400ms (8 * 50ms). As a result CFS will throttle our CPU resources, meaning that no more CPU resources will be allocated till the next period. This means our application will be sitting idle doing nothing for a full 50ms.&lt;/p&gt;

&lt;p&gt;If our Go application has an average latency of 50ms this now means a request to our service can take up to 150ms to complete, which is a 300% increase in latency.&lt;/p&gt;

&lt;h2&gt;
  
  
  Solution
&lt;/h2&gt;

&lt;p&gt;In Kubernetes this issue is quite easy to solve as we have &lt;a href="https://github.com/uber-go/automaxprocs" rel="noopener noreferrer"&gt;uber automaxprocs&lt;/a&gt; package to solve this issue. Though automaxprocs will not work for ECS &lt;a href="https://github.com/uber-go/automaxprocs/issues/66" rel="noopener noreferrer"&gt;uber-go/automaxprocs#66&lt;/a&gt; because the cgroup &lt;code&gt;cpu.cfs_quota_us&lt;/code&gt; is set to -1 🥲. That is why I have built &lt;a href="https://github.com/rdforte/gomaxecs/" rel="noopener noreferrer"&gt;gomaxecs&lt;/a&gt;, which is a package to help address this issue.&lt;/p&gt;

&lt;h2&gt;
  
  
  Wrap up
&lt;/h2&gt;

&lt;p&gt;Hopefully this article helped to shine some light on the current CFS issues in Docker and you walked away from this article having learnt something new.&lt;/p&gt;

&lt;p&gt;Until next time. Peace ✌️&lt;/p&gt;




&lt;h2&gt;
  
  
  References
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://docs.aws.amazon.com/AmazonECS/latest/developerguide/task-metadata-endpoint.html" rel="noopener noreferrer"&gt;Monitor workloads using Amazon ECS metadata&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://100go.co/?h=kubernetes#not-understanding-the-impacts-of-running-go-in-docker-and-kubernetes-100" rel="noopener noreferrer"&gt;Not understanding the impacts of running Go in Docker and - Kubernetes (#100)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://kernelnewbies.org/Linux_2_6_23" rel="noopener noreferrer"&gt;Linux_2_6_23&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://pkg.go.dev/runtime@go1.23.1" rel="noopener noreferrer"&gt;runtime@go1.23.1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://docs.aws.amazon.com/AmazonECS/latest/developerguide/task-metadata-endpoint-v4.html" rel="noopener noreferrer"&gt;Amazon ECS task metadata endpoint version 4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://docs.docker.com/engine/containers/resource_constraints/" rel="noopener noreferrer"&gt;docker resource constraints&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>go</category>
      <category>docker</category>
      <category>aws</category>
      <category>kubernetes</category>
    </item>
    <item>
      <title>Micro Frontends 101 👨🏻‍🏫</title>
      <dc:creator>ryan forte</dc:creator>
      <pubDate>Mon, 23 May 2022 03:30:48 +0000</pubDate>
      <link>https://dev.to/rdforte/micro-frontends-101-han</link>
      <guid>https://dev.to/rdforte/micro-frontends-101-han</guid>
      <description>&lt;p&gt;Yo!&lt;br&gt;
Ever here'd this term before &lt;code&gt;Micro Frontend&lt;/code&gt; or &lt;code&gt;MFE&lt;/code&gt; and been like what da heck is that? Well you have stumbled across the right class room. In this introductory class Mr.Forte is going to be going over a high level overview of:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;What is a Micro Frontend (MFE).&lt;/li&gt;
&lt;li&gt;What are the pro's.&lt;/li&gt;
&lt;li&gt;What are the cons.&lt;/li&gt;
&lt;li&gt;Common Principals to follow.&lt;/li&gt;
&lt;li&gt;How might we implement an MFE.&lt;/li&gt;
&lt;/ol&gt;

&lt;h1&gt;
  
  
  What is a Micro Frontend (MFE)
&lt;/h1&gt;

&lt;p&gt;A Micro Frontend is just an architectural &lt;strong&gt;design approach&lt;/strong&gt; to breaking down a larger monolithic frontend application into smaller reusable applications. I also like to refer to this as pulling apart the monster 😈 &lt;/p&gt;

&lt;p&gt;These smaller applications are then hosted inside of a larger  application which we like to call the &lt;strong&gt;Host&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Between the Host and the MFE we utilise some form of MFE Framework or Adaptor which acts as the glue between the Host and MFE allowing the host to mount/unmount the MFE plus do any other work which is necessary in order to get the two to play nicely together.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F944rd8450th7ey2cy1l7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F944rd8450th7ey2cy1l7.png" alt="MFE Glue" width="462" height="285"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;Each MFE will serve as its own standalone, independently deployable application which is loosely coupled from other applications. Each MFE will also have such things as its own CI/CD pipeline as shown in the diagram below.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdq44cjdatotl1tjng2ff.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdq44cjdatotl1tjng2ff.png" alt="MFE CICD Pipeline" width="800" height="241"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  What are the Pro's
&lt;/h1&gt;

&lt;h3&gt;
  
  
  1. Reusability
&lt;/h3&gt;

&lt;p&gt;One of the main benefits of utilising MFE's is their ability to be reused across multiple applications due to their nature of being loosely coupled. In the below image I have a products Micro Frontend which has the sole responsibility of displaying products to the client. It contains all the logic related to products and doesn't do anything else other than provide functionality related to products.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmedoeadearykn3do72zf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmedoeadearykn3do72zf.png" alt="MFE Reusability" width="800" height="557"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Increased Delivery Speed
&lt;/h3&gt;

&lt;p&gt;With Micro Frontends due to their nature of being these small isolated applications with their own continuous integration and delivery pipelines. It allows for independent development and release cycles resulting in faster build times. With cross functional teams solely focusing on the development of their MFE it allows for multiple teams to work in parallel along side one another minimising blockers teams might face when working on a large monolithic application therefore resulting in a increased delivery speed.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Scalability
&lt;/h3&gt;

&lt;p&gt;As an organisation grows and more and more developers are onboarded into the system you will usually find their comes issues with how do we scale the system along with this increased growth.&lt;/p&gt;

&lt;p&gt;One struggle is onboarding time ie: the time it takes to onboard a new developer and get them up to speed with the entirety of the system. This can be a real challenge if it is a large monolithic application. On the flip side we can have a new developer work on an MFE which will be a much smaller section of the entire system. This will allow the developer to solely focus on this part of the system which will be much easier for them to wrap their head around and get up to speed allowing them to take part in the development process much sooner and then gradually introduce them to the remainder of the system.&lt;/p&gt;

&lt;p&gt;Due to the nature of Micro Frontend's being loosely coupled from the remainder of the system it allows for one teams work to not effect another teams work which stops teams from stepping on each others toes therefore improving the development speed as mentioned above while also aiding in the continuous growth of the system.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Technology Agnosticism
&lt;/h3&gt;

&lt;p&gt;Another major benefit to MFE's is it allows teams to pick their own technology stack which is best suited for the task at hand. Whether you want to have this is up to you but it is a possibility with Micro Frontends. For example my host application might be written in Angular but my MFE's might be written in Vue or React.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flhvn5yik9aaarm3ufi7x.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flhvn5yik9aaarm3ufi7x.png" alt="MFE Technology Agnosticism" width="540" height="500"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;h3&gt;
  
  
  5. Decoupling
&lt;/h3&gt;

&lt;p&gt;With a decoupled application architecture it allows for each app to perform its own task independently with complete autonomy allowing for a change in one service to not effect changes in another. This decoupled application architecture is one of the main benefits of Micro Frontends which also ties back into scalability and the ability for the system to grow.&lt;/p&gt;

&lt;h3&gt;
  
  
  6. Maintenance
&lt;/h3&gt;

&lt;p&gt;As a monolithic application grows to become an absolute monster of an app there tends to be a correlation between the size of the application and the maintenance involved. As new features are added and existing code is modified there is the likely hood for regressions to be introduced along with new bugs. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6c3ltksgbtumxb9hy2fh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6c3ltksgbtumxb9hy2fh.png" alt="MFE Maintenance" width="620" height="325"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;Because MFE's are these small manageable applications with clearly defined dependencies it makes building a mental model of the app a lot simpler for developers allowing for developers to clearly understand how the MFE works therefore making it simpler for teams to maintain and add new functionality.&lt;/p&gt;

&lt;h3&gt;
  
  
  7. Fault Tolerance
&lt;/h3&gt;

&lt;p&gt;In the case of a monolithic application if a part of the system fails then it will stop the whole system from working. This is also referred to as a single point of failure. &lt;br&gt;
In the case of an MFE we can have it though if our Micro Frontend fails it will not bring down the remainder of the Frontend. This results in a more resilient system, which is less prone to failure. It also helps to create a more highly available system, minimising down time which therefore helps us to further strive towards building a more reliable and robust system.&lt;/p&gt;

&lt;h1&gt;
  
  
  What are the Con's
&lt;/h1&gt;

&lt;h3&gt;
  
  
  1. Increased Complexity
&lt;/h3&gt;

&lt;p&gt;MFE's can't all be sunshine and rainbows. With Every architectural decision we make as Engineers it is all about weighing up the pro's and con's. One of the major downsides with MFE's is the improved complexity which comes along with setting up our MFE's as there has to exist some form of middle ground between the two which allows our host to implement our MFE and our remote to be used as an MFE.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4fimi1vrztz4i9lyw6m2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4fimi1vrztz4i9lyw6m2.png" alt="MFE Complexity" width="515" height="135"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;There are also other things to consider such as routing and how might our MFE communicate with the host or vice verser. These are all things which become some what more difficult with MFE's.&lt;/p&gt;

&lt;p&gt;As the number of Micro Frontends continues to grow so will the complexity of the overall system. There is also the possibility for our Frontend architecture to turn into a Monolithic Micro-services, though with careful planning and guidelines put in place this can help to mitigate against this risk.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Larger Payloads
&lt;/h3&gt;

&lt;p&gt;When implementing MFE's there is the possibility to have some level of code duplication across your MFE's and depending on how you implement your MFE this can result in a larger payload when we render our application to the client which results in a level of decreased performance though there are ways to efficiently handle this through utilising such means as &lt;a href="https://reactjs.org/docs/code-splitting.html" rel="noopener noreferrer"&gt;Code Splitting&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Inconsistencies in design
&lt;/h3&gt;

&lt;p&gt;Because each MFE is its own isolated entity there is a chance that when the host renders the MFE we can have an inconsistency in the designs. Though there are ways we can work around this through using popular component libraries such us &lt;a href="https://mui.com" rel="noopener noreferrer"&gt;Material UI&lt;/a&gt; throughout our Hosts and MFE's or forming themes which the MFE can inherent from the Parent ie: &lt;a href="https://tailwindcss.com/docs/theme" rel="noopener noreferrer"&gt;tailwind theme&lt;/a&gt;, &lt;a href="https://emotion.sh/docs/theming" rel="noopener noreferrer"&gt;emotion theme&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;One little gotcha with MFE's depending on the approach you take is that there is possibilities for css to clash as one MFE might bring in different styles compared to the other and if there are classes, attributes or id's with overlapping styles there is the possibility that one MFE's styles might override the others which will cause inconsistencies in our designs. &lt;/p&gt;

&lt;p&gt;Below are some ways as to how we might tackle this problem:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt; Use a &lt;strong&gt;css-in-js&lt;/strong&gt; library such as &lt;a href="https://emotion.sh/docs/introduction" rel="noopener noreferrer"&gt;Emotion&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Use &lt;strong&gt;css-modules&lt;/strong&gt; as described in (What are CSS Modules and why do we need them)[&lt;a href="https://css-tricks.com/css-modules-part-1-need/" rel="noopener noreferrer"&gt;https://css-tricks.com/css-modules-part-1-need/&lt;/a&gt;]&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  4. No Standards
&lt;/h3&gt;

&lt;p&gt;Within the MFE space there is no set standard or best way to go about implementing a Micro Frontend architecture as there are so many different ways to go about implementing MFE's we have to consider what's the best way to implement a Micro Frontend which suits our particular use case as this can vary quite drastically from one application to another.&lt;/p&gt;

&lt;h1&gt;
  
  
  Common Principals to Follow
&lt;/h1&gt;

&lt;h3&gt;
  
  
  A Domain Driven Design Approach
&lt;/h3&gt;

&lt;p&gt;Domain Driven Design (DDD) is a design approach for modelling our software around the domains of the business where by breaking our system down into Bounded Contexts which acts as a boundary around our domains.&lt;/p&gt;

&lt;p&gt;For Example we may have an application which involves a user to:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;search for products.&lt;/li&gt;
&lt;li&gt;fulfil some order flow to enable the capturing of the users details ie: address, email, phone, name.&lt;/li&gt;
&lt;li&gt;pay for the order.&lt;/li&gt;
&lt;li&gt;order gets shipped. Might also provide some form of parcel tracking.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxe2o68ahtnh50te5xjx9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxe2o68ahtnh50te5xjx9.png" alt="MFE Domain Driven Design" width="795" height="226"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This would then allow us to break down our Monolithic app into 4 seperate MFE's. One for the Searching of Products, another for Ordering, Payment and Shipping.&lt;br&gt;
We could then if we wanted to apply a BFF (Backend For Frontend) which acts as an API for dealing directly with its own MFE. Each BFF would then contain all the functionality for dealing directly with its own domain ie: Payment BFF would contain all the logic for validating credit cards, processing payments etc..&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7bzhp1mv3iikbshyqlw3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7bzhp1mv3iikbshyqlw3.png" alt="MFE DDD With BFF" width="800" height="625"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;This approach then if we wanted to would allow for 4 cross functional teams to work in parallel of one another and become masters of their own domains.&lt;/p&gt;

&lt;h3&gt;
  
  
  Share Nothing
&lt;/h3&gt;

&lt;p&gt;Each MFE is meant to be its own self contained application which is decoupled from the remainder of the other applications. &lt;br&gt;
Once we start sharing things such as state and logic across our MFE's then we start to cross our bounded contexts and start to form some overlap within our MFE's which could lead us down a dark path of a Monolith Micro-service. &lt;br&gt;
So I advise any time you are considering sharing something across your MFE's just take a step back and have a long hard think about it 🤔&lt;/p&gt;

&lt;h1&gt;
  
  
  How might we implement an MFE
&lt;/h1&gt;

&lt;p&gt;Just before we finish our MFE 101 class I would like to go over MFE Integration and a few different alternatives you might want to consider.&lt;br&gt;
With there being so many different solutions I will only touch base on a couple but just keep in mind their is no one size fits all approach and before we consider how might we implement our MFE's we must weigh up the pros and cons and pick an approach that is more tailored towards our use case.&lt;/p&gt;

&lt;h3&gt;
  
  
  Server Side Integration
&lt;/h3&gt;

&lt;p&gt;With this approach the MFE's are composed on the server side before being sent to the client. Facebook follows a similar approach. Though it refers to its MFE as a Pagelet. How it approaches MFE's is by rendering a template on the server and then dishing this up to the client while the web server continues to generate MFE's in the background which are then served up to the client whereby replacing the corresponding divs placeholder with the Pagelet's HTML markup. If you would like to read more about Facebooks MFE implementation approach you can read more about it at &lt;a href="https://engineering.fb.com/2010/06/04/web/bigpipe-pipelining-web-pages-for-high-performance/" rel="noopener noreferrer"&gt;Facebook Engineering&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Build Time Integration
&lt;/h3&gt;

&lt;p&gt;With a build time integration the Host application will get access to the MFE's source code before being rendered on the browser.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz3rmj9a9ewa9jhf7u6yr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz3rmj9a9ewa9jhf7u6yr.png" alt="MFE Build Time Integration" width="657" height="403"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;The upside to this is that it is pretty easy to setup our MFE as a package though the downside to this is that every time we make a change to our MFE and redeploy it, we then have to bump the package number of our MFE package in the host and then redeploy the host. It is also possible to start bleeding the lines between the MFE and Host when we have an MFE as a package which could lead to tight coupling of our services.&lt;/p&gt;

&lt;h3&gt;
  
  
  Run Time Integration
&lt;/h3&gt;

&lt;p&gt;With a runtime integration the Host application will get access to the the MFE's source code after the host is loaded in the browser. The upside to taking a runtime approach is that we can deploy our MFE's at any time and have it instantly visible in our Host or we can version it and have the host decide which version of the MFE it would like to see. The downside to this is that the tooling and setup is more complicated.&lt;/p&gt;

&lt;p&gt;There are numerous ways to integrate our MFE's into our host at runtime the first being &lt;a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" rel="noopener noreferrer"&gt;iframes&lt;/a&gt;. This approach is relatively easy to implement and facilitates isolation between our host application and the MFE keeping them both loosely coupled. Though the downsides to using iframes is that we loose all accessibility and it adds a lot of complexity when it comes to building a responsive site.&lt;/p&gt;

&lt;p&gt;Another approach would be to use &lt;a href="https://webpack.js.org/concepts/module-federation/" rel="noopener noreferrer"&gt;Webpack Module Federation&lt;/a&gt; which is a new feature of Webpack 5. &lt;/p&gt;

&lt;p&gt;It allows devs to create multiple seperate builds and then share these builds with other applications at runtime who also utilise the Module Federation plugin. The great thing about Module Federation is that it makes sharing code extremely easy and though it is not intended for Micro Frontends it does make a good fit for integrating MFE's and is slowly becoming the adopted approach for an MFE Architecture.&lt;/p&gt;

&lt;p&gt;In the below diagram we can see how we can utilise Module Federation to create the build of our MFE.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft96csplgm8q4fvrn5v9q.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft96csplgm8q4fvrn5v9q.png" alt="MFE Webpack Module Federation" width="800" height="281"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When your host application loads it will fetch the remoteEntry.js file which contains a list of directions on how to get the necessary Javascript files to load your MFE. Webpack does majority of the heavy lifting it mainly just comes down to you as the developer to configure Module Federation in your Webpack config.&lt;/p&gt;

&lt;p&gt;Well thats pretty much all I got for todays class I hope y'all enjoyed this brief introduction to Micro Frontends and I look forward to seeing you in the next one!&lt;/p&gt;

&lt;p&gt;Peace!&lt;/p&gt;

&lt;h3&gt;
  
  
  References
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.udemy.com/course/microfrontend-course/" rel="noopener noreferrer"&gt;Microfrontends with React: A Complete Developer's Guide&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/watch?v=lKKsjpH09dU" rel="noopener noreferrer"&gt;Micro-Frontends Course - Beginner to Expert&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://martinfowler.com/articles/micro-frontends.html" rel="noopener noreferrer"&gt;Micro Frontends - Martin Fowler&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://micro-frontends.org/" rel="noopener noreferrer"&gt;Micro Frontends extending the microservice idea to frontend development&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://webpack.js.org/concepts/module-federation/" rel="noopener noreferrer"&gt;Webpack Module Federation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/watch?v=BuRB3djraeM" rel="noopener noreferrer"&gt;Micro Frontend Architecture - Luca Mezzalira, DAZN&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/watch?v=w58aZjACETQ" rel="noopener noreferrer"&gt;Micro-Frontends: What, why and how&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>programming</category>
      <category>react</category>
    </item>
  </channel>
</rss>
