A presentation at Sitecore User Group Conference (SUGCON) in in Bengaluru, Karnataka, India by Anastasiya Flynn
Diving into JavaScript Services – Lessons Learned Anastasiya Flynn Front-End Technical Evangelist @ Sitecore May 17, 2019
JavaScript/JSS Evangelist (wat?) Goals:
”One of the primary goals of Sitecore JSS was to add a proper first-class interface for JavaScript developers and enable websites and web apps powered by Sitecore Experience Platform” - Alex Shyba
Official Docs https://jss.sitecore.com/docs Video - Getting Started With JSS https://www.youtube.com/watch?v=IeLqT75N8V0 Video – Build Your First JSS App https://www.youtube.com/watch?v=XNQGsr9_34A&t=3s
Cleaning Up • Removed StyleGuide boilerplate • Removed bootstrap • Removed hardcoded navigation
JSS starting point - empty page
Sandbox requirements
Customizing CLI Project structure Data modeling Debugging techniques
What if I don’t like the project structure generated by ‘jss scaffold’? • ‘jss scaffold’ drives files structure of components • Default convention is \src\components\ComponentName\index.js • This file structure is important – used to generate the Component Factory • If you update how files are generated by ‘jss scaffold’, you may need to update how scripts\generate-component-factory.js generates the Component Factory
How it works • The component factory is a mapping between a string name of a Sitecore rendering and a React component instance • By default, component factory registers components that follow the \src\components\ComponentName\index.js convention • Injected as prop into SitecoreContext in AppRoot • To change how component factory is generated, update scripts\generatecomponent-factory.js • Use case for customization: importing components from node_modules
Why I like the default src structure
Customizing CLI & Project Structure
Customizing CLI Project structure Data modeling (selected) Debugging techniques
manifest.addRoute()
manifest.addContent()
Data Modeling • Need to be explicit about item role when declaring item • Some manifest functions called by OOTB JSS scripts • More info: http://tinyurl.com/y28jpmlg
Debug JSS apps with breakpoints in VSCode
jss startWhen you may want to use console.log() • Debugging components in connected mode • Debugging errors during build
Build error Search for error Add logging
Debugging Techniques • Use “Chrome debugger” VSCode extension to enable breakpoints • Use “React developer tools” Chrome extension to inspect values passed to component props • When all else fails, use console.log() for instant results
Static content Theming Modular components Animations
Static content (selected) Modular components (selected) Theming Animations
https://rebassjs.org/ Why it rocks • Single command installation • 8 foundational UI components • Super small (~1KB) • Responsive, themeable style props • Support for styled-components 💅 • Extensible
Why it rocks (continued) • Takes static data as props and converts to styled UI elements – perfect for usage in a CMS
sitecore\definitions\components
Header.sitecore.js
data\routes\events\en.yml
src\components\Header\index.js
Static content Modular components Theming (selected) Animations
What constitutes a theme? • Brand colors • Fonts and text size • Device breakpoints • Whitespace
https://www.styled-components.com/ Why it rocks • Single command installation • Automatic critical CSS • Only injects styles of components that are used on the page • Works with code splitting • Unique class names avoid collisions • Dynamic styling • Worry-free deletion of obsolete CSS • Improves modularity of components • Takes static data as props and converts to CSS – perfect for usage in a CMS
src\Layout.js
src\components\HeaderContainer\Background.js src\components\SearchResults\SearchResultTiles.js
Static content Theming Modular components Animations (selected)
https://www.react-spring.io/ Why it rocks • Single command installation • Covers most UI-related animation needs • Natural-looking animations • Cross-platform • Supports render props and hooks • Takes static data as props and converts to animations – perfect for usage in a CMS
src\components\SearchResults\index.js
Accelerated development with React modules • Use withSitecoreContext() helper to change rendering behavior by page state • Invisible fields editable via ‘edit fields’ ribbon button • React libraries integrate smoothly into JSS • Useful libraries for improving modularity and accelerating UX development • react-rebass • styled-components • react-spring
Keyword searches via GraphQL Injecting GraphQL data into Layout Service
Keyword searches via GraphQL (selected) Injecting GraphQL data into Layout Service
sitecore\config\jss-sandbox.config
“Context provides a way to pass data through the component tree without having to pass props down manually at every level” – React docs
Keyword searches via GraphQL Injecting GraphQL data into Layout Service (selected)
sitecore\definitions\components\Navigation.sitecore.js src\components\Navigation\index.js
Dynamic Content • Try out the OOTB GraphQLqueries in GraphiQL GUI • Use React Context API to orchestrate a search page • Use ‘graphQLQuery’ field on rendering definition to inject data into Layout Service
Final lesson learned ‘jss deploy’ + ‘jss start:connected’ = 🔥💻🔥
Want more JSS immersion? • Follow #SitecoreJSS and @AnastasiyaFlynn on Twitter • Check out https://www.codealamodeblog.com/jss-sandbox/
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.
The following resources were mentioned during the presentation or are useful additional information.
Repository containing all the source code shown in the presentation.
Blog posts related to building the sandbox that was presented in this session.
Sitecore JavaScript Services documentation and Quick Start guide
Rob Earlam walks through some of the key headless developer concepts of Sitecore JavaScript Services (JSS).
Rob Earlam goes through the steps to create your very first headless application with Sitecore JavaScript Services (JSS).
Small React library with foundational components.
Library for managing CSS at the component level.
React animation library.
Here’s what was said about this presentation on social media.
for free. You
can too.