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.
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
- Pick and choose what your need
- 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
- Text
- 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
- Will create all of the things you need in Sitecore for a module
- > jss scaffold component-name
- 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
- Gives you caching options
- 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