Sitecore Symposium 2018: JSS in Powerful Ways | Perficient Digital

Sitecore Symposium 2018: JSS in Powerful Ways

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

Leave a Reply