{"id":14953,"library":"t3js","title":"T3 JavaScript Framework","description":"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.","status":"maintenance","version":"2.7.0","language":"javascript","source_language":"en","source_url":"https://github.com/box/t3js","tags":["javascript","framework","browser","client-side","modular","component"],"install":[{"cmd":"npm install t3js","lang":"bash","label":"npm"},{"cmd":"yarn add t3js","lang":"bash","label":"yarn"},{"cmd":"pnpm add t3js","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for specific T3 builds (e.g., t3-jquery.js) to support older browsers like IE8 and jQuery versions 1.8.0+.","package":"jquery","optional":true}],"imports":[{"note":"T3.js exposes the 'Box' object as a global variable after being loaded via a \n\n// Then access globally in your JavaScript\nconst app = Box.Application;"},{"note":"The core application instance, 'Box.Application', is accessed directly as a property of the global 'Box' object. No direct module import for this symbol exists.","wrong":"import { Application } from 't3js';\n// OR\nconst app = require('t3js').Application;","symbol":"Box.Application","correct":"Box.Application.addModule('my-module', function(context) { /* ... */ });"},{"note":"Modules are registered by calling the 'addModule' method directly on the global 'Box.Application' instance. It is not available as a standalone import or property of the 'Box' global itself.","wrong":"import { addModule } from 't3js.Application';\n// OR\nApplication.addModule('my-module', ...); // if 'Application' is not globally defined","symbol":"addModule","correct":"Box.Application.addModule('my-module', function(context) {\n var moduleEl;\n function init() { /* ... */ }\n function destroy() { /* ... */ }\n return { init: init, destroy: destroy };\n});"}],"quickstart":{"code":"\n\n\n\n \n \n T3 Quickstart\n \n \n\n\n
\n
Loading...
\n \n
\n\n \n\n","lang":"javascript","description":"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`."},"warnings":[{"fix":"Refer to the official migration guide for T3 1.5.1 to 2.0.0 (e.g., http://t3js.org/docs/getting-started/migrating-to-2-0-0) to understand necessary architectural and API changes.","message":"Version 2.0.0 introduced significant breaking changes, including the removal of service exports from the T3 core and changes to internal APIs. Applications upgrading from 1.x to 2.x will require code modifications.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Always use `t3js@2.0.1` or a more recent version (e.g., `2.7.0`) instead of `t3js@2.0.0` to ensure stability and correctness.","message":"The initial v2.0.0 release had issues with its release script, potentially leading to malformed builds or unexpected behavior. It is strongly advised to use version 2.0.1 or later.","severity":"gotcha","affected_versions":"=2.0.0"},{"fix":"Ensure T3.js is loaded in your HTML using a `