What is Spire?

Spire is both a new CMS and a new, from the ground up, reference site. It uses different technology than our current Classic CMS, but the main ideas are the same - pages are constructed from CMS widgets A pre-configured content holder ISC_Content user roles may use to add content to website pages without having to develop page elements., widgets are displayed on the pages and the CMS/Javascript Framework use APIs to retrieve data.

The primary technical goals for the rewrite of the Optimizely B2B Commerce front-end and CMS are:

  • Improved upgradability for the frontend
  • More composable commerce pages
  • Simple CMS Data Structure
  • Improved page editing experience
  • SEO/Serverside rendering
  • Lighter Javascript payloads

While not a technical goal, another intent of this initiative is to empower business users to have more control over the site without developer intervention and to keep implementation costs competitive with other platforms.

Widgets will be smaller and more focused, so users have more flexibility with how they arrange their pages (in the current CMS a whole page could be just one widget, which is very limiting)

The styling is more WYSIWYG, so the users can use the CMS style guide to change site-wide styling like colors, headings, and so on.

Why did you build a new CMS?

We had a few primary goals for building a new CMS including:

  • Put more power in the hands of the business user
  • Allow for near-seamless upgrades of the front-end like the back end
  • Reduce initial implementation costs
  • Create a simpler, more intuitive content editing experience

We could not accomplish these goals without thinking about the goals and the available technologies. As B2B Commerce appeals to mid-market customers with a widely varying set of technical expertise and digital maturity, we wanted to have a site design experience that was both flexible and easy to work with.

The big benefits of Spire will be the Style Guide (ability to change base CSS from within CMS) and the more granular/composable widgets. It is also a bit more intuitive to use and React has a smaller footprint on the front end than Spire will for responsive usage when bandwidth is at a premium.

How is Spire CMS different from Classic CMS?

They use fundamentally different technologies ? Spire CMS is built on React/Redux and Classic CMS is built on Angular.js. See the table below for additional comparison information.

How long will Optimizely support Classic CMS?

Optimizely will support Classic CMS, including maintenance and enhancements, for the foreseeable future. While we will likely be spending more time on Spire CMS as we build it out and it matures, Classic CMS is already a mature module that works well.

What kind of feature parity will there be between Classic CMS and Spire CMS?

The reference sites will have some differences in the way features are being implemented, but they fundamentally support the same B2B feature sets. Once the new reference site is completed and if new front-end feature capability is added, it will be built it in both Classic CMS and Spire CMS for at least one year. At some point, we will only build new front-end feature exposure in Spire CMS, but that does not mean that the feature cannot be implemented in Classic CMS, but it will take more work. Also, if you already have a highly customized site, new features we have introduced in Classic CMS still need to be manually worked into the site.

Click the next section to see a feature parity comparison chart.

Feature Comparison: Classic CMS vs. Spire CMS

Feature/Capability

Classic CMS

Spire CMS

Technology

Angular.js, Foundation, TypeScript

React, Redux, TypeScript, Node

Front-End Upgrade Model

Merge as desired

Automated

Styling Approach

Cascading Style Sheets, base.css

Style Guide ? user-configurable, styled-components

Structure by website

Themes

Content Library

Server/Front-End Load

Heavy Front-End, API-only on back end

Hybrid ? some on front end mixed with some on back end

Widget Construction

Custom created

Built on Mobius and then customized

Widget Code

C#/TypeScript

TypeScript

Widget Extensibility

New widgets

New widgets, property injection or handler chain

Widget Sizing ? reference site

Larger widgets

Smaller, more granular widgets

SPA (single-page app)

Yes

Yes

Supports GTM, Chat and other javascript-based extension

Yes

Yes

Build Process

Grunt

Webpack

Hot module replacement

No

Yes

SEO Page for bots

Separate page

No longer needed

Accessibility

By extension

Reference site includes accessibility features

Responsive Preview

By resizing screen

Toggle to change view