JavaScript frameworks and JSS

Abstract

Differences between working with regular JS framework apps and JSS apps

JSS does not extend the front-end frameworks or change their way of working but uses framework tooling and capabilities to provide ready-to-use functionality, such as custom routing solutions. The technical concepts, patterns, and best practices you learned from building regular front-end framework apps are valid for JSS in general.

However, to facilitate collaboration with Sitecore developers in your back-end team, you must familiarize yourself with the Sitecore interfaces, terms, and concepts.

Front-end framework apps

In regular front-end applications, without a Content Management System (CMS), developers control the page and component composition through code. Because there is no Content Management interface, the different states of the (already designed) end-user interface determine what gets rendered. The number of state variances combined with the number of reusable elements and behaviors between states determines the granularity of components.

Important characteristics of JavaScript framework apps:

  • Developers control component layout.

  • Developers know the page composition and component hierarchy at development time.

Front-end apps with JSS

When building a JSS app, the app must support integration with a CMS, and therefore you create a single set of components for two distinct interfaces. The first is the interface where end-users interact with your app, just like regular JavaScript front-end apps. The second is the authoring interface, where content authors arrange your components on pages and manage content values.

Important characteristics of JSS apps:

  • Content authors assemble pages by selecting components in a graphical Sitecore editor such as Experience Editor or Horizon

  • Sitecore users, not the developers, are in control of the layout

  • When content authors have assembled pages with components, they can add additional dynamic behavior that changes content rendering, such as locale-based personalization

  • Because content authors can create dynamic experiences for different personas, the page composition that end-users see is unknown at development time