Bloomberg

Bloomberg.com

Enterprise news platform redesign and development

Bloomberg.com
Isomorphic Javascript
Client
Bloomberg
Role
Senior Front-End Engineer (embedded with Bloomberg Core Web team)
Company
Code and Theory NYC
Url
https://www.bloomberg.com
Period

Overview

This project was part of a three-phase engagement where Code and Theory engineers were embedded directly within Bloomberg’s Core Web team:

  1. Bloomberg Politics maintenance - Post-launch feature development serving as onboarding
  2. Bloomberg Business redesign - Complete platform redesign and development
  3. UAT and QA support - Addressing user acceptance testing feedback

Bloomberg Business represented a watershed moment in digital journalism—the first unified flagship destination combining Bloomberg News, Bloomberg Businessweek, Bloomberg TV, Bloomberg Video, and Bloomberg Politics into a single, cohesive experience.

As one of four senior software engineers from Code and Theory embedded within Bloomberg’s Core Web team, I contributed to implementing the technical foundation that would support Bloomberg’s ambitious vision of creating a “smarter, faster” news platform.

The Challenge

Bloomberg faced a complex architectural challenge: how to unify disparate content verticals under a single technical umbrella while maintaining the flexibility to serve both active financial news consumers requiring real-time market data and casual readers seeking curated business content. The existing infrastructure couldn’t support the scale, modularity, or performance requirements of Bloomberg’s digital transformation.

Key Technical Challenges:

Technical Architecture

Core Technology Stack

The application was built on a modern JavaScript architecture utilizing Brisket.js (Brisket is an open-source framework developed by Bloomberg for building isomorphic single-page web applications) to enable isomorphic rendering, allowing shared code between client and server for improved performance and SEO.:

// Server-side application
var ServerApp = Brisket.ServerApp.extend({
  routers: Routers,
  start: function (options) {
    AppConfig.loadConfig(options.environmentConfig);
  },
});

// Client-side application
var ClientApp = Brisket.ClientApp.extend({
  routers: Routers,
  start: function (options) {
    AppConfig.loadConfig(options.environmentConfig);
    this.setupAnalytics();
    this.initializePersonalization();
  },
});

Note

This is a abstracted/simplified example. The actual implementation involved extensive routing, state management, and API integration.

Backend Infrastructure:

Frontend Architecture:

Modular Component System

Working within Bloomberg’s established component architecture, I helped implement and extend the flexible system that could adapt to Bloomberg’s diverse content needs:

// Modular SCSS architecture supporting infinite layout combinations
@import '../components/modules/hero/hero';
@import '../components/modules/hero/hero_variants';
@import '../components/modules/hero/section_hero_variants';
@import '../components/modules/content/content_feed';
@import '../components/modules/data/data_visualization';
@import '../components/modules/alerts/notification_banner';

Each module was designed as a self-contained unit with:

Interactive Features Implementation

Reading Progress Indicator

A sample of one of the features I implemented was the reading progress bar, a visual indicator showing article completion percentage:

var ReadingProgressView = View.extend({
  updateProgress: function () {
    var scrollTop = $(window).scrollTop();
    var documentHeight = $(document).height();
    var windowHeight = $(window).height();

    // Prevent division by zero and handle edge cases
    var scrollableHeight = documentHeight - windowHeight;

    var progress =
      scrollableHeight > 0
        ? Math.min(100, Math.max(0, (scrollTop / scrollableHeight) * 100))
        : 100;

    this.$('.reading-progress__bar').css('width', progress + '%');
  },

  initialize: function () {
    this.throttledUpdate = _.throttle(this.updateProgress.bind(this), 16);
    $(window).on('scroll', this.throttledUpdate);
  },

  remove: function () {
    $(window).off('scroll', this.throttledUpdate);
    return View.prototype.remove.call(this);
  },
});

Industry Recognition

The Bloomberg Business launch garnered significant industry attention:

Technical Learnings and Innovations

Architectural Decisions

The team made several key architectural decisions that I contributed to implementing:

  1. Isomorphic JavaScript: Working with Brisket.js for server/client rendering provided SEO benefits while maintaining rich client-side interactions
  2. Component-Based CSS: The modular SCSS architecture enabled rapid design iteration without breaking existing layouts
  3. API-First Design: Separating content delivery from presentation allowed for flexible content syndication
  4. Progressive Enhancement: Core functionality worked without JavaScript, with enhanced experiences layered on top

Performance Innovations

Accessibility Implementation

Code Quality and Testing

Testing Strategy

// Comprehensive testing across client and server environments
describe('ReadingProgressView', function () {
  var readingProgressView;

  beforeEach(function () {
    readingProgressView = new ReadingProgressView({
      containerReadingContent: '.article-body',
    });
    readingProgressView.render();
  });

  it('updates progress based on scroll position', function () {
    setScrollTop(20);
    var progressBarWidth = parseInt(
      readingProgressView.$('.reading-progress__bar').css('width')
    );
    expect(progressBarWidth).toBeGreaterThan(0);
  });
});

Code Standards

Legacy and Continued Innovation

The technical architecture that our team helped implement for Bloomberg Business became the foundation for subsequent Bloomberg digital properties. The modular component system, performance optimization strategies, and isomorphic rendering approach influenced how Bloomberg approaches web development across their entire digital ecosystem.

The project demonstrated that news organizations could deliver magazine-quality design experiences without sacrificing the speed and reliability required for financial news consumption. This balance between aesthetics and performance became a benchmark for subsequent digital journalism platforms.

Deployment Pipeline

  1. Git commit triggers automated testing
  2. Build process compiles and optimizes assets
  3. Staging deployment for QA validation
  4. Production deployment with zero-downtime strategy
  5. Monitoring confirms successful deployment

This case study represents my contributions as one of four Senior Software Engineers from Code and Theory embedded within Bloomberg’s Core Web team during the Bloomberg Business redesign project. The technical implementations described reflect my direct involvement in developing the platform’s core systems as part of the collaborative effort between Code and Theory and Bloomberg’s internal development team.

Additional Resources

Bloomberg Business Full Case Study on codeandtheory.com at https://www.codeandtheory.com/things-we-make/bloomberg-business

Bloomberg Politics Full Case Study on codeandtheory.com at https://www.codeandtheory.com/things-we-make/bloomberg-politics

bloomberg_business_half_02_tech.jpg bloomberg_business_half_03_pursuits.jpg bloomberg_business_half_06_article.jpg