Microfrontends at Swissquote

define.js

define(function() {
  var platform = require("platform");
  var extensions = platform.extensions();

  define("my-plugin/router", ["my-plugin/resources/Router.js"], function(Router) {
    return new Router();
  });

  // Register the router to the platform, all plugins must return an instance of 
  // interface Router {
  //    route(url: String): void
  // } 
  extensions.register("ext.router", "my-plugin/router");
});

index.html

<script>
  // Load the platform and all plugins
  require(["platform", "my-plugin/define"], function(platform) {
    // Once the platform is loaded, load all routers from plugins
    const routers = platform.extensions()
      .loadAll("ext.router")
      .then(function (routers) {
        // The routers are ready, update them on the current route
        routers.forEach(function(router) {
          router.route(window.location.hash);
        });
      });
  });
</script>

View.ts

interface View {
  show(container: Element): void;
  hide(): void;
}