Modern Agenda

ROSETTA STONE

In Progress

Rosetta Stone · Multi-Technology Application
One conference agenda application rebuilt across modern technologies to understand the difference in the technologies and implementation.

This project has been pause to review angular and typescript more before proceeding to the other languages. It will be resumed shortly to create the other versions soon. The php version is not visible on github pages but you may review the code in the repo

PROJECT FOUNDATION

Purpose & Goal

The reason this Rosetta Stone exists and what stays constant while the implementation technology changes.

Purpose & Goal

LEGACY REFERENCE

Original / Legacy Baseline

The application problem and corporate-style conference structure the modern implementations are comparing against.

Original conference-style agenda

The baseline is the real conference-program problem rather than a tutorial task list.

Structured corporate-style data

The shared data resembles the nested agenda output used by corporate conference systems.

Days → sessions → sections / presentations

The hierarchy preserves scheduled sessions with nested presentation-level content.

Speakers / moderators

Faculty-style people data remains part of the application model.

Locations / venues

Sessions retain location and venue information used for display and filtering.

Session types / categories

Sessions can be grouped and filtered by program type and category.

Accreditation

The model preserves accreditation as conference-program metadata.

Legacy implementation

Historical baseline: JavaScript, PHP, cURL, jQuery and related legacy frontend/server techniques.

SHARED RULES

Shared Project Contract

These rules keep the Rosetta comparison meaningful across every implementation.

Same corporate conference data

Every phase starts from the same canonical agenda dataset.

Same major agenda behaviors

Search, filtering, nested sessions, presentations and interaction remain recognizable.

Same visual design

The visible design target stays consistent so implementation differences are easier to compare.

Same expected output

Each phase is judged against the same user-facing result.

Technology changes; project problem does not

Architecture and syntax may change; the application requirement stays stable.

Technologies

Primary technologies and tooling used in the JavaScript / ECMAScript implementation.

JavaScript / modern ECMAScript

Core language for data processing, rendering and interaction.

TypeScript

Typed browser implementation that keeps the JavaScript behavior while adding compile-time models and checks.

Angular

Component-based Angular implementation using TypeScript, services and modern Angular state/template patterns.

React

Component-based React implementation focused on props, state, composition and predictable rendering.

Python / FastAPI

Backend/API implementation that models, filters and serves the same agenda output with Python.

Java / Spring Boot

Java backend implementation using classes, services and Spring's application/API architecture.

PHP

Modern PHP implementation revisiting the language used in the legacy system with contemporary structure and practices.

C# / ASP.NET Core

C# backend implementation using .NET models, dependency injection and ASP.NET Core HTTP endpoints.

PHASE 01

JavaScript / ECMAScript

Framework-free browser implementation establishing the modern JavaScript baseline.

PHASE 01

Applied in this phase

What this implementation is responsible for demonstrating.

Load the shared conference data.
Work with nested session and presentation data.
Filter and search agenda records.
Render the agenda with browser DOM APIs.
Manage expanded and collapsed session state.
Establish the framework-free baseline.

PHASE 01

Project structure

The implementation lives inside the shared Modern Agenda repository.

modern-agenda-rosetta/
├── shared/
│   ├── css/
│   │   └── agenda.css
│   └── data/
│       └── agenda.json
└── javascript/
    ├── index.html
    └── src/
        ├── main.js
        ├── data.js
        ├── render.js
        └── filters.js

PHASE 02

TypeScript

Typed browser implementation that keeps the JavaScript behavior while adding compile-time models and checks.

PHASE 02

Applied in this phase

What this implementation is responsible for demonstrating.

Model sessions, presentations, speakers, moderators, locations and metadata with types or interfaces.
Type the shared conference response instead of treating nested data as unstructured objects.
Use typed functions for filtering, searching and rendering.
Handle optional and nullable corporate-data fields safely.
Compile TypeScript to browser JavaScript.
Compare the typed implementation directly with Phase 01.

PHASE 02

Project structure

The implementation lives inside the shared Modern Agenda repository.

modern-agenda-rosetta/
├── shared/
│   ├── css/agenda.css
│   └── data/agenda.json
└── typescript/
    ├── index.html
    ├── package.json
    ├── tsconfig.json
    └── src/
        ├── main.ts
        ├── types.ts
        ├── data.ts
        ├── render.ts
        └── filters.ts

PHASE 03

Angular

Component-based Angular implementation using TypeScript, services and modern Angular state/template patterns.

PHASE 03

Applied in this phase

What this implementation is responsible for demonstrating.

Break the agenda into components such as controls, session lists, sessions and presentations.
Move data access out of the view into an Angular service.
Represent selected filters and expanded-session state reactively.
Render nested corporate conference records through Angular templates.
Preserve the same search, filtering and agenda behavior.
Compare Angular architecture with the explicit browser code from Phases 01 and 02.

