TMF Examples

September 11, 2025 · View on GitHub

License: MIT

Example applications demonstrating the @tripsnek/tmf library (github • npm) - a lightweight TypeScript port of the Eclipse Modeling Framework (EMF). These examples show how to build full-stack applications using model-driven development principles.

A Quick Demo video

https://github.com/user-attachments/assets/ee35ca1a-24d5-4a43-8926-96dffecd8d0e

Quick demonstration of adding types/features to an ecore model and generating code (courtest of the TMF Ecore Editor) in a full stack reflective application, specifically the NX Angular/Node example.

Examples

angular-node-npm/

Full-stack npm workspaces monorepo with Angular frontend and Express.js backend.

  • Architecture: npm workspaces
  • Frontend: Angular 19 with TMF reflective editor
  • Backend: Express.js with auto-generated REST API

react-node-npm/

React-based implementation using the same architecture as the Angular example.

  • Architecture: npm workspaces
  • Frontend: React with TMF reflective editor
  • Backend: Express.js with auto-generated REST API

angular-node-nx/

Alternative structure using Nx workspace tooling.

  • Architecture: Nx monorepo
  • Frontend: Angular 19 with TMF reflective editor
  • Backend: Express.js with auto-generated REST API

angular-java-nx/

Hybrid polyglot implementation demonstrating TMF-EMF integration.

  • Architecture: Nx monorepo
  • Frontend: Angular 19 with TMF reflective editor
  • Backend: Spring Boot with Eclipse EMF
  • Data Model: Shared Ecore generates both TypeScript (TMF) and Java (EMF) classes

Key TMF Features

  • Code Generation from Ecore metamodel (npm run gen:datamodel in each project) or with the TMF Ecore Editor VSCode Extension
  • Factory Pattern for creating model instances
  • Containment & Inverse References with automatic bidirectional updates
  • Reflective Backend and Frontend that adapts to any metamodel - edit the .ecore file as much as you want, or replace with your own! It requires updating only a couple of code references to your generated package 'eINSTANCE'
  • JSON Serialization with TJson, and reflective cross-container reference resolution demonstrated with proxy-resolver.ts
  • Type Safety across the entire stack

Getting Started

Choose an example and follow its README for detailed setup instructions.