Introduction about JSS


What is Sitecore headless development?

Sitecore Headless Development is based on a rendering host front end and a Sitecore instance back end. This decoupling of logic domains makes a Sitecore solution easy to develop, maintain, scale and upgrade. 

What is JSS? 

JavaScript Service (JSS) will enable organizations to create a headless, Omnichannel customer experience that is reliable and easy to use.

JSS allows front-end developers to use modern JavaScript libraries (React.js, Angular, Vue) and frameworks (VS Code, NPM, Sublime) to develop the rendering of content on any device or browser.

Once deploy the app is to Sitecore we can able to manage the application in the Sitecore Experience Platform (XP) back end.

JSS Provides:

Code First Workflow: Use the Code first workflow to develop in our preferred OS, completely disconnected from Sitecore

Ease of Use: The JSS SDK provides easy app deployment and management as a nimble, self-contained JS bundle.

Application Integration: With Sitecore application integration, JSS takes care of generating all necessary artifacts.

Application Scalability: Use CDNs, proxies, and a Node.Js server to scale our applications.

Cross-Platform Support: The JSS SDK includes cross-platform support to deploy our app “heedlessly” to any platform that runs server-side JavaScript.

 

Before going to the implementation we need to better understand and be familiar with the four JSS features

Sitecore JSS features 

JSS Library: The JSS Library is a series of npm packages that facilitate working with Sitecore data and presentation in JavaScript.

Sitecore Layout Service: The Layout Service provides the Composition of pages and data needed for each component. In disconnected mode, the mock Layout Services emulates the data we would receive from the actual Sitecore Layout Service.

JavaScript View Engine: The JavaScript view engine allows Sitecore to perform server-side rendering of JavaScript applications.

Application Import: The Application Import Service allows you to apply a code-first approach.


JSS Development Mode 

Sitecore JSS has two types of development mode

            Code First Mode

            Sitecore First Mode 

Code First Mode: 

            The Front end developer can create the JavaScript application first with no Sitecore knowledge. It is disconnected from Sitecore components, definitions, and route data all will occur in front end side. 

Benefits:

Being able to develop apps in your preferred OS.

Being able to disconnect completely from Sitecore.

Working with the JSS SDK without a Sitecore server install. 

When we choose a code-first approach

You need to design an early prototype

You do not have a Sitecore instance available to deploy to.

You need to work on a non-windows operation system.

JavaScript developers are your primary designers.

The application will be simple from a content perspective.

 

Sitecore First Mode 

In Sitecore's first mode we can create the template, rendering, content in Sitecore and build components coming from Sitecore JSS. 

When we choose Sitecore first approach:

Sitecore developers are your primary developers

You are focusing more on Sitecore features.

You already planned your content.