Skip to content

Instantly share code, notes, and snippets.

View birendra-b's full-sized avatar

Birendra Bikram birendra-b

1 follower · 0 following
View GitHub Profile
@birendra-b
birendra-b / .eslintrc
Created June 29, 2020 16:16
ESLint file with basic configuration
{
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint"
],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended"
@birendra-b
birendra-b / tsconfig.json
Created June 29, 2020 16:10
tsconfig.json with basic configuration for a web server
{
"compilerOptions": {
"lib": [
"es5",
"es6"
],
"baseUrl": "./",
"emitDecoratorMetadata": true,
"esModuleInterop": true,
"experimentalDecorators": true,
@birendra-b
birendra-b / renderMicroFrontend.js
Created February 27, 2020 19:18
Utility to render MicroFrontend
function renderMicroFrontend(pathname) {
const microFrontend = routes[pathname || window.location.hash];
const root = document.getElementById('microfrontend');
root.innerHTML = microFrontend ? new microFrontend().render(): new Home().render();
$(window).scrollTop(0);
}
$(window).bind( 'hashchange', function(e) { renderFrontend(window.location.hash); });
renderFrontend(window.location.hash);
@birendra-b
birendra-b / index.html
Created February 27, 2020 19:16
The Container in the Component based MicroFrontend approach
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>PetStore - because Pets love pampering</title>
<meta charset="UTF-8
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<!-- Header section -->
@birendra-b
birendra-b / Product.js
Last active February 27, 2020 19:09
Component Based Micro-Frontend
class Product extends MicroFrontend {
static get productDetails() {
return {
'1': {
name: 'Cat Table',
img: 'img/product/cat-table.jpg'
},
'2': {
name: 'Dog House Sofa',
img: 'img/product/doghousesofa.jpg'
@birendra-b
birendra-b / Cart.js
Created February 27, 2020 19:01
Component based MicroFrontend
class Cart extends MicroFrontend {
beforeMount() {
// get previously saved cart from backend
}
render() {
return `<!-- Page -->
<div class="page-area cart-page spad">
<div class="container">
<div class="cart-table">
@birendra-b
birendra-b / MicroFrontend.js
Last active February 27, 2020 18:57
Component Based MicroFrontends
// A virtual class from which all micro-frontends would extend
class MicroFrontend {
beforeMount() {
// do things before the micro front-end mounts
}
onChange() {
// do things when the attributes of a micro front-end changes
}
@birendra-b
birendra-b / micro-frontend.html
Last active February 27, 2020 18:54
A Single Page MicroFrontend
!DOCTYPE html>
<html lang="zxx">
<head>
<title>The MicroFrontend - eCommerce Template</title>
</head>
<body>
<header class="header-section header-normal">
<!-- Header is repeated in each frontend which is difficult to maintain -->
....
....