DEV Community: Nakassony Bernardo

Integrating Still.js into Next.js: A Hands-On Guide to Remote Microfrontend Components - Architecture Series

Nakassony Bernardo — Fri, 29 Aug 2025 00:51:46 +0000

In this second part of the Microfrontend series we’re answering another posed question, we explore integrating Still.js with Next.js, focusing on using remote Vendor components. The video includes a real-world use case and a project built from scratch, follow the Design System for implementation:

What points will be addressed in the video:

Creation of Next.js project
Generating and embedding Still.js app inside Next.js App
Embedding remote component (straight from npm) into the application
Data exchange between Still.js and Next.js (React)

Remote components

This approach is key in Microfrontends, as it enables embedding components from outside the project structure. It enhances feature sharing, increases decoupling, and reduces the size of the deployable package (e.g. bundle).

The idea behind remote component is for them to be served from somewhere which is not the embedding application itself, as we can see in the bellow architecture:

The above architecture promotes reusability by allowing the same component, available via NPM/GitHub, to be embedded across different applications built with various frameworks. Still.js can play a key role, serving as proxy as needed, by being embedded within these apps as well. Additionally, Still.js enables components to be written in Vanilla JavaScript rather than relying on framework-specific code.

Although NPM and Github are the approaches depicted in the architecture, Still.js adapts well with any other source for embedding remote components.

Self-contained components
This is the optimal situation in which a component can be used remotely, as the idea is that not external dependency exists so to avoid cascade importing, which can be harmful in terms of performance, also might cause JavaScript bloating issues.

Coding snippets specific considerations
Step1: The Still.js app is integrated into the Next.js project by placing it in a subfolder (we’ll call still-mf/) inside the public/ directory. It is then loaded using the apploader with additional parameters:

useEffect(() => {

    const stillApp = new StillAppLoader();
    stillApp
      .cdn({ env: { STILL_HOME: '/still-mf/', PATH_PREFIX: 'still-mf/' }, version: '1.3.13'})
      .load();

  },[]);

Step2: Next.js listens to Still.js events via subscription. The Apploader SDK now supports init/on(‘load’) event, improving memory and CPU usage, so no setTimeout needed:

useEffect(() => {
    // …. Above code
    stillApp.on('load', () => {

        stillApp.component.ref(ref1).variableName.onChange(newData => {
           console.log(‘Still.js updated the value of variableName to ’, newData);
        });

    });
},[]);

Compared to part one of the series, the main differences in the Still.js app setup for Next.js is the need to specify PATH_PREFIX and, optionally, the framework version to define which Still.js version is used.

Embedding NPM remote component

The video tutorial demonstrates how the StillTreeView vendor component from Still.js is used in a real use case with Next.js + Still.js integration. The component is embedded directly from NPM as a remote as shown in the example below code snippet:

<st-element component="npm/@path/to/package/ComponentName”></st-element>

As conclusion:
While not a bulletproof, Microfrontends are highly effective for complex, enterprise-scale applications. Remote components further enhance this architecture by promoting decoupling, feature sharing, and scalability. Ideally, these components should be self-contained for optimal results. Also, don't forget to check the video for more details.

What’s Next?
Don't forget to check the video

Try implementing a more complex Microfrontend with Still.js including navigation/routing (routing documentation)

Try to compare different Microfrontend approaches with the way Still.js does disruptively

Share your thoughts and ideas in case you have any concerning to this topic

Bear for the next parts of this series

Se you next time 👊🏽.

Getting Started with State Management in Still.js

Nakassony Bernardo — Tue, 19 Aug 2025 15:28:26 +0000

As part of modern Web Application, State management cannot be put aside, as they're not a simple aspect of complement but a very important piece which applications can not live without especially when it comes to modularized frontend.

See this video for hand-on practice: Youtube video

Follow the official documentation: Still.js Service Doc

Join the discord channel if you have further questions: Discord channel

Still.js provides different ways to handle State management (component/local state management video), therefore when it comes to Global State management, it provides with a built-in features called Services thereby making it possible to handle things in a Reactive way. Follow the bellow illustration on how it works behind the scenes:

Component 4 updates the store state, which is propagated to all subscribed components.

