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