Issue #10 – Techniques for building Micro-Frontends

Issue #10 – Techniques for building Micro-Frontends – Apple News – NodeJS 17

Aobakwe Kodisang
February 14, 2023
Blog cover image

Issue #10  – Techniques for building Micro-Frontends – Apple News – NodeJS 17

<1/> Techniques for Micro-Frontends

The idea of slicing your frontend client into smaller applications may seem excessive and probably is for many teams. However, with the introduction of new standards in architecture, CDN options and the features that are continually being added to the frameworks we use, this is a lot easier than it used to be.

Although not everyone is a fan of this approach, given how decoupled our applications have become. Technical debt, scaling limits and build performance are just some of the challenges you come across with large frontend applications, so that’s why some teams decide to break it down.

Let’s take a dive into some of the techniques you can use when building out your micro-frontends.  

  • Module federation/Shared dependencies is a JavaScript architecture that enables shared code or dependencies across multiple applications—preventing code duplication.
  • Iframe, a popularly use case when it comes to implementing micro-frontends. Different fragments or pages are delivered through a CDN, with the state and navigation all being managed on the server.
  • Server Driven Approach, most of the time your server plays a big role in ensuring that your frontends work, whether it is responsible for the generation of your UI or delivering metadata to a macro application.

There are other interesting patterns or technologies you can add to your application, (e.g the use of suspense and error boundaries to isolate each application – touched in deeper dives). In the end, micro-frontends offer better scalability, less code and ultimately increased productivity which are all the elements of world-class software.

<2/> Deeper Dives

The goal for each issue to give you as the reader at least one concept to learn about and at the same time giving you the resources to start exploring. This section will focus on sharing articles, videos and occasionally provide breakdowns to hopefully achieve that goal.

Netflix TechBlogNetflix Technology BlogA tiny framework that provides an abstraction layer for React web applications to leverage.How We Build Micro Frontends With Lattice

<3/> The Weekly Dev

There increase in announcements and digital events, there are just some things you can’t miss out on. We will filter through the noise and share with you the ones we think are important to the community.

Last week Apple revealed the 14″ and 16″ Mac Pro’s, together with a new line of silicon M1 chips. Things are getting more integrated, making these the most efficient and performant specs for a laptop the company has released.

The highlight of the event, the new M1 chips:

M1 Pro – promises to deliver 70% faster CPU performance and 100% GPU performance than the original chips

M1 Pro Max – with the same 10 core CPU, just increased 32 core GPU and 64 GB shared memory, giving you four times the graphic capability of the original M1.

The SD card slot, magnetic charger, and HDMI port were introduced on the hardware front, joined by a row of function keys and HDR video support. Now, this is not a Macbook for everyone, but for the power user who tends to push their machine to the limits.

<4/> Inside the console

A CDN is a network of geographically distributed servers worldwide; as the applications we build are used by users worldwide, it’s essential to provide all your users with the same high availability and performance, regardless of where they are.

That’s where AWS Cloudfront comes in, a managed CDN service, provides you with a fast, secure and programmable approach to delivering your content, whether it is a web application, images or videos.

Cloudfront will distribute content from an origin server and store it as a cache closer to your user’s region. With options like encryption, the configuration of custom origin servers and out of the box availability monitoring.

<5/> Geeking it up

Terrascan for your pipelines

More and more options are being made available to developers to secure their applications, here is an open-source code analyzer that you can integrate into your CI/CD process to monitor your Infrastructure as Code.

MonoDraw

Powerful ASCII art editor designed for the Mac, you can now have the documentation standards used by the Apple engineering team.

As seen on FOX, Digital journal, NCN, Market Watch, Bezinga and more

Scale your development team
faster with Scrums.com

Get in touch and let's get started
Book a Demo
Tick
Cost-effective
Tick
Reliable
Tick
Scalable