What is a Service in Still.js
This a a piece in the code placed in the most extreme layer in terms of architecture, thereby allowing external communication through means like API/HTTP. Services also had the ServiceEvent kind of variables that are declared as follow:

import { BaseService, ServiceEvent } from "../../@still/component/super/service/BaseService.js";

//This class will be places in the app/services/ folder
export class BiddingService extends BaseService {
    /** An array with a single country is being assigner */
    countryStore = new ServiceEvent(['Australia']);
}

In Still.js, all services must extend the BaseService class to be injectable into components. Reactive stores have to use the ServiceEvent type. After creating a service, it should be injected using @Inject, and components can then listen to specific data changes from stores (e.g.countryStore from above code):

import { ViewComponent } from "../../../@still/component/super/ViewComponent.js";
import { BiddingService } from '../../service/BiddingService.js';

export class BiddingDisplay extends ViewComponent {

    isPublic = true;

    /** 
     * @Inject
     * @Path services/
     * @type { BiddingService } */
     bService;

     stAfterInit() {
          this.bService.on('load', () => { //Check service readiness
               //Bellow, it Subscribe to ServiceEvent variable (countryStore)
               this.bService.countryStore.onChange(newValue => {
                     console.warn(`New country entered the Bid, follow the list: `, newValue);
               });
           });
      }
}

In the above example, we are specifying the path (folder) where the service is located, but this can be defined globally in the App level.

Still.js uses event-based reactive state management, where components subscribe via the onChange event. Any change to the state triggers notifications to all subscribers, regardless of where the change originated.
Retrieving value from the service is quite straightforward, as we only need to specify the store and put .value and the end as follow:

getCountryInTheBid() {
    const countryState = this.bService.countryStore.value;
    console.log(`----> Country Store before updating: `, countryState);
}

Updating a store is also a simple thing, in some cases we have to use some intermediate variables, this is the case of lists, follow the examples:

addMoreCountry() {

  /** Retrieve the state */
  const countryState = this.bService.countryStore.value;

  /** Updating the store and re-assigning it to the service */
  countryState.push('Madagascar');
  this.bService.countryStore = countryState;
}

Conclusion
Do not forget to check the video tutrial;

Still.js uses event-based reactive state management that simplifies setup by requiring only services and ServiceEvent based stores. Components can inject these and implement their own logic, while any centralized logic can be handled in the main component.

Se you in the next one 👊🏽

From Vanilla Template to Still.js Components: A Full Build and Deployment Guide

Nakassony Bernardo — Mon, 11 Aug 2025 02:46:32 +0000

A full Still.js build from raw HTML to deployment — with zero dependencies.

A few days ago, I was asked about migrating a project to Still.js, this article is accompanied by a video demonstrating it.

Because it’s built in Vanilla JavaScript, Still.js combines perfectly with a template that is based with pure/raw HTML, CSS and JavaScript, even if some library (e.g. jQuery, Bootstrap) was used, Still.js helps you to ease separate things into components, as showcased in this video.

What will be covered:

Migrating a Vanilla web template to Still.js
Back down the template into components conveniently
Load template’s JavaScript code properly according to Still.js architecture
Deploy to the cloud

Key Considerations:

When using templates with a lot animations, or that depends on different javaScript library to load, it’s important to deeply understand it (the template) so to orchestrate each script dependency just the same way it happens with raw HTML, CSS and JavaScript.

Minimalist third party Script dependency approach:

Now a days a lot of features like animation and more (e.g. parallax, singlePageNav, dialog, IntersectionObserver - Lazy animation) are browser native, hence, this would impact a lot in the choosing on what/when to use libraries especially when it comes to animation which some web pages are depending a lot.

Vanilla JavaScript is one of the core philosophy of Still.js, hence you can use everything as natural as possible from Web Semantic to straight DOM manipulation.

We’ll use this template, and we’ll be deploying our page to Render which will provide us with a custom domain. Follow the final result in the bellow short video:

In summary, on the coding and structure side of things the steps will be as follow:

the HTML code will be moved to the Still.js template/template file (.html)
Run template JavaScript animation in the stAfterInit hook, ensuring it executes after component load
Convert sections into autonomous components

Conclusion

Still.js helps turn vanilla templates into fast, modular, and lightweight sites with zero dependencies, giving you full control using pure JavaScript. Proper code organization is key to avoid issues like bloating and conflicts, and a vanilla-first approach is recommended, external libraries should only be used when necessary.

