Creating Namespaces in OutSystems

When building applications in OutSystems Reactive Web or Mobile, one of challenges we as developers run into is how to manage scripts and external libraries.

If you’ve ever tried to implement utilities like Throttle or Debounce, you might have noticed how easily things get messy especially when scripts live in the global window scope.

This is where namespaces (or libraries) come in handy. By organizing your code into namespaces, you can:

(1) Keep your scripts structured and organized.

(2) Avoid polluting the window global scope; and

(3) Store instances or objects in local variables tied to your module/page lifecycle (instead of relying on globals that may persist incorrectly).

Let’s walk through a practical example with Throttle.

Why is global state a problem in OutSystems Reactive?

Reactive apps in OutSystems work differently from traditional web pages.
Since pages aren’t always fully reloaded, the lifecycle events (OnInitialize, OnReady, OnDestroy, etc.) don’t behave exactly the same as a normal browser reload.

When you attach something like a debounce or throttle function directly to the global window object, a few issues can creep in:

(1) Functions linger longer than intended.
The same global instance may stay in memory even after you navigate away, leading to duplicated listeners or stale data.

(2) Conflicts between multiple instances.
Navigating between screens can accidentally reuse or overwrite existing globals.

(3) Hard-to-debug lifecycle behaviors.
Since Reactive apps reuse the same runtime, global functions may still fire even when the screen they belong to no longer exists.

For example, if you create a window.myThrottle, navigating between screens won’t necessarily reset it. This causes headaches when the function is bound to UI events that should reset cleanly.