A presentation at Sitecore User Group Conference (SUGCON) in in London, UK by Anastasiya Flynn
Diving into JavaScript Services – Lessons Learned Anastasiya Flynn Front-End Technical Evangelist @ Sitecore April 4, 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
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
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
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
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
sitecore\config\jss-sandbox.config
GraphQL - Demo • © 2019 Sitecore User Group Conference Europe and its respective speakers. All rights reserved. Please insert a background image that suits your presentation, or leave it empty.
“Context provides a way to pass data through the component tree without having to pass props down manually at every level” – React docs
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’ = 🔥💻🔥
• 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.