Frontend Spire CMS

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

What primary goal does Spire CMS aim to achieve in terms of page editing experience?

Complex CMS data structures

Improved page editing experience (correct)

High dependency on developer intervention

Increased JavaScript load times

Which technology does Spire use as compared to Classic, which is built on Angular.js?

Vue.js

Django

Svelte

React/Redux (correct)

What feature allows Spire users to see how a page appears on different devices?

Style Guide

Device preview (correct)

Centralized content sharing

Tag filtering

What aspect of Spire CMS helps in organizing content effectively?

Granular widget system with no coding requirements (A) Signup and view all the answers

Which of the following features enables users to compare and restore previous versions of a page?

Page Restoration (A) Signup and view all the answers

What improvement does Spire CMS offer in relation to implementation costs compared to other platforms?

Lower implementation costs (B) Signup and view all the answers

What is the purpose of tags in Spire CMS?

To organize and locate pages more flexibly (A) Signup and view all the answers

Which feature of Spire CMS allows users to make site-wide styling changes?

Style Guide (C) Signup and view all the answers

What does a Compact Header primarily achieve for a website?

It creates a condensed version of the site's header during scrolling. (C) Signup and view all the answers

Which framework is mentioned as being React-based and beneficial for developers?

Spire CMS (C) Signup and view all the answers

What is a key feature of Server-Side rendering in the context provided?

It enables improved SEO by showing the same content to crawlers. (C) Signup and view all the answers

What do WCAG 2.0 AA guidelines refer to in the context of developing Spire storefront pages?

Web Content Accessibility Guidelines. (A) Signup and view all the answers

What must customers complete to guarantee compliance regarding accessibility?

Conduct their own certification process. (A) Signup and view all the answers

What is one of the significant implications of the end of life announcement for Classic CMS?

It only impacts customers using Classic CMS. (B) Signup and view all the answers

What is necessary for Cloud customers wishing to transition from Classic to Spire?

They need to migrate their instance from Classic to Spire infrastructure. (D) Signup and view all the answers

What benefit does the transition from Classic to Spire aim to achieve for existing sites?

Enhance the overall user experience. (C) Signup and view all the answers

What will happen to Classic after January 1, 2025?

Classic will receive only security and bug fixes. (B) Signup and view all the answers

Which technology is used in Spire CMS that is not used in Classic CMS?

React (D) Signup and view all the answers

Which of the following is true about the server/front-end load for Classic?

It has a heavy front end with API only on the back end. (C) Signup and view all the answers

What is the main difference in the front-end upgrade model between Classic and Spire?

Spire allows merging as desired. (C) Signup and view all the answers

How is widget code implemented differently in Classic and Spire?

Classic uses TypeScript and C#, while Spire uses only TypeScript. (D) Signup and view all the answers

Which feature allows Spire to have a more flexible styling approach than Classic?

User-configurable style components (D) Signup and view all the answers

What distinguishes the structure of content management between Classic CMS and Spire CMS?

Classic uses themes while Spire uses a content library. (C) Signup and view all the answers

What type of extensibility do widgets have in Spire compared to Classic?

Spire allows property injection or handler chain, while Classic only allows new widgets. (B) Signup and view all the answers

What command is used to launch Spire with a custom blueprint?

npm run start {customBlueprintName} (C) Signup and view all the answers

What is the purpose of deleting content from the content.Node table in the database?

To force the regeneration of the site (B) Signup and view all the answers

Which file is essential for specifying the version of the base code in a containerized environment?

versionInfo.yaml (B) Signup and view all the answers

What do you need to do in the Project Initiation Form to ensure access to Spire?

Select both Spire CMS and Classic CMS in the CMS Type field (C) Signup and view all the answers

What is the default URL for API requests when launching Spire?

<a href="http://commerce.local.com">http://commerce.local.com</a> (D) Signup and view all the answers

Which environment is NOT provisioned and maintained by Optimizely?

Development (D) Signup and view all the answers

When do site pages get automatically generated for the first time?

When a request is made to the server without existing pages (C) Signup and view all the answers

What should be done in Rider/WebStorm to see ESLint errors?

Install the ESLint extension and enable TSLint settings (A) Signup and view all the answers

What build process is used for larger widgets in the context of Spire projects?

Grunt (D) Signup and view all the answers

Which feature is NOT supported by smaller, more granular widgets?

Targeting specific device types (C) Signup and view all the answers

