Sitecore JSS Best Practices for Future-Proof Implementation

The buzz around Sitecore JavaScript Services (JSS) has been on for a while and for a good reason. It is a complete Software Development Kit (SDK) for JavaScript developers that enables building full-fledged solutions using Sitecore and modern JavaScript UI libraries and frameworks.

Here are the key benefits that JSS brings in:

• Extends Sitecore’s dynamic, component-based model to Front-End
• Physically decouples Layout from Content Delivery
• Integration with popular Front-End Libraries (Vue, React, Angular OOTB)
• Enables support for Marketing Features including Personalization, Content Testing, Analytics while serving content headless

Below are some of the Best Practices that make its implementation future-proof:

 

Type Checking:

Type Checking enforces the usage of types/interfaces and provisions IntelliSense to make the code readable and easy to maintain. This indicates potential errors as well as introduces the ability to compile to a version of Javascript that runs seamlessly on all browsers. There are two options to achieve this: Flow and TypeScript. TypeScript is widely preferred and works well with Angular, while Flow works great when using React.

TypeScript serves as a great tool for auto-completion, code navigation, and refactoring. Flow provides a deeper understanding of code and even does the interprocedural analysis. Quality analysis is required before choosing Typescript or Flow, as it is a part of the Core Framework.

 

 

Dependency Injection:

Dependency injection is a technique whereby one object supplies the dependencies expected by another object. This enables the exchange of dependencies between classes and ensures high testability and reusability. There are a few existing solutions for DI, including InversifyJS, that work well for TypeScript. The implementation of a new custom Injector can also be leveraged based on the need.

 

Customizing Rendering Output

There could be few situations where there is a need for restructuring the default JSON delivered to clients by servers. While there may be few workarounds that exist that do not require the restructuring of the JSON data, it is highly essential to create/configure the Rendering Contents Resolver (available in the below location) to supply a restructured JSON data (when needed )

/Sitecore/system/Modules/Layout Service/Rendering Contents Resolvers

This makes the customization loosely coupled and reusable.

 

Customizing Scaffold:

Sitecore JSS allows developers to customize scaffolding functionality without much effort. This must be leveraged while defining the code infrastructure/architecture to avoid any redundancy during development. Apart from saving time and effort, this also ensures that best practices are carried over throughout the implementation.

 

Caching:

Sitecore comes with a powerful caching mechanism for amazing performance, but it works a little differently for JSS. Sitecore JSS caches only the JSON output and not the HTML. But this can be achieved by customizing JSS pipelines related to GetJsLayoutRenderer and JsLayoutRenderer to Cache HTML. Caching the HTML seems to limit the ability to have dynamic content on the page (Eg: Personalization, A/B Test, etc.), but this can be overcome by customizing the above-mentioned pipelines to store multiple variations of Cache. Caching setup at the Javascript Layer must also be considered to cache the HTML/Cache for routes.

 

Unit Testing:

Unit Testing is a critical piece of any functionality that is in the process of being developed. It is an industry-standard to have code coverage of 70%-80% for a Unit Test. Every Framework comes with its own set of tools for Unit Testing. It is crucial to develop advanced test methods that cover the detailed functionalities of developed components. This ensures early capturing of defects during development, as well as during integration.

 

Experience Editor Compatibility:

Just as the Monolith way of Sitecore Implementation, Sitecore JSS also comes with a set of helpers to ensure Experience Editor Compatibility. This must be standardized in the implementation by adding appropriate rules to the Code Inspection Tool to ensure the delivery of quality code.

 

Best Practices of the Framework

Certain best practices of the chosen Framework also must be ensured. For instance, Lazy Loading of components, using Import Aliases, etc. is important. This helps to ensure there’s no redundancy when scaling the application.

Following these best practices will ensure several benefits for marketers through personalization and consolidated data insights. After all, there’s no greater goal than extending your reach to consumers in different segments and enabling consistent marketing, as well as control over content!