Microfrontends (MFEs) are an approach to building larger web front end applications using concepts similar to microservices. It allows an application to be split into discrete projects that can be created and managed independently. This course explains the principles and challenges of working on MFE applications and teaches how to build MFEs using either or both of React or Angular, with a focus on practical application of the concepts.

Duration: 2 days

Who is it for: This course is for developers who need to be able to work with MFE projects.

Layout: This course is a mixture of lectures and hands on exercises designed to reinforce the topics learnt

Objectives

• The principles and different approaches of Microfrontends (MFEs)
• The Webpack framework
• Module federation
• The container application
• How apps can work together
• Styling in MFEs
• Authentication challenges

Modules

What is an MFE?

• The benefits of the MFE approach
• Architecture options

Creating a MFE

• • Webpack basics
• Building a module
• Creating the container

Module basics

• Module development concepts
• Module federation
• Avoiding duplicated dependencies

Communicating between the container and modules

• Why modules can’t interact with each other
• Using events and callbacks

Using frameworks

• Working with React
• Working with Angular

Styling applications

• Using CSS in Microfrontends

Routing and navigation

• Navigation strategies
• Basic routing
• The back-button
• routing within modules

Authentication

• Authentication strategies
• Implementing authentication and route protection

course

React fundamentals

  React is a framework used to build responsive, reactive and engaging user interfaces. In this course we introduce the…

course

Deploying Applications to the Cloud using Terraform

This class is designed to teach DevOps engineers, Production Support staff and developers how to effectively use Terraform to manage infrastructure in a cloud environment.

course

JavaScript Web Development

This course leads you through the latest JavaScript syntax. The course also introduces some of the more commonly used libraries such as Jest for testing, and Axios for API invocation.

course

Javascript Foundation Course

This course guides non-experienced programmers through the tasks of writing and maintaining object-based programs in Javascript.

course

HTML5, CSS3, and JavaScript Development

HTML5 and CSS3 are essential ingredients in modern-day web applications. Gone are the days of vendor-specific plugins and browser wars, and in their place we have the promise of truly open and powerful industry standards.

course

AngularJS 2.0 Development

AngularJS 2.0 is a complete rewrite of the Angular framework, incorporating the latest standards in JavaScript and unifying many of the diverse elements found in AngularJS 1.x.