Sitecore JavaScript Services Immersion - Lessons Learned

A presentation at Sitecore User Group Conference (SUGCON) in in London, UK by Anastasiya Flynn

JSS Immersion

JSS Immersion

Hello SUGCON!

Hello SUGCON!

🧠Learning Resources

🧠Learning Resources

Quick Start

Quick Start

✨ Beautiful! ✨

✨ Beautiful! ✨

🛠 My sandbox

🛠 My sandbox

Event Listing - 💻 Demo

Event Listing - Highlights

Event Listing - Highlights

Getting Started

Getting Started

Customizing CLI

Customizing CLI

⚠️ Customizing CLI

⚠️ Customizing CLI

⚠️ Customizing ‘jss scaffold’ - Demo

Project structure

Project structure

‘jss scaffold’ + project structure

‘jss scaffold’ + project structure

Component Factory

Component Factory

Component Factory

Component Factory

Lessons Learned

Lessons Learned

Data Modeling

Data Modeling

Manifest API – adding content

Manifest API – adding content

Lessons Learned

Lessons Learned

Debugging Techniques

Debugging Techniques

🦠 Debugging - VSCode Breakpoints

🦠 Debugging - VSCode Breakpoints

🦠 Debugging - Breakpoints Demo

🦠 Debugging - React Dev Tools

🦠 Debugging - React Dev Tools

🦠 Debugging – console.log()

🦠 Debugging – console.log()

🦠 Debugging – console.log()

🦠 Debugging – console.log()

Lessons Learned

Lessons Learned

Accelerated Development With React Modules

Accelerated Development With React Modules

Static Content & Theming

Static Content & Theming

react-rebass

react-rebass

react-rebass

react-rebass

Building modular components

Building modular components

Building modular components

Building modular components

Editing fields in Experience Editor

Editing fields in Experience Editor

withSitecoreContext() helper

withSitecoreContext() helper

🌈 Themes

🌈 Themes

styled-components

styled-components

Provide theme

Provide theme

Consume theme

Consume theme

Theme - Demo

react-spring

react-spring

react-spring

react-spring

Lessons Learned

Lessons Learned

Dynamic Content

Dynamic Content

GraphQL - Configuration

GraphQL - Configuration

GraphQL - Demo

GraphQL – Lessons Learned

GraphQL – Lessons Learned

React context API

React context API

React context - Demo

Inject GraphQL data into Layout Service

Inject GraphQL data into Layout Service

Inject GraphQL data into Layout Service

Inject GraphQL data into Layout Service

GraphQL-powered navigation

GraphQL-powered navigation

Lessons Learned

Lessons Learned

Want more JSS immersion?

Want more JSS immersion?

Sponsors

Sponsors

Sitecore is known for delivering superb customer experiences, but Sitecore’s new toolkit, JavaScript Services is more about the developer experience. I am a JavaScript developer, and after I joined Sitecore, I had the pleasure of immersing myself into Sitecore’s JSS SDK. I explored developing in JSS and seeing how it empowers developers - how to manage components, how to debug, how to optimize. I learned JSS by building a sandbox React app that integrates open-source modules. This session shares the lessons I learned from my journey.

Resources

The following resources were mentioned during the presentation or are useful additional information.

Buzz and feedback

Here’s what was said about this presentation on Twitter.