GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → kito99 → micro-frontends-demo

kito99 / micro-frontends-demo

Licence: MIT License
Demo of a micro frontend approach with Web Components. From CodeOne 2019 presentation: Micro Front Ends: Breaking Up the Front-End Monolith

Programming Languages

CSS
56736 projects
HTML
75241 projects
typescript
32286 projects
java
68154 projects - #9 most used programming language
javascript
184084 projects - #8 most used programming language

Labels

angularmicroserviceswebcomponentsmicroprofilemicrofrontends

Projects that are alternatives of or similar to micro-frontends-demo

lego
🚀 Web-components made lightweight & Future-Proof.
Stars: ✭ 69 (+187.5%)
Mutual labels:  webcomponents, microfrontends
plastic-bag
An open source library to work with micro frontends.
Stars: ✭ 22 (-8.33%)
Mutual labels:  webcomponents, microfrontends
solar-components
Web Components Implementation of Solar Design System
Stars: ✭ 16 (-33.33%)
Mutual labels:  webcomponents
cwco
Powerful and Fast Web Component Library with a Simple API
Stars: ✭ 27 (+12.5%)
Mutual labels:  webcomponents
smallrye-reactive-messaging
SmallRye Reactive Messaging
Stars: ✭ 144 (+500%)
Mutual labels:  microprofile
starter-simba
Lion-based Design System
Stars: ✭ 18 (-25%)
Mutual labels:  webcomponents
vaadin-checkbox
The Web Component for customized checkboxes. Part of the Vaadin components.
Stars: ✭ 18 (-25%)
Mutual labels:  webcomponents
capacitor-vue-ionicv4-app
sample app using capacitor vuejs and ionicv4 components
Stars: ✭ 70 (+191.67%)
Mutual labels:  webcomponents
css-toggle-component
Pure CSS Toggle Buttons as a Web component
Stars: ✭ 69 (+187.5%)
Mutual labels:  webcomponents
fritz
Take your UI off the main thread
Stars: ✭ 39 (+62.5%)
Mutual labels:  webcomponents
react-microfrontends-demo
Demo of microfrontends using React
Stars: ✭ 36 (+50%)
Mutual labels:  microfrontends
angular-elements-sample
Demo project, that demonstrates how to generate Web Components using Angular Elements, cool stuff :)
Stars: ✭ 18 (-25%)
Mutual labels:  webcomponents
domy
Custom Elements Storage
Stars: ✭ 77 (+220.83%)
Mutual labels:  webcomponents
greenwood
Greenwood is your workbench for the web, focused on supporting modern web standards and development to help you create your next project.
Stars: ✭ 48 (+100%)
Mutual labels:  webcomponents
vaadin-split-layout
The Web Component which allows you to partition a layout into resizeable areas. Part of the Vaadin components.
Stars: ✭ 40 (+66.67%)
Mutual labels:  webcomponents
custom-elements-manifest
Custom Elements Manifest is a file format that describes custom elements in your project.
Stars: ✭ 81 (+237.5%)
Mutual labels:  webcomponents
The-HTML-and-CSS-Workshop
A New, Interactive Approach to Learning HTML and CSS
Stars: ✭ 65 (+170.83%)
Mutual labels:  webcomponents
helloworld-web
Hello World web application in 39 different ways in Java
Stars: ✭ 18 (-25%)
Mutual labels:  microprofile
vite-plugin-sloth
Fresh take on static site generation, using HTML-first approach to build website. Powered by ⚡️ Vite
Stars: ✭ 39 (+62.5%)
Mutual labels:  webcomponents
base-starter-angular
Base Starter for Vaadin components with Angular
Stars: ✭ 13 (-45.83%)
Mutual labels:  webcomponents
View All Similar Projects ➔

Micro frontends demo

For a lab version of the same project, see https://github.com/kito99/micro-frontends-lab.

This is a simple application that demonstrates one approach to creating Micro frontends: using Web Components to integrate different web apps. It was originally demoed at Oracle CodeOne 2019 in San Francisco as part of the talk Micro Front Ends: Breaking Up the Front-End Monolith (slides) (mind map) by Kito D. Mann (@kito99), Principal Consultant at virtua.tech.

There are several sub-projects in this repo:

  • orchestrator - Entry point for the app; simple HTML page that uses the Vaadin Router web component to dynamically load different micro frontends.
  • app-one - Simple web app that uses Web Components. Built with lit-element and lit-html, and uses the cute emoji slider web component.
  • app-two - Default app created using the Angular 8 CLI, but packaged as a web component via Angular Elements.
  • app-three - Another Angular 8 created via the CLI and packaged via Angular Elements, but this one uses the PrimeNG Table component to talk to the app-three-service microservice.
  • app-three-service - Simple microservice built using Java and the MicroProfile standard running on Payara Micro; returns canned data.

NOTE: This project does not currently use any polyfills for Web Components or other standards, so evergreen browsers are required. (If you want polyfills, you'll need to add them from https://github.com/webcomponents/polyfills)

It's theoretically possible to include other technologies using this method, such as React via Adobe's react-webcomponent, or Vue.js via vue-web-component-wrapper.

Running

First, make sure you have Node (for JS/TS) and Maven (for Java) installed.

  1. Download dependencies and build each app as described in the individual README located in the app's folder.
  2. Run app-three-service as described in the project's README.
  3. Run a web server from the root folder, and point it to orchestrator/index.html. For simplicity, the project includes express, which can be used to serve the app.

To setup express, install the dependencies:

 npm install

Then run the server:

cd <root folder of this repo>
node server.js

And point your browser to the URL indicated (usually http://127.0.0.1:8000).

Technically, all of these apps could run on separate servers (using
CORS headers) or be proxied through the main web server.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].