PHASE 03

Project structure

The implementation lives inside the shared Modern Agenda repository.

modern-agenda-rosetta/
├── shared/
│   ├── css/agenda.css
│   └── data/agenda.json
└── angular/
    ├── angular.json
    ├── package.json
    └── src/
        └── app/
            ├── agenda/
            ├── session/
            ├── presentation/
            ├── agenda.service.ts
            └── app.component.ts

PHASE 04

React

Component-based React implementation focused on props, state, composition and predictable rendering.

PHASE 04

Applied in this phase

What this implementation is responsible for demonstrating.

Break the same agenda into reusable React components.
Pass session, presentation and faculty data through typed props.
Manage filters, search and expanded-session state with hooks.
Derive visible agenda results from state rather than manipulating the DOM directly.
Load the same shared JSON and render the same expected output.
Compare React composition with Angular's framework structure.

PHASE 04

Project structure

The implementation lives inside the shared Modern Agenda repository.

modern-agenda-rosetta/
├── shared/
│   ├── css/agenda.css
│   └── data/agenda.json
└── react/
    ├── package.json
    ├── vite.config.ts
    └── src/
        ├── App.tsx
        ├── components/
        │   ├── Agenda.tsx
        │   ├── Session.tsx
        │   └── Presentation.tsx
        └── types.ts

PHASE 05

Python / FastAPI

Backend/API implementation that models, filters and serves the same agenda output with Python.

PHASE 05

Applied in this phase

What this implementation is responsible for demonstrating.

Represent the same nested agenda model with Python data models.
Load and validate the shared conference data.
Expose agenda and session data through API routes.
Apply search and filtering on the server where appropriate.
Return predictable JSON for the existing frontend.
Compare backend data modeling with the browser-side implementations.

PHASE 05

Project structure

The implementation lives inside the shared Modern Agenda repository.

modern-agenda-rosetta/
├── shared/
│   └── data/agenda.json
└── python-fastapi/
    ├── pyproject.toml
    └── app/
        ├── main.py
        ├── models.py
        ├── services.py
        └── routes/
            └── agenda.py

PHASE 06

Java / Spring Boot

Java backend implementation using classes, services and Spring's application/API architecture.

PHASE 06

Applied in this phase

What this implementation is responsible for demonstrating.

Represent the corporate agenda structure with Java classes or records.
Separate controllers, services and data models.
Load the shared conference data.
Expose sessions and agenda results through HTTP endpoints.
Apply the same filtering and lookup requirements in Java.
Compare Java's explicit object/application structure with Python and frontend implementations.

PHASE 06

Project structure

The implementation lives inside the shared Modern Agenda repository.

modern-agenda-rosetta/
├── shared/
│   └── data/agenda.json
└── java-spring/
    ├── pom.xml
    └── src/main/
        ├── java/
        │   └── agenda/
        │       ├── AgendaController.java
        │       ├── AgendaService.java
        │       └── model/
        └── resources/
            └── application.properties

PHASE 07

C# / ASP.NET Core

C# backend implementation using .NET models, dependency injection and ASP.NET Core HTTP endpoints.

PHASE 07

Applied in this phase

What this implementation is responsible for demonstrating.

Model sessions, presentations and related conference data with C# types.
Load and deserialize the shared agenda JSON.
Separate endpoint/controller behavior from agenda services.
Use dependency injection for application services.
Implement the same filtering and lookup requirements.
Compare C#/.NET conventions directly with Java/Spring and Python/FastAPI.

PHASE 07

Project structure

The implementation lives inside the shared Modern Agenda repository.

modern-agenda-rosetta/
├── shared/
│   └── data/agenda.json
└── csharp-aspnet/
    ├── ModernAgenda.csproj
    ├── Program.cs
    ├── Models/
    ├── Services/
    └── Controllers/

PHASE 08

PHP

Modern PHP implementation revisiting the language used in the legacy system with contemporary structure and practices.

PHASE 08

Applied in this phase

What this implementation is responsible for demonstrating.

Rebuild the agenda data flow with modern PHP structure.
Parse and work with the same nested corporate conference data.
Implement the same search and filtering requirements.
Separate data/request logic from rendered output more clearly than the legacy baseline.
Return JSON or render the shared interface where appropriate.
Compare modern PHP directly with the original PHP/cURL implementation.

PHASE 08

Project structure

The implementation lives inside the shared Modern Agenda repository.

modern-agenda-rosetta/
├── shared/
│   ├── css/agenda.css
│   └── data/agenda.json
└── php/
    ├── composer.json
    ├── public/
    │   └── index.php
    └── src/
        ├── AgendaService.php
        └── AgendaController.php