Taking Sitecore

Headless with
Sitecore JSS
chaturanga ranatunga
May 21, 2018

#sugcon
 About Me

chaturanga ranatunga
Freelance Sitecore Consultant
Sitecore Technology MVP – 2016-2018

https://sitecorefootsteps.blogspot.com
@scfootsteps
Co-Founder & Initiator at Sitecore User Group Sri Lanka

© 2018 Sitecore User Group Conference India and its respective speakers. All rights reserved.
 Sitecore JavaScript Services

A set of capabilities allowing JavaScript developers

to build and deploy solutions (SPAs, PWAs, websites)
using modern UI libraries and frameworks (React, Angular, Vue)
in a physically decoupled way
without losing the value of the Sitecore Experience Platform

© 2018 Sitecore User Group Conference India and its respective speakers. All rights reserved.
Demo – JSS Front-
End
 Sitecore JSS Disconnected Mode

o Rendering performed by browser

o Data comes from local .json/.yaml files
o No Sitecore instance needed

A set of capabilities allowing JavaScript developers

to build and deploy solutions (SPAs, PWAs, websites)
using modern UI libraries and frameworks (React, Angular, Vue)
in a physically decoupled way
without losing the value of the Sitecore Experience Platform

© 2018 Sitecore User Group Conference India and its respective speakers. All rights reserved. 7
 Sitecore JSS Disconnected Mode

What you need :

node.js
yarn or npm
JSS CLI
jss create <your_app_name> <app_template_name>

© 2018 Sitecore User Group Conference India and its respective speakers. All rights reserved. 8
Demo – JSS
Sitecore
Integration
 Sitecore JSS Connected Mode

o Rendering performed by browser

o Data comes from Sitecore via LayoutService API
o Development against Sitecore Instance

A set of capabilities allowing JavaScript developers

to build and deploy solutions (SPAs, PWAs, websites)
using modern UI libraries and frameworks (React, Angular, Vue)
in a physically decoupled way
without losing the value of the Sitecore Experience Platform

© 2018 Sitecore User Group Conference India and its respective speakers. All rights reserved. 10
 Sitecore JSS Connected Mode

What you need :

Sitecore 9 rev. 171219 or later
Active Subscription License
JSS server packages

© 2018 Sitecore User Group Conference India and its respective speakers. All rights reserved. 11
 What is Headless CMS ?

© 2018 Sitecore User Group Conference India and its respective speakers. All rights reserved. 13
 Traditional CMS

4.png con con con

Content Content
Content Creation Content Delivery
Management Presentation

© 2018 Sitecore User Group Conference India and its respective speakers. All rights reserved. 14
 Headless CMS

4.png con con con

Content
Content Creation API JSON
Management

© 2018 Sitecore User Group Conference India and its respective speakers. All rights reserved. 15
 Headless Sitecore

4.png con con 9.png

Content
Content Creation Layout Service JSON
Management

© 2018 Sitecore User Group Conference India and its respective speakers. All rights reserved. 16
 Sitecore 9 Layout Service

© 2018 Sitecore User Group Conference India and its respective speakers. All rights reserved. 17
 Sitecore Layout Service

o REST endpoint which provides data for Sitecore

JSS apps
o Serialize and deliver placeholders, components
and associated content (datasources) and JSON
from page-level items to any client (JS, Xamarin,
native mobile)
o Sitecore MVC-based, so Tracker is enabled
(personalization and MV testing works)
o Respects rendering caching settings by caching
JSON fragments

© 2018 Sitecore User Group Conference India and its respective speakers. All rights reserved. 18
 Supported JS UI libraries & frameworks

React JS

Angular JS

VUE.JS

React Native

© 2018 Sitecore User Group Conference India and its respective speakers. All rights reserved. 19
 Wake Up!! Almost There!!!

© 2018 Sitecore User Group Conference India and its respective speakers. All rights reserved. 20
Starting Your JSS Project

21
 JSS Application Modes
For Development:

Disconnected Dev Mode Connected Dev Mode Integrated Mode

o Rendering performed by o Rendering performed by
browser browser
o Data comes from local o Data comes from Sitecore via
LayoutService API
.json/.yaml files
o Development against Sitecore
o No Sitecore instance needed Instance
o Rendering performed by both
browser & server
o Data comes from Sitecore
LayoutService via in-process
transport

For Demo: For Production:

Static Browser Rendering Mode -Integrated Mode

o Rendering performed by browser -Headless server-side rendering

mode
o Data comes from local .json files
-Headless browser rendering mode
o No Sitecore instance needed

© 2018 Sitecore User Group Conference India and its respective speakers. All rights reserved. 22
 Code First Workflow

FE DEV ENV. INTEGRATED ENV.

o Any OS, Any IDE o Sitecore with JSS
jss deploy package
o Completely unplugged
o JS bundle
o npm packages
o Manifest import:
o Local content mocks JSS APIs via HTTP
• templates
o Manifest definitions • content items
• layout details
• rendering items

© 2018 Sitecore User Group Conference India and its respective speakers. All rights reserved. 23
 Sitecore First Workflow

SITECORE ENV. FE DEV ENV.

o Sitecore with JSS.Server o Any OS, any IDE
o Create data templates, JSS APIs via HTTP o Add npm packages
renderings, content and (placeholders, field
page-level items components)
o This defines contract o Connect to JSS APIs

© 2018 Sitecore User Group Conference India and its respective speakers. All rights reserved. 24
 Code-first Vs Sitecore-first

Code-first Sitecore-first
No Sitecore Instance Needed Running Sitecore Instance Needed
Starts with FE Project Starts with Defininig Sitecore
Content/Templates/Rendering
Best for : SPAs, Campaign pages,
etc Best for : Larger/Complex projects

© 2018 Sitecore User Group Conference India and its respective speakers. All rights reserved. 25
Closer Look at The Demo
 Roadmap

o Preview 4 (in progress)

• Moving away from Sitecore.Ship for app deployment
• Enhancing rendering level JavaScript integration
• 9.0 Update-2 compatibility
• Reach 16.3 support

o Generally available with next major product release

(expected in fall of this year)

© 2018 Sitecore User Group Conference India and its respective speakers. All rights reserved. 27
Questions ?

29
 Thank you to our Sponsors

© 2018 Sitecore User Group Conference India and its respective speakers. All rights reserved.