QuickRef.ME
GitHub Repo stars

InfrontJS

A quick reference cheat sheet to getting started with InfrontJS — creating an App, adding States, rendering Views, and basic routing.

#Getting Started

#Install (CDN)

<!-- UMD build (global IF) -->
<script src="https://unpkg.com/infrontjs/dist/IF.js"></script>

Use this for the fastest “drop in and run” setup.

#Install (ESM)

<script type="module">
  import * as IF from "https://unpkg.com/infrontjs@latest/dist/infrontjs.esm.js";
</script>

Use this if you want modern ES modules in the browser.

#Install (npm)

npm install infrontjs

// bundler setup
import * as IF from "infrontjs";

#Hello InfrontJS (minimal)

<div id="app"></div>

<script type="module">
  import * as IF from "https://unpkg.com/infrontjs@latest/dist/infrontjs.esm.js";

  // Create app with a container
  const app = new IF.App(document.querySelector("#app"));

  // Start lifecycle (router/state/view init, initial state, ...)
  app.run();
</script>

Creates an App instance and starts it via app.run().

import * as IF from "https://unpkg.com/infrontjs@latest/dist/infrontjs.esm.js";

const app = new IF.App(document.querySelector("#app"), {
  router: { mode: "hash" } // "url" (pushState) or "hash"
});

app.run();

Use hash mode if you don’t control server rewrites (GitHub Pages, many CDNs, etc.).

#Core Concepts

#App

The logical “core unit” of an InfrontJS application. Owns router, stateManager, view, i18n, etc.

const app = new IF.App(containerEl, {
  app: {
    id: "my-app",
    title: "My App",
    sayHello: true
  },
  router: {
    isEnabled: true,
    mode: "url", // or "hash"
    basePath: null
  },
  l18n: {
    defaultLanguage: "en"
  }
});

#State

A State represents a route-driven unit of logic / lifecycle. Typically: fetch data → render a view → bind events → cleanup on exit.

class MyState extends IF.State {
  static ROUTE = "my-state";

  async enter() {
    console.log("Hello from MyState");
  }
}

#View

Template rendering uses EJS templates and provides localization helpers.

app.view.render(app.container, `
  <h1>Welcome <%= username %></h1>
  <p><%= _lcs("greeting") %></p>
`, { username: "John" });

Precompile templates for reuse:

const tpl = app.view.compile(`<h1><%= title %></h1>`);
const html = tpl({ title: "Page 1" });

this.app.view.setWindowTitle("My App - Dashboard");

#State Manager (register states)

class GreetingState extends IF.State {
  static ROUTE = "";

  async enter() {
    this.app.view.render(this.app.container, "<h1>Hello InfrontJS World</h1>");
  }
}

const app = new IF.App(document.querySelector("#app"), {
  router: { mode: "hash" }
});

app.stateManager.add(GreetingState);
app.run();

#Recipes

#Simple page state (render + bind)

class CounterState extends IF.State {
  static ROUTE = "counter";

  async enter() {
    this.count = 0;

    this.app.view.render(this.app.container, `
      <div>
        <h1>Counter</h1>
        <p>Value: <span id="v"><%= count %></span></p>
        <button id="inc">Increment</button>
      </div>
    `, { count: this.count });

    const v = this.app.container.querySelector("#v");
    const btn = this.app.container.querySelector("#inc");

    this.addEventListener(btn, "click", () => {
      this.count++;
      v.textContent = String(this.count);
    });
  }
}

The State base class offers helpers like addEventListener(...) to track cleanup.

#Routing quick notes

Setting Description
router.mode = "url" Uses history.pushState URLs (needs server rewrite)
router.mode = "hash" Uses #/path URLs (works on static hosting)
router.isEnabled = false Disable routing entirely

#State lifecycle (common hooks)

Method When it’s called
canEnter() Before entering a state
enter() Main entry hook
canExit() Before leaving state
exit() Cleanup hook

#Cleanup (events, timers, dispose)

class LiveState extends IF.State {
  ROUTE = "live";

  async onEnter() {
    this.addEventListener(window, "resize", () => this.render());
    this.setInterval(() => this.tick(), 1000);
    this.setTimeout(() => console.log("ready"), 200);
    this.render();
  }

  render() {
    this.app.view.render(this.app.container, "<h1>Live</h1>");
  }
}

#Quick API Reference

#App constructor

Code Description
new IF.App(container?, config?) Create app
IF.App.get(uid?) Get app instance
app.run(route?) Start lifecycle
await app.destroy() Dispose app

#View

Code Description
app.view.render(el, tpl, data?) Render template
app.view.compile(tpl) Compile template
  • Homepage: www.infrontjs.com
  • Guides: guides.infrontjs.com
  • API Docs: apidocs.infrontjs.com
  • Examples: examples.infrontjs.com
  • GitHub: github.com/infrontjs/infrontjs