Build sites with Spire and React Redux

Before Optimizely could start development, the journey to Spire began with researching and comparing several web frameworks, including Angular, Vue, and React. Optimizely ultimately chose React because it's a lightweight, presentation-based JavaScript framework.

The Engineering team at Optimizely knew there was no direct path to upgrade the Classic CMS framework, Angular.js to a more up-to-date framework; even Angular would require a complete rebuild (Angular.js and Angular share only a name). As a result, Optimizely was able to consider a variety of frameworks. Optimizely chose React for several
reasons:

• Backwards compatibility

  React ensures backward compatibility as Optimizely releases new versions of Spire

• Widespread adoption

  React is the most popular JavaScript library developers use to build web applications in North America

• Low learning curve?

  React's learning curve is less steep than other web frameworks, and because of its popularity, a wide variety of learning and troubleshooting resources are available.

• Performance

  React is a small and highly performant library, speeding up the time to load and first paint.

What are the benefits?

As a Configured Commerce developer, you experience the following benefits of the move to React:

• Preferred libraries

  Choose your preferred libraries to accomplish tasks like granting network access or setting up local data storage. React is an interface-focused tool, and allows latitude for choosing tooling for other aspects of building an application.

• Simple components

  React code consists of entities called components, which are rendered to the DOM using the React virtual DOM. Break your complex UI/UX development into modular components, which makes each component more intuitive.

• Extension of TypeScript

  Optimizely creates Spire components using TSX, or Typescript XML (i.e., JSX & Javascript XML implemented in TypeScript) has a unique syntax that lets you add HTML quotes and tags to your TypeScript to render specific components.

When your customers start using the Spire CMS to create and update website content, you will see how React benefits them, and how the integration of more flexible tools enables them to perform their jobs better.

What are the constraints?

Optimizely implemented server-side rendering (SSR) specifically to help search engines traverse the site without having to execute JavaScript. This, however, introduced some constraints over various techniques that can be used in React. See the Server-side rendering SSR guidelines for Spire for more details.

Unfamiliar with React and Redux?

Here is a quick primer, but see the listed resources for more details on developing with React/Redux.

• React is a JavaScript library for building user interfaces fast and efficiently with minimal coding. Top corporations like Facebook, PayPal, Uber, Instagram and Airbnb use React to solve issues with user interfaces. Facebook maintains the React library, together with a community of developers and companies.
  Use React as a base to develop single-page or mobile applications. React is only concerned with rendering data to the DOM, so creating React applications requires additional libraries for state management and routing, for example, Redux and React Router.
• Redux is an open-source JavaScript library for managing application state. Developers commonly use Redux with libraries like React or Angular to build user interfaces. Redux also supports handler chains
  on the front end.

Resources

• React Overview
• Get started with React
• Using Redux with React