Technical Architecture of Worktile: SPA Frontend, Backend Services, and Real-Time Messaging

Since its launch, Worktile has attracted over 100,000 teams by offering a stable, user‑friendly collaboration platform. To meet key requirements—cross‑platform web access, native‑like SPA experience, real‑time updates, and high service stability—the system combines several architectural choices.

SPA Design

Worktile adopts a single‑page application to minimize page navigation. After evaluating Backbone.js, the team selected AngularJS for its two‑way data binding, declarative syntax, modular architecture, and dependency injection. Example code demonstrates AngularJS data binding and component templates:

<div class="entry-task-main" 
     ng-class="{1:'task-completed-style'}[task.completed]">
    <a class="entry-task-check" 
     id="task_check_{{ task.tid }}"
       wt-click="js_complete_task($event, entry, task)">
        <i ng-class="{0: 'icon-check-empty', 1: 'icon-check-sign'}[task.completed]"></i>
    </a>
    <a class="entry-task-title" href="javascript:;">{{task.name}}</a>
</div>

AngularJS also enables concise list rendering:

<div ng-repeat="task in tasks">
     <wt-task view-type="item" show-project="false" 
            class="slide-trigger"
              hide_action="true"
              ng-click="locator.openTask(task.pid, task.tid)">
     </wt-task>
</div>

Modules are defined in a clean, modular fashion:

(function () {
    'use strict';
    angular.module('wtApp', [
        'wt.project.ctrl',
        'wt.team.ctrl',
        'wt.task.ctrl',
        'wt.event.ctrl',
        'wt.post.ctrl',
        'wt.file.ctrl',
        'wt.page.ctrl',
        'wt.mail.ctrl'
    ]);
}());

Dependency injection further reduces coupling:

taskListCtrl.$inject = ['$scope', '$stateParams', 
            '$rootScope', '$popbox', 
            '$location', '$timeout', 
            'bus', 'globalDataContext', 
            'locator'];

Backend Service Design

The backend consists of several layers:

API services (Web, Mobile, Open) built on Node.js for its asynchronous, event‑driven model and language uniformity.

Cache and queue services using Redis, leveraging its pub/sub capabilities for low‑latency data propagation.

Database services based on MongoDB, chosen for high performance, easy clustering, and natural integration with Node.js.

File preview services that handle various file types; simple text files are rendered directly, while Office documents are served via Microsoft Office Web App.

Real‑Time Message Push

To provide instantaneous updates, Worktile maintains long‑lived connections between client and server. Message types include:

on_task_trash            : "on_task_trash",
on_task_complete         : "on_task_complete",
on_task_move             : "on_task_move",
on_task_update           : "on_task_update",
on_task_comment          : "on_task_comment",
on_task_badges_file      : "on_task_badges_file",
on_task_unarchived       : "on_task_unarchived",
on_task_badges_check     : "on_task_badges_check"

Three push strategies are considered: short polling, long polling, and WebSocket. Initially, Socket.IO was used, but scaling challenges led to a migration to ejabberd (an Erlang XMPP server) with BOSH for long‑polling support. The system integrates Redis for presence tracking and MongoDB for user and team data, while the web client connects via strophe.js.

Overall, Worktile exemplifies a MEAN stack (MongoDB, Express, AngularJS, Node.js) augmented with ejabberd for real‑time messaging, illustrating how to combine modern web technologies to build a robust, collaborative SaaS product.

Disclaimer: The content is sourced from public channels and is provided for reference only. Copyright belongs to the original authors.