JSS development best practices

Abstract

Best practices to follow when developing JSS apps

JSS applications must support use cases that regular JavaScript applications do not. Therefore, when developing JSS applications, you must follow some best practices to ensure your JSS apps deliver the functionality that is expected of them.

Avoid hard-coding layout

Building an app that is compatible with Content Author management requires that you avoid hard-coding component hierarchy and any non-code content, such as text, images. Instead, use components from JSS packages within your components - they will hydrate your components with dynamic data generated by Content Authors.

Do not explicitly hard-code the nesting of components. Instead, use the <Placeholder> component from the JSS libraries to create a "basket" in your component that allows content authors to nest other components inside it.

Tip

Validate your application for this recommendation, by checking that a Sitecore editor (Horizon, Experience Editor) works as expected. Content authors must be able to insert. delete, and move renderings.

Avoid hard-coding fields

If a component has values that must be controlled by Content Authors, import the associated field components from the JSS libraries, such as Text or Image, and use these components instead of those values. Never hard-code field values or inject them any other way.

Tip

Validate your application for this recommendation, by checking that a Sitecore editor (Horizon, Experience Editor) works as expected. Content authors must be able to edit all datasource fields inline.

Inquire about authoring requirements

Sitecore is a collection of tools for building complex applications with powerful marketing features.

After a Sitecore site is built, Sitecore provides various tools and integrations to its users to analyze, nurture, and personalize the website experience of the end-users. The main clients of a Sitecore site, and therefore a JSS app, are marketers, Sitecore admins, and Content Authors. As a developer, you must build JSS apps that satisfy the business requirements of these clients. This means the JSS app must remain compatible with Sitecore authoring interface and avoid introducing technical restrictions that might limit site and content management capabilities.

Treat custom route requirements with care

In Sitecore, Content Authors have the power to control the URL of each page by organizing the content tree based on the desired URL structure. JSS apps are expected to fully support this feature. JSS apps implement custom routing to support URL structures controlled by Content Authors.