Sitecore

Sitecore Symposium 2018: Development Workflow with JSS

Istock 174857074 Featured Image
Sitecore - Understanding Development Approaches: A Sitecore Outlook
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

Alex Shyba from Altola.com showed us how to go from design to deployed with JSS and React.

Design

  • Component based design systems
    • Material UI
    • Bootstrap
  • Bring functional and visual consistency to your designs
  • Need a single source of truth
  • React is agnostic to rendering target
  • React integrates with Sketch
  • FramerX
    • Drag and drop React UI builder
    • Does not generate code
  • React Studio
    • Real time data in your UI builder
    • Code generation

Front-end Development

  • Component composition engine for React, Vue, and Angulr
  • Sprinkles of Sitecore
    • When translating from pure React to JSS
      • You have to change your components from being statically placed to using placeholder names
      • Import sitecore-jss-react
      • Add your components to the placeholder in .yml files in disconnected mod
      • Register components in manifest from JSS

CMS Integration

  • > jss setup
  • Creates all your items in Sitecore
  • ExperienceEditor enabled for editing content
    • Calls out to React app to get the UI then to JSS to get the data then serves to ExEd

App Deployment

  • Deploy anywhere
    • Content is served by Sitecore
      • Azure
      • AWS
    • Content delivery server
      • Good for static content
      • Caches the JSON output from the server

Find the rest of my notes from Sitecore Symposium 2018

About the Author

More from this Author

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to the Weekly Blog Digest:

Sign Up
Categories