Sage 11 JS architecture — How are you organising your JavaScript?

sage
1

Hey everyone :waving_hand:

I’m coming from Sage 9 and have recently started working with Sage 11.2.1. I’m trying to get my head around the “Sage 11 way” of structuring JavaScript.

In Sage 9, I was used to something like:

resources/
└── scripts/
├── main.js
└── routes/
├── common.js
├── home.js
└── about.js

The router would use the WordPress body classes to decide which route/code to run.

From what I understand, Sage 11 doesn’t really work this way anymore. Instead, you have the Vite entrypoint (app.js) and can use ES modules/dynamic imports.

So I’m wondering how people are actually structuring this in their projects.

For example, my project needs GSAP, Lenis, swiper and Barba.js (for now)

Would you have something like:

resources/
└── scripts/
    ├── app.js
    ├── global/
    │   ├── gsap.js
    │   ├── lenis.js
    │   └── barba.js
    ├── components/
    │   ├── navbar.js
    │   └── marquee.js
    └── pages/
        ├── home.js
        └── works.js

And then in app.js:

import './global/gsap';
import './global/lenis';
import './global/barba';
import './components/navbar';

Then load page-specific code dynamically:

if (document.body.classList.contains('home')) {
import('./pages/home.js').then(({ initHome }) => {
initHome();
});
}

But because I’m using Barba.js, I’m not sure whether the body-class approach even makes sense anymore.

I’m particularly interested in real-world Sage 11 setups rather than just the theoretical Vite approach.

How do you structure your JS when you have:

  • global libraries like GSAP / Lenis
  • global components like navigation
  • page-specific animations
  • Barba.js page transitions
  • potentially large libraries that aren’t needed on every page

I’m mainly trying to understand how people are actually approaching JS architecture in real Sage 11 projects, especially when using GSAP/Lenis/Barba.

Also, if you have any good resources, articles, or real Sage 11 projects that demonstrate a solid JS structure, I’d really appreciate it. I’m coming from Sage 9, so I’m trying to get up to speed quickly without going down the wrong path.

Thanks! :folded_hands:

2

Howdy!

Here’s how I’m doing it in Sage 11:

const readMoreBtn = document.querySelector(".read-more-btn");

  if (readMoreBtn) {
    import("./lists/read-more.js")
      .then((module) => {
        module.default();
      })
      .catch((err) => {
        console.error(err);
      });
  }

Inside of read-more.js:

export default function initReadMore() {
// Bla bla code
}
document.addEventListener("DOMContentLoaded", initReadMore);

You don’t have to import anything at the top of the file. My app.js imports are only things used on every page. Everything else is imported as above. Works great IMO.

Here’s an edge case. Some of the cookie popup JS is only ran if no cookie is set:

import { getCookie } from "./utils/cookie-utils.js";
import { initExistingConsent } from "./common/cookie-consent.js";

document.addEventListener("DOMContentLoaded", () => {
  initExistingConsent();

  if (!getCookie("cookieChoice")) {
    import("./common/cookie-popup.js")
      .then((module) => {
        module.default();
      })
      .catch((err) => {
        console.log(err);
      });
  }
}

As for folder structure, well.. I usually just put everything inside of an appropriate folder. One for sliders, one for ads, one “shared” folder for things shared between very different JS files.

Hope that helps you in the slightest!