Rethinking Microfrontend Architecture combining Still.js with React (or other Framewok) - Arch Serie

Question

Why Microfrontend

Building and modernizing large, and/or legacy enterprise level applications is often challenging, as it requires rewriting significant portions or even the entire application when moving to newer technology versions. Microfrontends offer a practical solution to this problem, much like microservices do for backend. They're not just a buzzword, but a meaningful architectural approach for handling complexity and scalability. Still.js enhances this by providing powerful and flexible means for building microfrontends, with seamless integration into frameworks like React.

What problems and use cases can be addressed with Microfrontend?

1. Application decoupling;

2. Progressive migration from old to new version (e.g. migrate
   framework from v2 to v15);

3. Fast implementation of new feature without disrupting the existing
   ecosystem;

   Fast Modernization of old/legacy application yet keeping things
   stable;

4. and more...

How Still.js (with React or others) for Microfrontend?

Still.js is an open source modern, complete and full-featured (with known capabilities and more) frontend framework built with vanilla JavaScript, designed for easy and scalable development and integration like embedding its app inside React apps in form of components. Bellow is a high level architecture of the integration we'll go through.

Quite a lot can be done in terms of Microfrontend with Still.js, however in this article we're going to focus in introductions aspects, there is also a video on youtube with a hands on tutorial.

Integrating with React (using Vite to generate the project)

Step 1. Create your React App, using vite (follow React official documentation using Vite).

npm create vite@latest my-app -- --template react

Step 2. Install React app dependencies.

npm i

Step 3. In your React app, install the Still.js app loader from @stilljs/apploader (on npm), this is a regular (not dev) dependency.

npm i @stilljs/apploader

Step 4. Loading Still.js application inside React is done when the React component is mounted, we'll use the App.js(jsx,tsx,ts), which is the default React entry component.

import { useEffect } from 'react';
import './App.css';
import { RegularReactComponent } from "./components/RegularReactComponent";
import { StillAppLoader } from '@stilljs/apploader';

function App() {

  useEffect(() => {

    // Creating App loader instance
    const stillApp = new StillAppLoader();
    stillApp
     .cdn({ env: { STILL_HOME: 'public/micros/stillapp1/' }   })
     .load();

    // Unload the App when React component gets unmounted
    return () => stillApp.unload();
  },[]);

  return (
    <>
      <RegularReactComponent></RegularReactComponent>
      React validating local Still component embeding
    <>
  )
}

export default App

Step 5. Creating the Still.js App

React project generated with Vite provides a folder named public/ right on the root along with src/ and others, there (public) we generate our Still.js app.

Still CLI provides the still lone command to create a Microfrontend/Lone project, providing it with very minimal setup, having the CLI installed, type in your terminal. (follow the link to a short video):

still lone

Step 6. Create a Still.js lone component in the CDN approach

It’s called “lone” because Still.js isn’t installed locally, just the component and routes file are there and it behaves the same. With CLI installed type the bellow in terminal. (follow the link to a short video):

still c cp app/components/TestComponent --lone

Step 7. Embed Still.js component inside React app/component
We'll change the return portion and add the Still component as follow:

  return (
    <>
      <RegularReactComponent></RegularReactComponent>
      React validating local Still component embeding
      <st-element component="TestComponent"></st-element>
    <>
  )

Step 8. Running the React app:

npm run dev

Final result

Intercommunication between React and Still.js

Communication is feasible between React and Still.js once App/component is embeded, for that, we use the AppLoader as Proxy. but for the sake of size of this article we're not depicting it here, instead you can see this tutorial on Youtube which an implementation is done in practice step by step.

To wrap up

Microfrontends aren’t a one-size-fits-all solution, but they’re ideal for highly modular and fast-evolving applications, such as modernizing legacy systems. Still.js enhances this flexibility by being framework-agnostic and built entirely in vanilla JavaScript, making it easy to adapt to any scenario, even when traditional frameworks fall short.

Give it a try and leverage the full potential of this architectural approach.

See you next time!