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:
- 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.
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.
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.
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.
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).
Further Reading (Documentation)
As I said before, the Sitecore JSS documentation is already excellent, so don't hesitate to dive in. For further back-end focused topics, I recommend:
- App Configuration
- JSS App Import
- Sitecore Layout Service
- Server-Side Rendering
- Authentication and Security
- Azure Deployment
Further Reading (Community)
The awesome Sitecore community has been stepping up to provide tons of great information around JSS, and back-end developers may be interested in these articles:
- Stack Exchange: How does Sitecore JSS impact backend Sitecore development process
Keep an eye on the Sitecore Community to produce some great content around JSS in the future. Follow the SitecoreJSS hashtag on Twitter and join the Sitecore Community Slack for the latest on JSS.
Do you have questions, comments, or corrections for this post? Find me on Twitter: @BrandonMBruno