Introducing RaptorJS: An End-to-End JavaScript Toolkit for Building Adaptive Modules and UI Components

RaptorJS is a toolkit that provides support for building JavaScript modules and UI components that function on the server and in the browser. RaptorJS promotes modularity which is crucial to building reasonably complex HTML web applications that are maintainable, easily testable and optimized. Keep reading below to learn more about this helpful toolkit.

As an eBay project, all RaptorJS features were designed to be extremely efficient and lightweight to achieve the best user experience for applications built using RaptorJS. In addition, RaptorJS is not a monolithic framework and, instead, embraces modular design and was designed to work alongside existing JavaScript libraries—not replace them.

At a high level, RaptorJS provides support for the following:

• Object-oriented JavaScript: Defining JavaScript modules, classes, mixins and enums based on the Asynchronous Module Definition (AMD) syntax
• Packaging: Defining dependencies for JavaScript modules and UI components based on simple package.json files, with support for optional and environment-specific dependencies
• Client-side asynchronous package loading: Downloading packages of JavaScript and CSS resources asynchronously after the initial page load
• Server-side JavaScript module loading: Loading JavaScript modules in multiple server-side JavaScript environments, including Node and Rhino
• Resource optimization: Resource minification, bundling, compilation, checksums and CDN integration for optimal delivery of JavaScript modules and UI components to the browser
• HTML templating: Using the same extensible templating language on both the server and in the browser to build UI components and web pages
• Widgets: Automatic binding of JavaScript behavior to DOM nodes associated with rendered UI components—regardless of whether or not the UI component was rendered on the server or in the browser

Each of these features is described in more detail in the sections below.

Object-Oriented JavaScript

RaptorJS provides a simple library to support defining namespaced modules, classes, mixins and enums. This library uses a clean and easy-to-understand syntax based on the AMD syntax.

RaptorJS provides an AMD implementation that extends AMD in backwards compatible ways to provide new features that make building modular JavaScript applications even easier. The syntax is is very close to pure JavaScript, but fills gaps in the existing JavaScript language. Now you can start creating modular code that is easy to maintain without waiting for a new version of JavaScript or switching to an alternate language.

Packaging

RaptorJS extends the popular package.json format so that it is better suited for packaging up JavaScript modules and UI components to be delivered to a browser, and it allows for JavaScript modules to be loaded in multiple server-side JavaScript environments. RaptorJS packages allow developers to make dependencies explicit—including which dependencies are optional or environment-specific. RaptorJS package extensions allow JavaScript modules and UI components to be delivered and loaded differently based on the target environment. For example, developers can package UI components so that CSS code sent to mobile device packages is different from the CSS code sent to desktop devices. In addition, JavaScript modules can load differently in Node and Rhino server-side JavaScript environments.

RaptorJS packages can be created for JavaScript modules and UI components. RaptorJS imposes no requirements on the code that is packaged so developers can continue to write code however they prefer. RaptorJS packages are extensible and support any type of dependency (including JavaScript, CSS, LESS, Raptor Templates, etc.).

RaptorJS packages are used by the RaptorJS server-side module loader, and they are also used to optimally deliver only the required code to the browser.

Client-side Asynchronous Package Loading

RaptorJS includes a lightweight AMD-compatible package/module loader that allows JavaScript and CSS resources to be downloaded asynchronously after the initial page load. This asynchronous package loader works in conjunction with the RaptorJS Optimizer to efficiently download resources from the server.

Server-side JavaScript Module Loading

RaptorJS provides a server-side module loader that integrates with multiple server-side JavaScript environments, including Node and Rhino. The server-side module loader reads modules package files to determine which code to load based on the target environment.

The RaptorJS AMD module loader integrates seamlessly with the Node module loader. In addition, RaptorJS provides a fully-compliant CommonJS and AMD module loader for Rhino.

Resource Optimization

The RaptorJS Optimizer is a server-side tool to build optimized web pages by bundling, compiling and minifying page dependencies. This tool makes managing complex JavaScript and CSS dependencies almost effortless while helping you produce extremely optimized web pages.

Unlike other optimizers, the RaptorJS Optimizer does not require that you write your code a certain way. Simply tell the optimizers which modules your page depends on and it will take care of the rest—including writing optimized JavaScript and CSS bundles to disk and generating the HTML that is required to include those bundles. All dependencies are described using RaptorJS package.json files that are easy to maintain and allow you to leverage the full power of the RaptorJS Packaging system.

Every application has different requirements so the RaptorJS Optimizer gives you full control over how resources are combined and where to include resources on your HTML pages.

HTML Templating

Raptor Templates is an amazing new templating language that beautifully blends powerful templating directives with HTML tags. Unlike most other templating languages, Raptor Templates also allows high-level UI components to be embedded in templates through the use of custom tags. Equally effective in both the browser and on the server, use Raptor Templates wherever you want to produce HTML.

Raptor Templates is XML-based so that the XML structure of an HTML document can be used to its full advantage to make it easier for developers to write easily readable templates and to provide optimal output. It includes a compiler that converts HTML templates into native and optimized JavaScript code.

No other templating language makes it so effortless to produce easily readable templates that are blazingly fast with such a miniscule footprint. The full feature set for the Raptor Templating language can be found at Raptor Templates.

Widgets

The RaptorJS Widget Framework is a lightweight framework that simplifies the creation of web applications built using UI components. The RaptorJS Widget Framework provides a mechanism for automatically attaching behavior to DOM sub-trees associated with rendered UI components—regardless of whether or not the UI components were rendered on the server or in the web browser.

The RaptorJS Widget Framework does not dictate how a client-side widget be implemented and there is no complex class inheritance hierarchy (only a few mixins that get applied to all initialized widgets).

UI components that use Raptor Templates to render their view will benefit from the bindings that allow widgets to be attached to rendered HTML elements. During the rendering of an HTML template, the Widget Framework keeps track of which widgets have been rendered and which HTML element each widget is bound to. This allows all of the widgets to be automatically and efficiently initialized without having to rely on the CPU-intensive task of scanning the final DOM tree to discover rendered widgets.

Acknowledgement

RaptorJS was built at eBay’s presentation platform by Patrick Steele-Idem (@psteeleidem)