TechPrufer
Get started
Shopify
Shopify logoShopify · Feature trail

Client-side JavaScript Framework (Batman.js)

3 posts · Sep 2011 – Oct 2014

What this trail covers

Shopify has evolved its client-side JavaScript framework strategy, moving away from the in-house Batman.js framework due to its complexity, poor documentation, and maintenance burden. The team has rebuilt the Shopify admin using a more classic architecture with ERB views, server-side rendering, Turbolinks, and a lightweight custom JavaScript binding system. This approach aims to reduce code duplication, improve developer productivity, and provide a faster, more stable experience for merchants.

All Shopify trails
  1. Rebuilding the Shopify Admin: Deleting 28,000 lines of JavaScript to Improve Dev Productivity - ShopifyThis post details the decision to remove Batman.js from the Shopify admin and rebuild it using ERB views, server-side rendering, Turbolinks, and a custom JavaScript binding system. It highlights the problems encountered with Batman.js, including memory leaks, performance regressions, code duplication, and poor developer onboarding. The new architecture aims to address these issues by reducing client-side code, improving developer productivity, and simplifying the tech stack.
  2. Three Months of CoffeeScript - ShopifyThis post details the author's positive three-month experience using CoffeeScript for developing the Batman.js framework. It highlights CoffeeScript's productivity gains through more succinct and less error-prone code, providing examples of iteration and debugging. The author also discusses the workflow integration and addresses common criticisms regarding indirection and debugging complexity, emphasizing the importance of testing compiled JavaScript.
  3. How Batman can Help you Build Apps - ShopifyThis post introduces Batman.js, a new open-source CoffeeScript framework for building single-page applications. It highlights Batman's runtime layer for data manipulation and event subscription, including deep keypath traversal and dependency tracking for computed properties. It also details Batman's view system, which uses direct DOM manipulation and data binding for efficient rendering and updates, and mentions its routing and Model layers.