Forem: AbdelRahman Hussein Mahmoud

From Monolithic To Micro Frontends - Part 3

AbdelRahman Hussein Mahmoud — Fri, 15 Jan 2021 17:35:06 +0000

Prerequisites
Application Registration
- index.html
- index.js
Start The Application
Conclusion

This will be the last part of the series and, we will see how can we register our Angular application inside our React application.

Prerequisites

Inside your Angular application open main.single-spa.ts file, and insert this line of code

import "zone.js/dist/zone.js";

Run your Angular application

npm run serve:single-spa:angular-app

And now you should have your Angular application running and its main.js file serving using this URL: http://localhost:4200/main.js

Application Registration

To register your Angular application you will need to use systemjs to load your Angular application module from the URL

Note: if you used systemjs directly to import your module inside your React application you might face this error
'System.import' is restricted from being used. Please use import(), so we will use a workaround to register the application.

index.html

Open index.html inside the public folder, and add these scripts which are responsible to load systemjs library

<script src="https://cdn.jsdelivr.net/npm/import-map-overrides@1.16.0/dist/import-map-overrides.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.0/dist/system.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.0/dist/extras/amd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.0/dist/extras/named-exports.min.js"></script>

Create our import map JSON object, which will contain a key value for our Angular application the key will be a unique name and the value will be the URL of the module, and also will contain the shared dependencies, read more about it from here

<script type="systemjs-importmap">
  {
    "imports": {
      "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.5.5/lib/system/single-spa.min.js",
      "react": "https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js",
      "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js",
      "@angularApp": "http://localhost:4200/main.js"
    }
  }
</script>

Create a new script tag and inside it, we will define our function which will be used to load our Angular application module

<script>
   window["@angularApp"] = () => System.import("@angularApp");
</script>

The final result for index.html should be like this

index.js

Open index.js file inside your React application and, add this snippet to register your application before start()

registerApplication(
  '@angularApp',
  window["@angularApp"],
  (location) => true
);

The final result for index.js should be like this

Start The Application

Now run your React application using the same script

npm start

and your application should be started and working fine, you can access it using this URL: http://localhost:3000/.
Now the two applications are running on the same page. you can control when to load or unload the application from the DOM by implementing the activity function inside registerApplication for more info check the documentation, in my case, I want to run the two applications on the same page, so I just returned true.

Conclusion

Alright, that is all for now, and I hope it was useful for you. You should now have a basic knowledge of what is micro frontends and how single-spa managed it. Also, I will leave below some references you can get back to it anytime.