What’s Next?

Don't forget to follow the hands-on video till the end so we can make the deploy.

Expand Your Still.js Skills

Explore advanced Still.js features like state management, routing, or integrating APIs.
Try building a small SPA or dashboard using Still.js components capabilities.

Contribute to Still.js

Still.js is open-source, consider contributing or helping improve documentation.
Join the discord channel to get fast updates and follow the discussions

Ask more if needed

Share any topic you want to see cover so content (e.g. video, article) can be produced.

Se ya in the next one 👊🏽

Developing your first AI Agent for a Task Organizer with Still.js and Groq Infrastructure

Nakassony Bernardo — Mon, 21 Jul 2025 00:14:55 +0000

AI is now widely used for solving various problems, especially in the tech industry and among software developers. This article explores a specific use case of AI, focusing on certain key aspects while keeping the end-user in mind.

In summary, the task organizer is a software tool designed to help users manage tasks over various timeframes. While powerful Project/Task Management solutions like Motion and ClickUp exist, here we’ll demonstrate the capabilities of Still.js by discussing and building a small PoC covering a specific and tiny aspect.

AI Agent vs Agentic AI

According to google AI Overview "AI agents are specialized tools designed for specific, well-defined tasks, while Agentic AI represents a broader concept of autonomous, goal-driven systems that can adapt to changing situations, and coordinate actions with minimal human oversight"

From Generative AI to Generative UI

This concept involves generating UI dynamically based on user prompt. Different prompts produce different UI components. In our case, we’ll handle it using a client-side approach.

How our Agent will it work essentially?

The user will write a text with the tasks he'll do, specifying what, how and when

Content is submitted to the Agent/LLM, which generates task(s)

UI parses LLM response and decides, how/what predefined component to render/present

User can then ask the agent to mark tasks as completed.

Different points of the design systems are addressed in here, for the implementation there is a “hands-on youtube video” where a tiny implementation is built from scratch. Bellow is the design system depicting an overview of the solution.

We’ll consider essentially 3 main parts, the AI provider, a custom Backend API, and the UI which we describe as follow:

AI Provider supplies intelligent capabilities

Backend provides a robust and secure integration with the AI, also serves the Frontend

Frontend handles user input and displays the AI's results.

In this use case, Still.js features like runtime form generation and centralized form validation are leveraged to manage task completion. The structure includes three components:

Home (main component),

TaskDay (group of tasks),

Task (individual tasks). Tasks report back to the Home component as form, enabling them to be marked as completed.

Groq infrastructure is what we'll use for LLM, however other AI providers like Google Gemini, ChatGPT, Copilot, LLaMa, or even offline/on-prem options like Ollama could also be used.

Prompts are sent from the Still.js enabled UI to the AI engine via chat, mainly as text, but it could support voice or audio.

In production, long-term memory for LLMs or agents often requires connecting to external sources like vector databases, highlighting the need for a strong backend. Our agent will have a short-term memory which will be handle as the bellow design:

Bellow is an overview of our agent final result:

Tool use and workflow management are key in Agentic AI, enabling both agency (thinking) and predictability (acting). For some tasks, a robust backend better supports these capabilities. The agent we'll build has moderate predictability.

In the demo, we’re connecting the UI straight to the AI engine for the sake of the size of the hands-on video tutorial, however this is also a valid scenario when using ephemeral API token.

Are you still here? Less talking, more doing, click here and follow the tutorial to build your first AI Agent.

See you there 👊🏽

Rethinking Microfrontend Architecture combining Still.js with React (or other Framewok) - The architecture serie

Nakassony Bernardo — Wed, 18 Jun 2025 21:52:28 +0000

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?

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...

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 animated image):

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.

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.

Conclusion

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! 👊🏽

Still.js - A way to leverage Vanilla JavaScript for Complex and Enterprise Level Web Development

Nakassony Bernardo — Thu, 05 Jun 2025 23:06:53 +0000

When it comes to complex web application development on the frontend, we often encounter the need to implement features using vanilla JavaScript—whether it’s for direct DOM manipulation or integrating a specific jQuery plugin. Sometimes, a from-scratch implementation using plain HTML, CSS, and vanilla JavaScript is the best (or only) choice.

