© 2020 Sitecore User Group Conference Global and its respective speakers. All rights reserved.

May 1, 2020

#sugcon

JSSYour data, your way

Nick Hills // Sitecore MVP // Principal Developer - Valtech

2

What’s the plan?

• Out the box Sitecore data

• ‘Zero Sitecore deployments’

• Adding custom data

• Optimization techniques

• Monitoring the system

Building a page using JSS

© 2020 Sitecore User Group Conference Global and its respective speakers. All rights reserved.

Consuming App

SitecoreLayout Service / GraphQL

AWS Lambda

Azure Functions

System X

Customer

© 2020 Sitecore User Group Conference Global and its respective speakers. All rights reserved.

‘Out the box’ Sitecore dataAka my first JSS page

Layout ServiceChained Content

Resolvers

Content Resolvers

Context Extensions

Graph QL

Dynamic Content

Resolvers

Consuming App

Sitecore

AWS Lambda

Azure Functions

System X

• Please insert a background image that suits your presentation,

or leave it empty.© 2020 Sitecore User Group Conference Global and its respective speakers. All rights reserved.

Contents Resolvers

• Create a Json Rendering and attach a Rendering Contents Resolver

• In solution inherit RenderingContentsResolver

• Customize behaviour in c#

return new{

name = "Contents Resolvers",sitecoreDeploymentNeeded = true,sitecoreChanges = new[] { "code", "content" },

};

• Please insert a background image that suits your presentation,

or leave it empty.© 2020 Sitecore User Group Conference Global and its respective speakers. All rights reserved.

Context Extensions

• Use cases

• Navigation // Header // Footer

• In solution inherit JssGetLayoutServiceContextProcessor

• Filter behaviour in config or c#

return new{

name = "Context Extensions",sitecoreDeploymentNeeded = true,sitecoreChanges = new[] { "code", "config" },

};

Layout Service Variables Querystring / Context

• Site (sc_site)

• Route (item)

• Language (sc_lang)

• Database (sc_database)

• Please insert a background image that suits your presentation,

or leave it empty.© 2020 Sitecore User Group Conference Global and its respective speakers. All rights reserved.

Chained Contents Resolvers

• Create a Json Rendering and attach a Rendering Contents Resolver

• Merge the default output with your custom content

return new{

name = "Chained Contents Resolvers",sitecoreDeploymentNeeded = true,sitecoreChanges = new[] { "code", "content" },

};

Demo time

• Please insert a background image that suits your presentation,

or leave it empty.© 2020 Sitecore User Group Conference Global and its respective speakers. All rights reserved.

Zero* Sitecore deploymentsYou what?!? I thought deploying Sitecore was easy?

* Code free deployments

• Please insert a background image that suits your presentation,

or leave it empty.© 2020 Sitecore User Group Conference Global and its respective speakers. All rights reserved.

Integrated Graph QL

• Configure a GraphQL endpoint

• Create a Json Rendering and set a Component GraphQL Query

return new{

name = "Integrated Graph QL",sitecoreDeploymentNeeded = false,sitecoreChanges = new[] { "content" },

};

• Please insert a background image that suits your presentation,

or leave it empty.© 2020 Sitecore User Group Conference Global and its respective speakers. All rights reserved.

Connected Graph QL

• Configure a GraphQL endpoint

• Create queries in your consuming application

return new{

name = "Connected Graph QL",sitecoreDeploymentNeeded = false,sitecoreChanges = new[] { },

};

• Please insert a background image that suits your presentation,

or leave it empty.© 2020 Sitecore User Group Conference Global and its respective speakers. All rights reserved.

Dynamic Content Resolvers

• Create a Json Rendering and set a Parameters Query

• [--datasource:fields:*]

• [/sitecore/content/jss-your-data-your-way/Datasource Examples/Datasource Example:fields:*]

• [/sitecore/content/Home:fields:Text->Remapped Text]

• Casting, Field remapping, Wildcards, Children, Lists, Linked items, Aggregation

return new{

name = "Dynamic Content Resolvers",sitecoreDeploymentNeeded = false,sitecoreChanges = new[] { "content" },

};

Demo time

Performance

considerations

Consuming App

SitecoreLayout Service / GraphQL

AWS Lambda

Azure Functions

System X

Customer

Caching options

SSR Consuming App

SitecoreLayout Service / GraphQL

AWS Lambda

Azure Functions

System X

Customer

Monitoring the system

1 2 3 4

1. 200 Rates, 4XX Rates, 5XX Rates, Request counts2. Call times (ms - av, max, %iles), site/lang/url breakdown,

cached vs uncached rates3. 200 Rates, 4XX Rates, 5XX Rates, Request counts4. Page load times & other browser metrics

Monitoring the system

• Please insert a background image that suits your presentation,

or leave it empty.© 2020 Sitecore User Group Conference Global and its respective speakers. All rights reserved.

”–

JSS – Your Data, Your Way

Nick Hills

1. Any source of data is viable

2. Caching is your friend

3. Monitor the seams

https://github.com/boro2g/JssYourDataYourWay

© 2020 Sitecore User Group Conference Global and its respective speakers. All rights reserved.

I am a proud community member! Please contact me on the following handles:

sitecorechat.slack.com twitter sitecore.stackexchange.com

nickhills @boro2g boro2g

• Please insert a background image that suits your presentation,

or leave it empty.© 2020 Sitecore User Group Conference Global and its respective speakers. All rights reserved.

Breakroom / Chillout lounge

https://bit.ly/VirtualSugcon2020

Password: virtual20

Please do not share this slide or the password to the Breakroom on social media. We are concerned about Zoombombing/trolls.

• Please insert a background image that suits your presentation,

or leave it empty.© 2020 Sitecore User Group Conference Global and its respective speakers. All rights reserved.

Donate

https://virtual.sugcon.events/Donate

Thank youand stay safe folks!

nick.hills@valtech.com

blog.boro2g.co.uk