What is required to access the Spire CMS after completing the Developer Setup?

Add /contentadmin to the site URL (D) Signup and view all the answers

What responsibility does the implementation team have in starting a Spire project?

Initiate the request for Configured Commerce environments (A) Signup and view all the answers

Which of the following is true regarding accessibility for larger widgets?

Accessibility can only be addressed by external extensions (A) Signup and view all the answers

What is the primary purpose of the README.md file after Developer Setup?

To summarize the project structure (A) Signup and view all the answers

Which of the following statements is true about the responsive preview in smaller widgets?

It allows for view toggling (B) Signup and view all the answers

Which technology is primarily used for deploying Configured Commerce websites to the cloud?

Git source control (D) Signup and view all the answers

Study Notes

Spire CMS: Key Features and Benefits

Spire CMS is a CMS and reference site created by Optimizely for Configured Commerce.
It offers features like improved upgradability, composable commerce pages, a simplified data structure, and enhanced page editing experience.
Spire is built on React/Redux, allowing for better performance and a lower learning curve compared to Classic, built on Angular.js.
Both Classic and Spire use widgets to construct pages and APIs to retrieve data.
Benefits of Spire:
- Updated column design for flexible page layout and widget organization.
- Configurable widgets with options like multi-select for table widgets.
- Organized gallery of widgets accessible through a Widget Selection Interface.
- Layout creation for templates on frequently used page types like news or articles.
- Enhanced publishing options including page-specific content for languages and context, page restoration, and the ability to add and remove tags.
- Device preview for mobile, tablet, and desktop views.
- Style Guide for site-wide styling changes with configurations and revert options.
- Shared content in a central location with filterable tags, replacing Website Hierarchy from Classic.
- Compact Header for a condensed version of the site's header when users scroll down the page.
- Improved SEO through server-side rendering, ensuring search engine crawlers see the same content as users.
- Core Web Vitals improvements for higher Google scores.
- Accessibility improvements during development to simplify certification.
- Support for both Classic and Spire allows customers to implement Spire-based sites on the same instance as their Classic-based sites.

End of Life for Classic CMS

Optimizely has announced the end of life for Classic CMS, impacting only customers using Classic, not those using Spire.
Configured Commerce customers can implement Spire-based sites on the same instance as their existing Classic-based sites.
On-premises customers can utilize Spire with the v5.1 SDK release in January 2022.
Three-year end-of-life plan:
- 2022 (Year One): Continue adding new features to Classic.
- 2023 & 2024 (Years Two & Three): Only provide bug and security fixes to Classic.
- January 1, 2025: End of life for Classic. No further base code changes will be made.

Feature Parity Between Classic and Spire

While there are differences in feature implementation, both Classic and Spire support the same Configured Commerce feature sets.
Feature comparison table:
- Classic CMS vs Spire CMS in terms of technology, front-end upgrade model, styling approach, structure by website, server/front-end load, widget construction, widget code, widget extensibility, widget sizing, single-page application support, support for extensions, build process, hot module replacement, SEO page, accessibility, and responsive preview.

Getting Started with a Spire Project

Starting a Spire project is similar to starting a Configured Commerce project with Classic CMS, with a few changes.
Development work is the responsibility of the Implementation Team.
Setup and configuration: Multiple data points are needed, including a GitHub account name for the project.
Front end setup:
- Install node/npm.
- Run npm install from /FrontEnd.
- Use Visual Studio Code or Rider/WebStorm for development.
Launching Spire:
- Run npm run start from /FrontEnd.
- Access Spire at http://localhost:3000.
- API requests are forwarded to http://commerce.local.com, which can be changed in /FrontEnd/config/settings.js.
- Launch Spire with a custom blueprint: Create blueprints in Spire and run npm run start {customBlueprintName}.
Site generation: Pages are automatically generated on the first server request or can be forced via an SQL statement.
Project initiation form: Use the online form to capture data points for provisioning Configured Commerce in the Cloud environment.
Upgrade base code: Update the versionInfo.yaml file in the Extensions repo to update the base code version.
Deployment and environments: Optimizely provisions Sandbox and Production environments.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

Explore the key features and advantages of Spire CMS, a modern content management system developed by Optimizely. Discover its improved upgradability, simplified data structure, and enhanced page editing experience compared to classic solutions. Learn how Spire's architecture, built on React/Redux, offers better performance and a lower learning curve.