Why Microfrontend 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. Still.js React What problems and use cases can be addressed with Microfrontend? What problems and use cases can be addressed with Microfrontend? Application decoupling;


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


Fast implementation of new feature without disrupting the existing ecosystem;
Fast Modernization of old/legacy application yet keeping things stable;


and more... Application decoupling; Application decoupling; Progressive migration from old to new version (e.g. migrate framework from v2 to v15); Progressive migration from old to new version (e.g. migrate framework from v2 to v15); Fast implementation of new feature without disrupting the existing ecosystem;
Fast Modernization of old/legacy application yet keeping things stable; Fast implementation of new feature without disrupting the existing ecosystem; Fast Modernization of old/legacy application yet keeping things stable; and more... and more... How Still.js (with React or others) for Microfrontend? 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. video on youtube Integrating with React (using Vite to generate the project) Integrating with React (using Vite to generate the project) Step 1. Create your React App, using vite (follow React official documentation using Vite). Step 1 React official documentation using Vite npm create vite@latest my-app -- --template react npm create vite@latest my-app -- --template react Step 2. Install React app dependencies. Step 2. npm i 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. Step 3 @stilljs/apploader npm i @stilljs/apploader 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. Step 4 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 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 Step 5. 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): link to a short video still lone still lone Step 6. Create a Still.js lone component in the CDN approach Step 6. 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): link to a short video still c cp app/components/TestComponent --lone 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: Step 7. return (
    <>
      <RegularReactComponent></RegularReactComponent>
      React validating local Still component embeding
      <st-element component="TestComponent"></st-element>
    <>
  ) return (
    <>
      <RegularReactComponent></RegularReactComponent>
      React validating local Still component embeding
      <st-element component="TestComponent"></st-element>
    <>
  ) Step 8. Running the React app: Step 8. npm run dev npm run dev Final result Intercommunication between React and Still.js 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. this tutorial on Youtube To wrap up 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. Still.js vanilla JavaScript Give it a try and leverage the full potential of this architectural approach. See you next time! 👊🏽

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

8 Steps to Embedding Microfrontends in React with Still.js

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Getting Started With State Management in Still.js

How and Why to Choose a Frontend Architecture: Tips From an Experienced Developer

Performance Optimization of the Feed with Hundreds of Charts

GraphQL Isn’t Just for Data Anymore — It's Becoming Your Frontend

We Keep Reinventing CSS, but Was Styling Really the Problem?

Stop Letting Search Hijack Your Pagination

Getting Started With State Management in Still.js

How and Why to Choose a Frontend Architecture: Tips From an Experienced Developer

Performance Optimization of the Feed with Hundreds of Charts

GraphQL Isn’t Just for Data Anymore — It's Becoming Your Frontend

We Keep Reinventing CSS, but Was Styling Really the Problem?

Stop Letting Search Hijack Your Pagination

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps