Sitecore JavaScript Services Immersion - Lessons Learned

A presentation at Sitecore User Group Conference (SUGCON) in in Bengaluru, Karnataka, India 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

Getting Started - Customizing CLI

Getting Started - Customizing CLI

⚠️ Customizing CLI

⚠️ Customizing CLI

⚠️ Customizing ‘jss scaffold’ - Demo

Getting Started - Project Structure

Getting Started - Project Structure

‘jss scaffold’ + project structure

‘jss scaffold’ + project structure

Component Factory

Component Factory

Component Factory

Component Factory

Lessons Learned

Lessons Learned

Getting Started

Getting Started

Manifest API – adding content

Manifest API – adding content

Lessons Learned

Lessons Learned

Getting Started - Debugging techniques

Getting Started - 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

Accelerated Development With React Modules

Accelerated Development With React Modules

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

Accelerated Development With React Modules

Accelerated Development With React Modules

🌈 Themes

🌈 Themes

styled-components

styled-components

Provide theme

Provide theme

Consume theme

Consume theme

Theme - Demo

Accelerated Development With React Modules

Accelerated Development With React Modules

react-spring

react-spring

react-spring

react-spring

Lessons Learned

Lessons Learned

Dynamic Content

Dynamic Content

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

Dynamic Content

Dynamic Content

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

Thank you!

Thank you!

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.

Video

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 social media.