Path Framework

0.8.0-beta.8 verified Thu Apr 23 auth: no javascript

Path Framework is an application framework and rendering engine developed at Zurich University of Applied Sciences (ZHAW). It enables the creation of applications based on a technology-independent GUI model defined in JSON format, allowing the underlying rendering engine (e.g., for web, iOS, Android) to be swapped out as needed. Currently in beta version 0.8.0-beta.8, its release cadence is frequent, reflecting ongoing development towards a stable 1.0 release. Key differentiators include an emphasis on extremely rapid application prototyping and development, GUI-based requirements engineering, and a focus on business logic programming rather than direct GUI programming. It supports using either mock data or integrating with any backend REST service, abstracting away UI implementation details. This approach streamlines development by separating the application's structure and behavior from its visual presentation.

Common errors

error Module not found: Can't resolve 'path-framework' ↓

cause The 'path-framework' package is not installed or incorrectly referenced in your project's `package.json`.

fix

Run npm install path-framework or yarn add path-framework in your project directory.

error TypeError: PathApplication is not a constructor ↓

cause Attempting to instantiate `PathApplication` using an incorrect import method (e.g., `require('path-framework')` without destructuring) or when using a default export incorrectly.

fix

Ensure you are using named imports for PathApplication: import { PathApplication } from 'path-framework';.

error Cannot use import statement outside a module ↓

cause You are using ES Module `import` syntax in a CommonJS (`.js`) file that is not configured as an ES module, or in an environment that doesn't support ESM.

fix

Change your file extension to .mjs or ensure your package.json includes "type": "module". Alternatively, configure your build process (e.g., Webpack, Rollup) to transpile ESM to CJS, or use require syntax if you must stick to CommonJS: const { PathApplication } = require('path-framework');

error Property 'application' is missing in type '{}' but required in type 'PathApplicationModel'. ↓

cause Attempting to pass an empty or malformed object to `new PathApplication()`, which expects a structured `PathApplicationModel`.

fix

Provide a complete PathApplicationModel object with at least the top-level application key, as defined by the framework's schema.

Warnings

breaking As 'path-framework' is currently in a beta release (0.8.0-beta.8), breaking changes may occur frequently between minor or patch versions. Users should review the changelog carefully when upgrading. ↓

fix Consult the project's CHANGELOG.md and GitHub releases for specific migration steps when updating to newer beta versions.

gotcha Path Framework provides a technology-independent GUI model and core application logic. It does *not* include a default visual rendering engine out of the box. To display your application in a browser or on a specific platform, you need to integrate a separate rendering package (e.g., 'path-framework-web' for web applications). ↓

fix Install and configure the appropriate rendering engine package for your target platform (e.g., `npm install path-framework-web` for web-based projects) and integrate it with your `PathApplication` instance.

gotcha The framework relies heavily on JSON-based GUI models. While flexible, incorrect JSON structure or missing required properties in your `PathApplicationModel` will lead to runtime errors or unexpected behavior during application initialization. ↓

fix Ensure your GUI models strictly adhere to the `PathApplicationModel` TypeScript interface, leveraging IDE features for autocompletion and type checking when defining models.

Install

npm install path-framework

yarn add path-framework

pnpm add path-framework

Imports

PathApplication
wrong
```
const PathApplication = require('path-framework').PathApplication;
```
correct
```
import { PathApplication } from 'path-framework';
```
Path Framework primarily uses ES Modules. While CommonJS is supported, ESM is the recommended modern approach, especially for browser contexts.
PathApplicationModel
```
import { PathApplicationModel } from 'path-framework';
```
This type definition is crucial for type-checking your JSON GUI models and ensuring correct structure within TypeScript projects.
PathBuilder
```
import { PathBuilder } from 'path-framework';
```
For more complex or programmatic model construction, the PathBuilder can be used, though direct JSON models are common.

Quickstart

This quickstart demonstrates how to initialize a Path Application using a basic 'HelloWorld' GUI model, verifying its successful setup and access to model elements.

import { PathApplication, PathApplicationModel } from 'path-framework';

const helloWorldModel: PathApplicationModel = {
    application: {
        title: "Path Demo",
        formList: [
            {
                id: "HelloWorldForm",
                title: "HelloWorld",
                formFieldList: [
                    {
                        id: "name",
                        type: "text",
                        name: "Project",
                        width: 2,
                        required: true
                    },
                    {
                        type: "deleteButton",
                        name: "Delete"
                    },
                    {
                        type: "cancelButton",
                        name: "Cancel"
                    },
                    {
                        type: "okButton",
                        name: "Ok"
                    }
                ]
            }
        ],
        pageList: [
            {
                id: "mainmenu",
                name: "MainMenu",
                elementList: [
                    {
                        type: "button",
                        name: "HelloWorld",
                        icon: "fa-fast-forward",
                        color: "alizarin",
                        form: {
                            form: "HelloWorldForm"
                        }
                    }
                ]
            }
        ]
    }
};

try {
    const app = new PathApplication(helloWorldModel);
    console.log(`Path Application "${app.getApplicationTitle()}" initialized successfully.`);
    console.log(`Forms available: ${app.getFormList().map(f => f.getId()).join(', ')}`);
    console.log(`Pages available: ${app.getPageList().map(p => p.getId()).join(', ')}`);
    // To render this application visually, you would typically pass 'app' to a rendering engine
    // like 'path-framework-web' in a browser environment.
    // Example: new WebPathRenderer(app).render(document.body);
} catch (error) {
    console.error("Failed to initialize Path Application:", error);
}