Introduction

JOPS (the package is called jops-core) is a lightweight single-page-application framework for developers who think in classes and native-mobile patterns. It is built on native ES modules and runs directly in the browser.

No Webpack. No Babel. No compiler. Just <script type="module"> and a browser.

Why JOPS

Modern front-end stacks ask you to adopt a build toolchain before you write your first screen. JOPS drops that toolchain and keeps the part that makes large apps manageable: a structured, class-based architecture.

No bundler

Your files are plain ES modules loaded through an import map. Edit a file, reload the page, and you see the change. What you write is what you ship.

Object-oriented views

Every screen and component is a class that extends View. Inheritance, composition and encapsulation work the way they do in Java, C#, Kotlin or Swift.

Android-style lifecycle

The framework calls onLayout(), onResume(), onPause() and onBackPressed() at the moments you expect from Android development.

HTML layouts

Layouts are plain HTML files or layout template strings. Views are nested declaratively with tags like <MyView jops src="…">, with no element registration.

A short taste of what a view looks like:

src/Greeting.js

import { View, layout } from "jops-core";

export default class Greeting extends View {
  constructor() {
    super();
    this.layout = layout`
      <section>
        <h2 id="title"></h2>
        <button jops-event-bind onclick="onHello">Say hello</button>
      </section>
    `;
    this.inflate();
  }

  onLayout() {
    // the layout is in the DOM
    this.get("title").set("Welcome to JOPS");
  }

  onHello() {
    this.get("title").set("Hello!");
  }
}

The layout tag escapes every value you interpolate, so data from users or the network is safe by default. You opt out explicitly with raw() for trusted HTML.

Who it is for

JOPS is made for teams who want a structured front end without the npm/Webpack/Babel overhead:

• Developers coming from Android, Java or C# who want the view and lifecycle model they already know.
• Internal tools, dashboards and admin panels that should run from a folder of static files, with no build chain to maintain.
• Hybrid mobile apps and embedded WebViews (Cordova, Ionic, Capacitor), including Android back-button handling.
• Desktop apps with an Electron shell and a JOPS UI on macOS, Windows and Linux.
• Existing sites that need an app inside a page: Next.js, WordPress, or any HTML page.
• AI-assisted development: plain classes, plain HTML and no build step make a code base that is easy to read and generate.

Where JOPS fits

How JOPS compares to other frameworks that care about simplicity or structure:

	No bundler	OOP classes	Declarative view nesting	No element registration
JOPS	✅	✅	✅	✅
Lit	✅	✅	⚠️ Web Components only	❌
Stimulus	✅	✅	❌	✅
Alpine.js	✅	❌	❌	✅
Angular	❌	✅	✅	✅
Svelte	❌ (compiler)	✅	✅	✅

JOPS and React / Next.js

JOPS is not a replacement for React. React and Next.js keep their strengths: Server Components, data loading, routing and a large ecosystem. Modern React is built around function components and hooks, which is a proven model of its own.

JOPS offers a different choice for teams that think in classes, and the two can live in the same code base. A JOPS SPA can run inside a Next.js page, next to your React pages, with Next.js as its backend: the JOPS app calls Next.js Route Handlers with fetch(). Next.js owns the path (/quotes), JOPS owns the hash (/quotes#details). The jops-core/nextjs package entry provides the JopsApp React component that connects them.

Tip

If your team already runs Next.js, read Next.js to see how a JOPS SPA is hosted inside a Next.js page.

What you get

The jops-core package contains:

• View, the base class for every screen and component, with get() for element access and addSubView() for composition.
• layout and raw(), the template tag for escaped HTML layouts.
• Router, with flat hash routes declared in HTML, stacked views with navigate(), animations and a screens mode.
• Store, a singleton for shared data, and EventBus, a pub/sub channel.
• mount() and unmount() for running an app inside another page.
• Thread, a Web Worker base class.
• A CLI (npx jops-core) that scaffolds projects from templates, updates the library and builds for production.
• TypeScript declarations for editor autocomplete.

Next steps

InstallationAdd JOPS from the CDN or install it with npm.

Quick startCreate your first app from a template in a minute.

ViewsLearn the building block of every JOPS app.

ExamplesSee the Hello World demo and the project templates.