What is Still.js

Still.js is a modern framework that offers the same capabilities as Angular, React, and Vue—without abandoning vanilla JavaScript.

Because of its pure JS approach, Still.js:

Does not require preprocessing
Does not depend on bundlers like Webpack or Vite
Is ideal for teams and developers who prefer direct, no-compromise access to native web technologies.

Check it up:

Visit stilljs.dev or the github page
See youtube playlist
Join and discuss on Discord channel

Suitable for complex and enterprise applications

Enterprise-grade web applications need more than just rich UI features. They require: modularization, user permission management, component routing, validation, separation of concern, communication management, Micro-frontend architecture (e.g. Frontend embedding and interaction), and more.

Still.js supports all of this features natively without the burden of a bundler increasing build time and potential complexity or even tooling overhead.

Some code samples

📌 Note: Those will only work within a Still.js project with the correct setup, which is thoroughly explained in the official documentation.

Basic component:
Bellow is a simple component implementing a counter, inspite the template is placed inside the class, it can be moved to a .html file which is appropriate in complex apps.

export class CounterComponent extends ViewComponent {

    isPublic = true;
    count = 0;

    template = `
    <div>
        <p>My counter state is @count</p>
        <button (click)="increment()">Increment (@count)</button>
    </div>
    `;

    increment() {
        this.count = this.count.value + 1;
    }
}

Basic User authorization management
In the bellow implementation we're stating that some components won't be accessible by the user, this can be done with proper business logic according to the user role checking.

import { StillAppMixin } from "./@still/component/super/AppMixin.js";
import { Components } from "./@still/setup/components.js";
import { AppTemplate } from "./app-template.js";
import { CheckingAccount } from "./app/components/BankAccount/CheckingAccount.js";
import { NewAccountForm } from "./app/components/BankAccount/NewAccountForm.js";
import { SavingAccount } from "./app/components/BankAccount/SavingAccount.js";

export class StillAppSetup extends StillAppMixin(Components) {

    constructor() {
        super();
        //Bellow the entry point component is being set
        this.setHomeComponent(NewAccountForm);
        const blackListComponents = [SavingAccount, CheckingAccount];
        //Make components black-listed by passing it to setBlackList App configuration
        this.setBlackList(blackListComponents);
    }

    async init() {
        return await AppTemplate.newApp();
    }

}

Basic Form validation
Still.js provides built-in validators, but custom ones can be implemented effortlessly.

import { ViewComponent } from "../../../@still/component/super/ViewComponent.js";

export class BasicForm extends ViewComponent {

    isPublic = true;
    firstName = '';
    shoeSize;

    template = `
    <div>
        <form>
            <div class="form-group">
                <label>Shoe Size</label>
                <input 
                    (value)="shoeSize" 
                    (validator)="number" 
                    (validator-warn)="Invalid shoe size, number is required"
                    placeholder="Enter valid shoe size"
                >
            </div>
        </form>
    </div>
    `;

}

Global State management
A service serves for both Global reactive storage and data flow (e.g. HTTP requests) implementations. Services path can be set in the application level, and we can overriden for specific service with @Path annotation.

import { ViewComponent } from "../../../@still/component/super/ViewComponent.js";
import { CustomersService } from "../../service/api/CustomersService.js";

export class BiddingDisplay extends ViewComponent {

    isPublic = true;

    /** Service declaration, will get injected automatically due to Inject anottation
     *  from the specified Path path due to the annotation
     * @Inject
     * @Path service/api/
     * @type { CustomersService } */
    custService;

    template = `<div></div>`;

    /** Component Hook which takes place when it's completly render and startder */
    stAfterInit() {

        this.custService.customerList.onChange((newValue) => { 
            console.log('Ths customerList store got updated with: ', newValue);
        });

    }

}

Hurry up, get yourself started with Still.js

Still.js is available through NPM on @stilljs/cli. Watch the Youtube ▶️ playlist and bear for more coming ones.

Watch this Tudo App tutorial on Youtube ▶️, clone or download the provided GitHub Todo app project and run locally. It demonstrates key concepts like component communication, event and state binding, reactive updates, @Proxy, and component styling.

Connect and share your feedback on the Discord channel.