DEV Community

💻 Arpad Kish 💻
💻 Arpad Kish 💻

Posted on

Triphop (2015): An Exploration of a Real-Time TODO Application

#frontend #node

Released in 2015 by developer Árpád Kiss (@rpi1337), Triphop is an example TODO application that serves as a practical demonstration of real-time web development practices of its time. By combining a robust frontend framework with an event-driven backend, Triphop showcases how developers built reactive, single-page applications (SPAs) in the mid-2010s.

The Technology Stack

Triphop utilizes a JavaScript-heavy stack, relying on popular tools that dominated the landscape during its release:

  • Frontend: AngularJS (v1.3.14) is used to handle data binding, dependency injection, and application logic on the client side. The UI is styled using Bootstrap (v3.3.1).
  • Backend: Node.js with the Express framework powers the backend API.
  • Real-Time Communication: Socket.IO bridges the gap between the server and the client, enabling instant updates across all connected users.
  • Storage: Instead of a traditional database like MongoDB, Triphop implements a custom, file-based JSON store (store/data.json) to persist data.

Backend Architecture: A Custom MVC Approach

The backend of Triphop is structured around a Model-View-Controller (MVC) pattern, adapted for an API-first design.

Models and Data Store
The application manages two primary entities: List and Todo.

  • A List contains an id and a title.
  • A Todo contains an id, listId (to associate it with a specific list), a title, and a description.

The custom Store module (store/index.js) reads from and writes to data.json. It provides methods like findAll, find, add, remove, and commit to interact with the data in memory and synchronize it with the file system.

Controllers and Routing
The api/index.js file acts as the central router, mapping HTTP methods and endpoints to specific controller actions. For example:

  • GET /api/lists routes to ListsController.getLists.
  • POST /api/lists/:id routes to TodosController.addTodo.

The controllers (lists.js and todos.js) interact directly with the Store to manipulate data and immediately use the SocketService to broadcast these changes to clients.

Frontend Architecture: AngularJS in Action

The client-side code (app/js/main.js) is a classic example of an AngularJS application, separated into controllers and services.

Services

  • SocketService: Initializes the Socket.IO connection and provides a subscribe method to listen for server events.
  • ListsService & TodosService: These services handle the core business logic. They perform HTTP requests to the Express API (e.g., fetching, adding, updating, and deleting items) and listen for real-time WebSocket events to update their internal data arrays dynamically.

Controllers
The UI is divided into logical views managed by controllers:

  • MainController: Handles the navigation state (switching between viewing all lists and viewing the tasks within a specific list).
  • HeaderController: Manages the creation of new lists via the navigation bar.
  • ListController & TodosController: Bind the data from the services to the HTML views and provide functions to the UI for modifying and deleting items.

The Power of Real-Time Synchronization

The standout feature of Triphop is its real-time reactivity. When a user performs an action—such as adding a new TODO item—the following flow occurs:

  1. The AngularJS TodosController calls TodosService.add(), which sends a POST request to the server.
  2. The Express TodosController receives the request, updates the Store, and calls SocketService.publish('new-todo', todo.toJSON()).
  3. The backend SocketService broadcasts this event to all connected WebSocket clients.
  4. On the frontend, the TodosService, which is subscribed to the new-todo event, receives the payload, appends the new item to its data array, and flushes the update to the UI.

This ensures that if multiple users have the application open, any list or task created, modified, or deleted by one user is instantly reflected on everyone else's screen without requiring a page refresh.

Conclusion

Triphop (2015) is a clean, lightweight example of a real-time SPA. By combining AngularJS, Express, and Socket.IO, it effectively demonstrates how to build responsive applications where server state and client state are kept tightly synchronized. While modern frameworks like React or Vue, and databases like PostgreSQL or Firebase, are more common today, Triphop provides a great look into the foundational concepts of real-time web architecture.

https://github.com/arpad1337/triphop

Top comments (0)