Sitecore Symposium 2018: JSS in Powerful Ways

Understanding Development Approaches: A Sitecore Outlook

Designing, building, and implementing top-notch experiences not only requires a great deal of planning, strategy, and time – it also requires the right digital experience platform (DXP) and the right development approach for your business needs.

Get the Guide

Adam Weber and Kam Figy of Sitecore showed us how to use JSS in powerful ways including progressive web apps.  PWAs work like a native mobile app and have support for offline mode.

Headless

• What is headless?
  • A fancy way to use a CMS as a content api
• Advantages
  • Decouple content delivery from presentation
  • Multi-channel content delivery
• Disadvantages
  • Lack of Standard CMS author features
  • Deployment complexity

Sitecore JSS

• JSS
  • Pick and choose what your need
    • Headless
    • Layout as data
    • GraphQL api
    • Modern JS framework
    • Can deliver to anything that can read JSON
      • Alexa
      • Console,
      • Mobile apps
      • Ad kiosk
  • Keep all of the Sitecore features
    • Personalization
    • A/B testing
    • Content authoring
    • Events, goals, and outcomes
    • Campaigns
    • Page views
• Layout Services
  • Provides a hierarchical nested JSON of item layout nead of html through a REST endpoint
• GraphQL
  • Customize layout service data
  • Bandwidth efficient

Using Sitecore JSS

• JSS SDK
  • Includes starter projects
  • Default support for
    • Internationalization
    • Routing
    • 404
  • Includes helpers for
    • Text
      • Similar to Html.Glass.Text
      • Enables the ExperienceEditor
    • Enums for item icons
    • Autocomplete for data properties
    • Enums for data template field types
• Disconnected mode
  • Does not require a Sitecore instance
  • MOQs the Sitecore layout service to red content from .yml or JSON files included in your project
  • CLI can use a custom template structure instead of the ones defined in the starter projects
• Connected mode
  • Requires a Sitecore instance
  • Connects to Sitecore layout service to get item and layout data
• Integrated mode
  • App is rendered server side by a Node process controled by Sitecore
  • No app pool recycle after updating JSS apps
• Headless mode
  • App is rendered by a NodeJS server
  • Rendering is decoupled from content delivery servers

JSS CLI Commands

• Create a JSS content module
  • > jss scaffold component-name
    • Will create all of the things you need in Sitecore for a module
      • Data template
      • Rendering
• Connected mode
  • > jss setup
  • > jss deploy app-name -c -d
    • Imports layouts, renderings, templates, and content into Sitecore
  • > jss start:connected

Progressive Web Apps

• A collection of technologies that work together to provide a native app like experience on the web
  • Responsive
  • Touch gestures
  • Push notifications
  • HTTPS
  • Service worker
  • Location
• Lighthouse
  • A chrome plugin that will analyze your site to see if it fits the criteria for a PWA
• Service worker
  • Can see them in the Application/Service Worker tab in Chrome dev tools
  • All of your requests will load from the service worker
    • Gives you caching options
      • Including prefetching content
  • Offline mode
    • Still calls the service work which reads from its cache

JSS was the hot topic at Symposium this year.  I’m really interested in learning more about PWA.  I wonder if these will be come first class citizens on mobile and reduce the difficulty in dedicated mobile development.
Find the rest of my notes from Sitecore Symposium 2018

About the Author

More from this Author