A complete working demo in this Github [Repo]. (https://github.com/Abdelrahman-H-Mahmoud/single-spa-demo)
Micro frontends architecture here
single-spa documentation

From Monolithic To Micro Frontends - Part 2

AbdelRahman Hussein Mahmoud — Fri, 08 Jan 2021 15:27:51 +0000

Migrating React Application
- Migrate to single-spa application
- Configure Root Config
Migrating Angular Application

Migrating React Application

To migrate any existing React application I followed this documentation from single-spa and also You can find a complete working solution in this GitHub repo.
I am assuming you already have an existing React application.

Migrate to single-spa application

Inside your React root folder application, install single-spa and single-spa-react using npm or yarn

npm i single-spa single-spa-react
// or with yarn
yarn add single-spa single-spa-react

Create a file and name it root.app.js inside the src folder (you can choose whatever name you want)

touch src/root.app.js

inside this file, we will establish the root component, which is the top-level React component to be rendered. In our case, it will be App Component inside App.js
the code inside root.app.js should be looks like this

by the end of this point, we have now a single-spa application that we can register inside our root-config

Configure Root Config

Now let's configure our root-config, replace the code inside your index.js file with the code below

by doing this we are doing several steps, telling the single-spa to register your React application using registerApplication and start the application by calling the start() function.

Benefits of migration using this way

We are using the same react-script.
We don't have to configure webpack from scratch, as we are hijacking the current entry point, src/index.js, so there is no need to eject our React application and reconfigure the webpack.

You can run the application using the same scripts npm start.

Migrating Angular Application

To migrate any existing Angular application I followed this documentation from single-spa I am assuming you already have an existing Angular application.
in my case, I am using Angular version 10

Inside your root folder run the following command

ng add single-spa-angular

According to single-spa documentation, this command will:

Install single-spa-angular.

Generate a main.single-spa.ts in your project src/.

Generate single-spa-props.ts in src/single-spa/.

Generate asset-url.ts in src/single-spa/.

Generate an EmptyRouteComponent in src/app/empty-route/, to be used in app-routing.module.ts.

Add an npm script npm run build:single-spa.

Add an npm script npm run serve:single-spa.

and also will:

Add single-spa as a dependency, you will need to install it, as it not installed by default, it will be only added to your package.json, you can install it manually

npm i single-spa

or in your root folder where your package.json located run

npm i

which will refresh your dependencies tree and install any missing package.

Generate extra-webpack.config.js
Update build option inside angular.json and use @angular-builders/custom-webpack instead of @angular-devkit/build-angular you will need to install other dependencies by running

npm i @angular-builders/custom-webpack
npm i @types/node@14.0.4 --saveDev

Extra Steps to complete the migration

Some of these steps are not documented in the single-spa documentation, and I figured it out while I was migrating the application

Inside app.module.ts file

import {APP_BASE_HREF} from '@angular/common';

and add this object to the providers array

{provide: APP_BASE_HREF, useValue: '/'}

Inside tsconfig.app.json, add node to types array "types": ["node"]
In package.json, --deploy-url flag should be set to the host URL, In order for the webpack public path to be correctly set for your assets, see this Stack Overflow answer.

The result of this migration is a compiled JS file. After finishing the migration you can run the Angular application using this command

npm run serve:single-spa:angular-app

Which will start a dev server that is serving your js file, which will be located in http://localhost:4200/main.js

Conclusion

What have been done till now:

Migrated an existing React application.
Created our core config file.
Migrated an existing Angular application.

A complete working solution can be found in this Github repo, and it will be updated accordingly with each part published.

In the next part, we will talk more about how to register your Angular application inside your root config file.

From Monolithic To Micro Frontends - Part 1

AbdelRahman Hussein Mahmoud — Fri, 01 Jan 2021 16:02:03 +0000

Motivation:

We were having two applications one of them is React and the other one is Angular, the challenge here is that we want to run the Angular app inside our React app.

I came across the Micro frontends Architecture, and I found it may be helpful in my case and after investigations and reading in-depth about the concept and the architecture, I came up with three solutions

Revamp the whole Angular application to React.
Change all the Angular components to web components using Angular elements.
Implementing Micro frontend using single SPA.

Just Kidding 🤓

The revamp solution will take a lot of efforts and time and we don't have the luxury of time, So we decided to go for the third solution because we were having some limitations in the Angular to split the components, and we will need to bring them back together again inside the React application, and this will take some efforts and time due to the complexity of our Angular application, as it is containing routing, lazy loading modules, and authentication.

What is the single SPA?

From single SPA docs:

Single-spa is a framework for bringing together multiple JavaScript micro frontends in a frontend application. Architecting your frontend using single-spa enables many benefits, such as:

Use multiple frameworks on the same page without page refreshing (React, AngularJS, Angular, Ember, or whatever you're using)

Deploy your micro frontends independently.

Write code using a new framework, without rewriting your existing app.

Lazy load code for improved initial load time.

Single SPA main types of applications

Root Config

Considered as a container and the parent for all the single SPA applications, and also as a router from your root config application, you can

Register your single SPA application.
Determine when to load or unload the single SPA.

In the next parts, we will do some practical examples.

Migrating the React app to work as a single SPA and root application at the same time.
Migrating the Angular application to a single SPA.
Bring all together in one application.

Deno Vs Node

AbdelRahman Hussein Mahmoud — Sat, 30 May 2020 12:34:16 +0000

Deno & Node

Deno and Node both of them are a runtime environment for javascript that is developed by Ryan Dah and both of them build on V8 engine that is used by Chrome.
Deno first introduced in 2018 as Initial release by Ryan.

What is the difference between Deno & Node?

Deno uses ES modules so there will be no usage for require() in the future.
there is no NPM and package.json you can import you js modules as a file path or URL like the browser.
support for typescript out of box.
Deno requires explicit permissions for file, network, and environment access.
Browser compatibility, you can run the same script in the browser and Deno(if you are not using the global object).

Is Deno going to replace Node?

in my opinion and according to Ryan, No it will not,
and I think in the soon future there will be a lot of frameworks that support Deno, for example, there will be express for Deno also

you can find more in Deno website

Software Architecture (introduction)

AbdelRahman Hussein Mahmoud — Thu, 09 Apr 2020 18:21:36 +0000

In this series, we will talk about software architecture and what should the developer know, the article will be sample and basic knowledge.
there will be more upcoming parts related to different Software Architecture

The output from this series should let you have the basic knowledge of software architecture.

Note: the article is boring for the developer as there will be no code 😃

What is architecture?

According to Wikipedia Architecture is both the process and the product of planning, designing, and constructing buildings or any other structures, in our case what is the software architecture?
it's the same actually but instead of planning and designing for building, you are designing for software.

Software architecture is the shape of the system.
The higher level of the code we write.
It deals with the structure of the code and how things are organized.
How internal and external components will communicate with each other.

The first concern of the architect is to make sure that the house is usable, it is not to ensure that the house is made of bricks
-- uncle bob

And this means is to specify what is essential and what is details.

For example, we want to build a house, then we need to think about:

The space inside the house is essential because if there is no space then there will no place to put your things or to move inside the house.
The usability of the house if your house contains no rooms then it's useless to live inside it and you will need it to replace it with another house.
The building material of the house is a detail, as you can build a house using bricks, woods, stone, ...etc.

The essential here means is to support the primary needs of the house or in our case will be the domain everything else is just implementation of details.

When we build software:

The domain is essential.
The use cases are essential.
Presentation is a detail as you can build your application using ASP, JSP, angular, react, ...etc.
Data persistence is also a detail, you can use SQL or no-SQL to store your data.

When architecting software you need to think about the business and the problem it will solve.

What is the Domain?

The domain is the business or the subject your project or software will serve, for example, you need to build a software for banking of financial services, so you need first to understand what is banking and the domain here will be the banking.

In the next part, we will talk about,
Database Centric vs Domain Centric architecture.

Forem: AbdelRahman Hussein Mahmoud

From Monolithic To Micro Frontends - Part 3

Table Of Contents

Prerequisites

Application Registration

index.html

index.js

Start The Application

Conclusion

From Monolithic To Micro Frontends - Part 2

Table Of Contents

Migrating React Application

Migrate to single-spa application

Configure Root Config

Benefits of migration using this way

Migrating Angular Application

Extra Steps to complete the migration

Conclusion

From Monolithic To Micro Frontends - Part 1

Motivation:

What is the single SPA?

Single SPA main types of applications

Root Config

Deno Vs Node

Deno & Node

What is the difference between Deno & Node?

Is Deno going to replace Node?

Software Architecture (introduction)

What is architecture?

What is the Domain?