Front End Applications

robos:FrontEndApp SDLC Archetype

Architect, scaffold, and verify modern single-page (SPA) and server-side rendered (SSR) web applications in RobOS aligned with Schema.org schema:WebApplication.

Table of contents

  1. Overview
  2. Supported Frameworks & Tooling
  3. Schema & Properties
    1. SHACL Constraints (FrontEndAppShape)
  4. Scaffolding via RobOS App Wizard
  5. Next Steps

Overview

In the RobOS Knowledge Graph, Front End Applications represent browser-based web applications that deliver rich interactive user interfaces for end users, internal operators, and customer portals.

Following open linked-data standards, Front End Applications are co-typed with:

  • robos:FrontEndApp: RobOS SDLC core archetype namespace (https://robos.dev/ns/sdlc#).
  • schema:WebApplication: Schema.org WebApplication, declaring browser requirements and web application properties.
  • oslc_am:Resource: OASIS Open Services for Lifecycle Collaboration Architecture Management resource.
  • c4:Container: C4 Model container representing an executable frontend deliverable.

Supported Frameworks & Tooling

RobOS provides automated heuristic stack detection and scaffolding for modern frontend frameworks:

  • React 18 / 19 with Vite or Next.js 14 / 15 (TypeScript)
  • Vue 3 with Vite and Pinia
  • SvelteKit with TypeScript
  • Angular 18 with standalone components

Schema & Properties

A Front End Application node in the Modular KGraph Packages conforms to urn:robos:shape:FrontEndAppShape:

{
  "@id": "urn:robos:frontend-app:petstore-web",
  "@type": [
    "robos:FrontEndApp",
    "schema:WebApplication",
    "oslc_am:Resource",
    "c4:Container"
  ],
  "dcterms:title": "Petstore Web Portal",
  "dcterms:description": "Modern single-page frontend web application for Petstore customer orders.",
  "robos:repository": "github.com/acme-org/petstore-web",
  "robos:technology": "React 18 / Vite / TypeScript",
  "robos:frontendFramework": "React",
  "robos:buildTool": "Vite",
  "robos:devServerPort": 3000,
  "schema:browserRequirements": "Requires HTML5 and modern evergreen browser with JavaScript enabled.",
  "robos:ownerTeam": "urn:robos:team:order-processing",
  "robos:hasProject": "urn:robos:project:acme-petshop"
}

SHACL Constraints (FrontEndAppShape)

  • dcterms:title: Application display title (minCount: 1)
  • robos:repository: Canonical Git repository URL (minCount: 1)
  • robos:technology: Runtime technology stack (minCount: 1)
  • robos:frontendFramework: UI framework (React, Vue, Next.js, Angular, Svelte) (minCount: 1)

Scaffolding via RobOS App Wizard

To scaffold a new Front End Application:

  1. Open the RobOS App Wizard (packages/app-wizard).
  2. Select the Front End Application archetype (🌐).
  3. Specify package slug, target framework, and dev server port.
  4. Click Generate Scaffolding to produce dev-setup.sh, catalog-info.yaml, and Vite configuration.

Next Steps