Sitecore JSS & Helix principles in a real project

JSS & Helix principles
in a real project
Our first
Sitecore Headless website is Live!
26.03.2019Sitecore User Group Belarus

Who am I
Valiantsin Shendzerau
Sitecore developer
7,5 years of Sitecore experience
Sitecore User Group Belarus 26.03.2019

What be will be here today
• A bit of JSS & Helix theory
• How we’ve started our first JSS project
• Which directions were chosen
• How to combine JSS & Helix
• JSS customizations
• Tips & tricks

What you will not hear today
• Front-end tips and tricks
• JSS and GraphQL support
• JSS and Azure deployments
• JSS and Personalization
• JSS and Analytics

What is Headless CMS?
A headless content management system, or headless CMS, is a back-end
only content management system (CMS) built from the ground up as a
content repository that makes content accessible via a RESTful API for
display on any device.

What are the benefits of Headless CMS
• Future-proofs your website implementation, letting you redesign the site
without re-implementing the CMS itself
• Sets frontend developers free from the conventions and structures of the
backend
• Performance: depending on your site's requirements, a headless CMS can
export static HTML to any number of servers. For more dynamic sites, your
servers don't have to manage template/layout work and your front-end code
can do more of the heavy lifting for making the pages more dynamic.
• In the most advanced cases, your website can be packaged and bundled as a
Progressive Web Application (PWA), which can run as a mobile app right from a
user’s home screen
• Technical agnosticism: in theory if you put all the work in place to completely
decouple all of the layers of your applications, you could even drop in a new
CMS and not have to touch any of your client applications. In theory.

What is Sitecore JSS?
Sitecore JavaScript Services (JSS) is a complete SDK for JavaScript developers
that enables you to build full-fledged solutions using Sitecore and modern
JavaScript UI libraries and frameworks.

JSS Elements

Sitecore Integration and Data Flow

JSS Development workflows
• Code-first
• Sitecore-first

JSS Development workflows
• Code-first
• Sitecore-first / Contract-first

JSS application modes
• Disconnected developer mode
• Connected developer mode
• Integrated mode
• Headless server-side rendering mode
• API-Only Mode

Sitecore Helix
Sitecore Helix is a set of official guidelines and recommended practices for
Sitecore Development
With the introduction of Helix, Sitecore now provides a set of architecture
conventions and guidelines that describe how to apply recommended
technical design principles to a Sitecore project
The purpose is to secure implementations in a future-proof way by
architecting them as maintainable and extensible business-centric modules

Sitecore Helix

New We are you website
• Sitecore 9.0.2
• JSS 11.0
• Sitecore/contract-first
• Headless server-side rendering mode
• React
• Helix principles

Sitecore & JSS versions
• Sitecore 9.0.2
• JSS TP 4
• Sitecore 9.0.2
• JSS 11.0

Latest versions
• Sitecore 9.1
• JSS 11.0.2

Choosing the right JavaScript framework

How to organize source code

How we’ve organize
source code
• Same repo
• Different folders for React app and
Visual studio solution

Code-first or Contact-first

Code-first
• Early prototyping of a design, where a Sitecore instance may not be
available to deploy to
• The primary developers on the team are JavaScript developers
• Frontend developers will not have their own Sitecore instances
• The needs of the app are relatively simple from a content perspective
• Hiring an external frontend agency to build a JSS app that will later be
integrated to Sitecore

Code-first

Contract-first
• The project is led by experienced Sitecore developers who prefer to work in
Sitecore
• Complex content or backend architectural demands. (e.g. adding a JSS site
into an existing Sitecore instance)
• Sitecore developers are also implementing the JavaScript application.
• JSS apps will be deployed and versioned using the same deployment
process. (e.g. same source repository and CI process)

Our Contract-first approach
• Front-end & back-end developers agrees on component data structure
• Front-end developers are preparing React components via React Storybook
with static JSON data placed in data.json file
• Back-end developers are preparing JSS Json renderings via Content
Resolvers generating same JSON structure

So what are Rendering Content Resolvers?
• By default, when serializing a rendering to JSON, the Layout Service will
populate the rendering contents with the fields of the rendering's
datasource item
• JSS allows you to configure a Rendering Contents Resolver on each
rendering, which determines how a rendering and its associated data are
serialized

Rendering Content Resolvers from the box
• Datasource Resolver - The default behavior, serializes the rendering's
datasource item
• Datasource Item Children Resolver - Serializes the children of the
datasource item
• Context Item Resolver - Serializes the context item instead of the
datasource item
• Context Item Children Resolver - Serializes the children of the context item
• Folder Filter Resolver - Serializes the descendents of the datasource item,
excluding folders

Customizing Rendering Content Resolvers

So what was our choice
• Custom Rendering Content Resolvers for both Dataources & Rendering
Parameters
• Convert GlassMapper models to JSON via AutoMapper

What are the benefits
• Full control over Layout Service response per rendering
• Inject of 3rd party dependencies, e.g. API calls while generating JSON
response
• Helix-adoptable

Extending Context Data Returned by the
Layout Service
• In addition to returning the name, fields, and placeholders/renderings of
the requested item, the Layout Service output also contains a context
property. Like Sitecore.Context in .NET-based Sitecore development, this
property can be used to provide data on cross-cutting concerns and other
information derived from the HTTP Context, such as the current site context
and page mode
• The JSS base class gives you the ability to configure the Layout Service
configuration, JSS app(s), and JSS route(s) for which the processor should
execute

How to optimize Layout Service response
• Remove context item fields from response
• Remove rendering parameters from response
• Optimize JSON serialization

Injecting JSS into Helix-based project
• One Foundation module for global customizations
• Placing Custom Rendering Content Resolvers & Layout Service Extensions
on Feature module level

Tips & tricks: be careful with Proxy mode
• Seems to be the most unstable part of JSS right now
• E.g. 2 major issue was found by our Team during last weeks

Tips & tricks: be careful with Proxy mode

Tips & tricks: customize you component
factory JavaScript

Tips & tricks: install JSS server via SIF

Tips & tricks: install JSS via SIF

Tips & tricks: front-end developer can connect
his app to Test environment layout service

Tips & tricks: use NuGet

Tips & tricks: use NuGet
sitecore.myget.org

JSS in Slack
sitecorechat.slack.com
#JSS

Kam Figy
• kamsar.net
• twitter.com/kamsar

Corey Smith
• www.coreysmith.co
• twitter.com/sitecorey

Sitecore JSS & Helix principles in a real project

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Sitecore JSS & Helix principles in a real project

Similar to Sitecore JSS & Helix principles in a real project (20)

Recently uploaded

Recently uploaded (20)

Sitecore JSS & Helix principles in a real project

Editor's Notes