A Back-End Developer's Guide to Sitecore JavaScript Services

In case you've been living under a rock or haven't been on Twitter lately, Sitecore JavaScript Services (JSS) is the new hotness in Sitecore development for 2019. If you're not yet on board the Sitecore JSS train, don't worry - you're not alone.

Sitecore is traditionally a back-end focused platform. JSS adds native headless capabilities to Sitecore, while introducing a front-end focused way to develop Sitecore-based applications.

Some developers have already called for the death of traditional MVC Sitecore development: "JSS is the future of Sitecore!" What is an MVC developer to do? Will JSS replace MVC development? Absolutely not! MVC will continue to be central to Sitecore development for years to come (just like WebForms continues to hang around today). JSS simply makes front-end development a first-class citizen, which brings more skillsets into Sitecore development.

Despite a focus on the front-end, JSS has plenty for back-end developers to study. The Sitecore JSS documentation is thorough, but for those back-end developers who just want a quick, one-page overview of JSS basics, here is the one-page cliffnotes version:

JSS 101

Sitecore JavaScript Services is:

a Node.js-based development SDK for building JS-based websites/webapps
server-side APIs for enabling headless CMS functionality with Sitecore

JSS is made up of multiple (loosely coupled) pieces:

server components
Sitecore configuration items (including new rendering definitions)
the Layout Service
Node.js packages and tooling (such as a CLI for facilitating local development)

A few major advantages to using JSS:

Integration with popular front-end libraries (Vue, React, Angular out of the box)
Developers can create a JSS application entirely in JS (no Sitecore instance needed)
Sitecore Experience Platform tools are available on the front-end (analytics, personalization, A/B testing, etc.)
Multiple rendering modes support different deployment strategies (keep reading!)

Other JSS notes for traditional back-end developers:

With the correct architecture patterns, JSS supports the Experience Editor
Sitecore Forms and Experience Accelerator (SXA) are not supported with JSS

To get started with JSS, visit jss.sitecore.com.

Installing JSS

Front-end developers get started with just Node.js and a few CLI commands - no Sitecore installation necessary. With this setup, JSS replicates much of Sitecore's basic logic in JavaScript, including the concept of item templates, component-based development, routing, and a full presentation layer. Front-end developers can deploy their entire application to a Sitecore instance to enable more advanced features (Client management, marketing tools, etc.).

The server-side components of JSS include a few binaries, configuration files, and Sitecore definition items. These enable the headless pieces for utilizing a full Sitecore instance with a JSS application. These components are installed via a standard Sitecore package, and they require a Sitecore license with a JSS key to be enabled.

Licensing

When working with JSS in just the front-end-only "Disconnected Mode," a Sitecore license isn't required to build applications. In other words, a developer can pull down the entire JSS framework and Node packages, build an application, and deploy it without issue. A license is only needed when running in any mode that requires a Sitecore back-end server for Sitecore integration and content management.

JSS requires a separate license key in your Sitecore license file. Like all-things licensing, the details of pricing would be obtained through your Sitecore sales partner.

While not officially stated by Sitecore, cursory testing determined that a Sitecore instance without a JSS license will still function, but the JSS bits will return license errors when called.

Developer Workflow

Developers can create JSS-based applications a couple of ways:

Code-first allows a front-end developer to create all layouts, renderings, routes, logic, and content outside of Sitecore using only JSS. These items can later be imported into Sitecore via JSS tooling.
Sitecore-first is closer to classic Sitecore development, in that a developer defines layouts, renderings, placeholders, etc. in Sitecore. JSS then serves that content via an API to the JSS client-side app instead of rendering HTML via the usual MVC/WebForms presentation layers.

Application Modes

JSS application modes are one of the most important concepts for back-end developers to understand. The application mode determines the architecture and runtime mode of a JSS app (locally, headless, etc.), how it uses Sitecore, and affects environment setup and deployment. JSS has the following application modes, paraphrased from the official documentation:

Disconnected - No Sitecore needed. Uses local data/content inside JSS app. Dev-only.
Connected - Sitecore serves content to a local JSS app. Dev-only.
Integrated mode - Sitecore renders and serves content to a JSS app. Requires Node on server. Required for Experience Editor support. Dev/prod.
API-only - Sitecore serves raw content and presentation data via JSON. Dev/prod.
Headless server-side rendering (SSR) - Sitecore renders data/content via server-side Node process and serves it to a JSS app.

A few key takeaways:

For full Experience Editor and personalization support in content management (CM) environments, Integrated Mode is required, which means Node must run somewhere on or near the Sitecore application.
Headless SSR and API-only modes are best for production deployments. Headless SSR renders markup server side, while API-only mode lets client applications create the final markup. Both options allow for flexible scaling to keep performance high.
Applications can skip the full JSS API and send requests directly to the Layout Service to consume presentation data via JSON (part of API-only mode).