The document discusses JSS (Sitecore JavaScript Services) and Helix principles in the context of a real project. It provides an overview of JSS and Helix, describes how the speaker's organization implemented their first JSS site using a contract-first approach and Helix principles, and offers tips and tricks including using custom rendering content resolvers and optimizing the Layout Service response.

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

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

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

4. 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
Sitecore User Group Belarus 26.03.2019

5. 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
Sitecore User Group Belarus 26.03.2019

6. 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.
Sitecore User Group Belarus 26.03.2019

7. 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.
Sitecore User Group Belarus 26.03.2019

8. 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.
Sitecore User Group Belarus 26.03.2019

9. JSS Elements
Sitecore User Group Belarus 26.03.2019

10. Sitecore Integration and Data Flow
Sitecore User Group Belarus 26.03.2019

11. JSS Development workflows
• Code-first
• Sitecore-first
Sitecore User Group Belarus 26.03.2019

12. JSS Development workflows
• Code-first
• Sitecore-first / Contract-first
Sitecore User Group Belarus 26.03.2019

13. JSS application modes
• Disconnected developer mode
• Connected developer mode
• Integrated mode
• Headless server-side rendering mode
• API-Only Mode
Sitecore User Group Belarus 26.03.2019

14. 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 User Group Belarus 26.03.2019

15. Sitecore Helix
Sitecore User Group Belarus 26.03.2019

16. Sitecore User Group Belarus 26.03.2019

17. New We are you website
• Sitecore 9.0.2
• JSS 11.0
• Sitecore/contract-first
• Headless server-side rendering mode
• React
• Helix principles
Sitecore User Group Belarus 26.03.2019

18. Sitecore & JSS versions
• Sitecore 9.0.2
• JSS TP 4
• Sitecore 9.0.2
• JSS 11.0
Sitecore User Group Belarus 26.03.2019

19. Latest versions
• Sitecore 9.1
• JSS 11.0.2
Sitecore User Group Belarus 26.03.2019

20. Choosing the right JavaScript framework
Sitecore User Group Belarus 26.03.2019

21. How to organize source code
Sitecore User Group Belarus 26.03.2019

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

23. Code-first or Contact-first
Sitecore User Group Belarus 26.03.2019

24. Code-first
Sitecore User Group Belarus 26.03.2019
• 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

25. Code-first
Sitecore User Group Belarus 26.03.2019

26. Contract-first
Sitecore User Group Belarus 26.03.2019
• 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)

27. Our Contract-first approach
Sitecore User Group Belarus 26.03.2019
• 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

28. Sitecore User Group Belarus 26.03.2019

29. So what are Rendering Content Resolvers?
Sitecore User Group Belarus 26.03.2019
• 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

30. Rendering Content Resolvers from the box
Sitecore User Group Belarus 26.03.2019
• 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

31. Customizing Rendering Content Resolvers
Sitecore User Group Belarus 26.03.2019

32. Sitecore User Group Belarus 26.03.2019

33. So what was our choice
Sitecore User Group Belarus 26.03.2019
• Custom Rendering Content Resolvers for both Dataources & Rendering
Parameters
• Convert GlassMapper models to JSON via AutoMapper

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

35. Extending Context Data Returned by the
Layout Service
Sitecore User Group Belarus 26.03.2019
• 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

36. Sitecore User Group Belarus 26.03.2019

37. How to optimize Layout Service response
Sitecore User Group Belarus 26.03.2019
• Remove context item fields from response
• Remove rendering parameters from response
• Optimize JSON serialization

38. Sitecore User Group Belarus 26.03.2019

39. Injecting JSS into Helix-based project
Sitecore User Group Belarus 26.03.2019
• One Foundation module for global customizations
• Placing Custom Rendering Content Resolvers & Layout Service Extensions
on Feature module level

40. Sitecore User Group Belarus 26.03.2019

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

42. Tips & tricks: be careful with Proxy mode
Sitecore User Group Belarus 26.03.2019

43. Tips & tricks: customize you component
factory JavaScript
Sitecore User Group Belarus 26.03.2019

44. Tips & tricks: install JSS server via SIF
Sitecore User Group Belarus 26.03.2019

45. Tips & tricks: install JSS via SIF
Sitecore User Group Belarus 26.03.2019

46. Tips & tricks: front-end developer can connect
his app to Test environment layout service
Sitecore User Group Belarus 26.03.2019

47. Tips & tricks: use NuGet
Sitecore User Group Belarus 26.03.2019

48. Tips & tricks: use NuGet
Sitecore User Group Belarus 26.03.2019
sitecore.myget.org

49. JSS docs
jss.sitecore.com

50. JSS in Slack
sitecorechat.slack.com
#JSS

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

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

53. Anton Kuryan
• dobryak.org

54. Sitecore User Group Belarus 26.03.2019

55. Sitecore User Group Belarus 26.03.2019

56. Sitecore User Group Belarus 26.03.2019