T3 JavaScript Framework

2.7.0 · maintenance · verified Sun Apr 19

T3 is a client-side JavaScript framework for building large-scale web applications, developed and battle-hardened at Box. Its current stable version is 2.7.0. Unlike many modern frameworks, T3 is explicitly not an MVC framework and is designed to be unopinionated, providing a foundational structure for scalable client-side code rather than an all-encompassing solution. It promotes loose coupling, explicit dependencies, and progressive enhancement, allowing integration with other libraries like jQuery, Backbone, or React. T3 defines functionality through three core component types: Services (utility libraries), Modules (managing DOM element interactions), and Behaviors (mixins for shared event handling). Its release cadence has been irregular, with the last significant updates around 2017, focusing on stability rather than active feature development.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates how to define and initialize a T3 module, attach a behavior for event handling, define a service, and initialize the entire T3 application within an HTML page. It showcases core T3 patterns like `data-module` attributes, `Box.Application.addModule`, `context.attachBehavior`, and `context.getService`.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>T3 Quickstart</title>
    <!-- Load T3.js - ensure this path is correct or use a CDN -->
    <script src="https://cdn.rawgit.com/box/t3js/v2.7.0/dist/t3.js"></script>
</head>
<body>
    <div data-module="my-greeter">
        <h1 data-element="greeting-message">Loading...</h1>
        <button data-behavior="greet-button">Say Hello</button>
    </div>

    <script>
        // Define a T3 Module
        Box.Application.addModule('my-greeter', function(context) {
            var greetingMessageElement;

            function init() {
                greetingMessageElement = context.getElement('greeting-message');
                // Attach a behavior for declarative event handling
                context.attachBehavior('greet-button', greetBehavior);
                updateGreeting('Initial message');
            }

            function destroy() {
                greetingMessageElement = null;
            }

            function updateGreeting(message) {
                if (greetingMessageElement) {
                    greetingMessageElement.textContent = message;
                }
            }

            // Define a Behavior
            var greetBehavior = {
                onclick: function() {
                    const myService = context.getService('my-time-service');
                    const time = myService ? myService.getCurrentTime() : 'unknown time';
                    updateGreeting(`Hello from T3 at ${time}!`);
                }
            };

            return {
                init: init,
                destroy: destroy,
                // Expose a method if needed for other modules/services
                updateMessage: updateGreeting
            };
        });

        // Define a T3 Service
        Box.Application.addService('my-time-service', function() {
            function getCurrentTime() {
                return new Date().toLocaleTimeString();
            }
            return { getCurrentTime: getCurrentTime };
        });

        // Initialize the T3 Application when the DOM is ready
        document.addEventListener('DOMContentLoaded', function() {
            Box.Application.init();
            console.log('T3 Application Initialized.');
            // You can also get a service directly after init
            const timeService = Box.Application.getService('my-time-service');
            if (timeService) {
                console.log('Current time via service:', timeService.getCurrentTime());
            }
        });
    </script>
</body>
</html>

view raw JSON →