Katharos

1.0.1267 verified Sat May 09 auth: no javascript

Katharos is a framework for building enterprise user interfaces, focusing on the model and view layers. Current stable version is 1.0.1267. It supports ES5-compliant browsers (IE11 and below not supported). The framework has an ecosystem of supporting libraries, including katharos-router for web application routing. It aims to scale between an integration and a full framework depending on business needs, differentiating by its focus on enterprise complexity management and modular architecture.

Common errors

error Cannot find module 'katharos' ↓

cause Package not installed or import path incorrect.

fix

Run 'npm install katharos' and ensure you use the correct import statement: 'import { Katharos } from 'katharos'

error TypeError: Katharos is not a constructor ↓

cause Using default import instead of named import.

fix

Use 'import { Katharos } from 'katharos' (curly braces) instead of 'import Katharos from 'katharos'

error Cannot read property 'render' of undefined ↓

cause View instance not properly initialized with a model.

fix

Ensure you pass a model instance: 'new UserView({ model: userModel })'

Warnings

deprecated The 'createModel' function is deprecated in favor of class-based Model. ↓

fix Use 'class MyModel extends Model' instead of 'createModel()'.

gotcha Model defaults are mutable; changes to defaults object affect all instances. ↓

fix Return a new object from the defaults getter each time.

breaking Version 1.0 removed support for IE11 and below. ↓

fix Ensure your target environment is ES5-compliant (not IE11).

Install

npm install katharos

yarn add katharos

pnpm add katharos

Imports

Katharos

wrong

const katharos = require('katharos')

correct

import { Katharos } from 'katharos'

ESM-only; requires bundler or ES module support.

Model

wrong

import Model from 'katharos'

correct

import { Model } from 'katharos'

Named export; not a default export.

View

wrong

import { view } from 'katharos'

correct

import { View } from 'katharos'

Case-sensitive named export.

Quickstart

Creates a Katharos app with a Model and View, then renders the view into the DOM.

import { Katharos, Model, View } from 'katharos';

const app = new Katharos();

class UserModel extends Model {
  get defaults() {
    return { name: '', email: '' };
  }
}

class UserView extends View {
  render() {
    return `<div>${this.model.name} (${this.model.email})</div>`;
  }
}

const userModel = new UserModel({ name: 'Jane', email: 'jane@example.com' });
const userView = new UserView({ model: userModel });

app.render(userView, document.getElementById('app'));