What is JSS and Why
A bit of context on Sitecore
Companies chose Sitecore because it is highly customizable through development, yet the power to make decisions about content remains with the Content Authors. For example, though developers can create a custom set of shopping cart UI components, it is up to the Content Author to arrange them on pages and populate content. In Sitecore, Content Authors build pages in a WYSIWYG editor.
After components are assembled, Content Authors can apply Sitecore-specific features, such as personalization, to individual components and preview the variations. The following illustration shows some examples of how Content Authors may configure components.
What is JSS
JSS is a set of npm packages:
- Core packages that abstract away the "Sitecore stuff" like talking to different Sitecore APIs,
- Framework-specific packages with components that render data managed by the core packages, and
- Simple starter apps for every supported framework.
Without JSS, integrating a front-end framework with an authoring interface as flexible as Sitecore's would be a large undertaking, and some authoring features would likely need to be sacrificed. This is because front-end frameworks require developers to build the UI component hierarchies in code. This assumes a workflow where developers control the component composition. But if we want Content Authors to remain in control, and therefore we cannot know the component hierarchy at build-time, building with front-end frameworks becomes a challenge. And this is the challenge that JSS solves.
Developer benefits of JSS
Frameworks like Next.js reduce development overhead and standardize development patterns.
JSS enables workflows where front-end and back-end teams can work in parallel.
JSS provides sample "starter kits," which serve as an onboarding tool and living documentation.
Abstractions for front-end developers that allow working with Sitecore declaratively.
Utility functions and front-end components that abstract away the complexities of fetching Sitecore's dynamic data.
JS vs JSS
The following video explains the conceptual difference between building "vanilla" front-end framework apps and JSS front-end framework apps.
Master Sitecore on YouTube - JSS Architecture and Value Overview
- What value do front-end frameworks add to client applications?
- Why is a development kit needed to integrate front-end frameworks with Sitecore (Why is this so challenging?)
- How does JSS solve this challenge?
- An introduction to key JSS modules:
- An introduction to developer workflows: Disconnected vs. Connected.
To learn more about Sitecore terminology and concepts, refer to the Authoring Concepts.
Who should use JSS
Remember that JSS is one of several Sitecore implementation options, so obviously, it's not the right approach for everyone. As a platform for enterprises, Sitecore is designed to be highly flexible and customizable, both in the front-end and in the authoring interface. It's best to consult with Sitecore's Customer Success department or a Sitecore partner to dig into specific business cases and figure out the best way to utilize Sitecore.