Three key improvements we made in SXA Presented by: Adam Najmanowicz Mark van Aalst Date: November 5, 2019
A presentation at Sitecore Symposium 2019 in November 2019 in Orlando, FL, USA by Mark van Aalst
Three key improvements we made in SXA Presented by: Adam Najmanowicz Mark van Aalst Date: November 5, 2019
The Fine Print This presentation contains forward looking statements about products and services not yet released by Sitecore. Our product and service offerings, future updates or other planned modifications are subject to ongoing evaluation by Sitecore and subject to change. This information is provided without warranty of any kind, express or implied. Customers who purchase Sitecore offerings should make their purchase decision based upon features that are currently available. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
It has been a while since we talked #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
Highlights 1.8 Component rendering in rendering variants Bootstrap 4 New wireframe theme Wireframe and grayscale mode 1.9 Rule based paged design Content Hub DAM integration JSS Integration Component creation wizard #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
Sitecore Implementation Approaches Sitecore Custom Sitecore SXA Sitecore JSS Fully customizable, integrated and scaled solutions on a .NET MVC core Drag-and-drop componentry extended to meet business needs or designs for accelerated builds Fully fledged headless Sitecore solutions made through JavaScript frameworks
Sitecore Implementation Approaches JSS Tenant / JSS Site Sitecore SXA Sitecore JSS Drag-and-drop componentry extended to meet business needs or designs for accelerated builds Fully fledged headless Sitecore solutions made through JavaScript frameworks
Sitecore Implementation Approaches JSS Tenant / JSS Site Sitecore SXA Sitecore JSS Drag-and-drop componentry extended to meet business needs or designs for accelerated builds Fully fledged headless Sitecore solutions made through JavaScript frameworks
Sitecore JSS & SXA Functionality • Fully integrated with JSS and allows for scaffolding and hosting JSS Apps within SXA/JSS Tenants and Sites. • Full separation of presentation from content • • Partial Designs Page Designs • Enterprise level management of JSS Apps including • • • • • • Shared and page relative data sources Cross site content sharing Cross-site presentation sharing using Page Designs and Partial Designs Component reusability across sites - tenant scoped components Cross-site linking local:, page:, code:, field: data sources syntax Sitecore SXA Sitecore JSS
SXA 1.10 #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
SXA 9.3 #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
Additional search components #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
Additional search filter components SXA 9.3 features two additional search focused components: • Aggregated facet filter — enables the creation of facet filter sets, dynamically showing and hiding sub-components based on content available in Search Results. • Facet summary — shows the selected facets and enables the removal of undesired filters from the search context. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
Example: Simple aggregated search filter and facet summary
Search filter components Standard search page © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. #SitecoreSYM
Search filter components The actual component Configuration: Aggregated search filter © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. #SitecoreSYM
Search filter components Applying a filter © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. #SitecoreSYM
Search filter components Facet Summary • Lists all the applied filters from the aggregated search filter • Remove single or all applied filters © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. #SitecoreSYM
Search filter components Facet Summary • Lists all the applied filters from the aggregated search filter • Remove single or all applied filters © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. #SitecoreSYM
Frontend Development #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
JavaScript API documentation • SXA JavaScript APIs are now fully documented • Documentation will be published with 9.3 release #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
The new front-end developer workflow #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
Less files stored in Media Library © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. #SitecoreSYM
Complete front-end workflow revamp Creative Exchange Live tools as NPM packages SXA CLI for theme creation (optional) No unnecessary files in media library Use standard version control for themes Only compiled assets stored in Sitecore © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. #SitecoreSYM
Theme creation Create theme using CLI Theme settings Download base themes as NPM packages Setting up project folder Creative Exchange configuration © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. #SitecoreSYM
Theme creation Create theme using CLI Theme settings Download base themes as NPM packages Setting up project folder Creative Exchange configuration © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. #SitecoreSYM
Theme creation Create theme using CLI Theme settings Download base themes as NPM packages Setting up project folder Creative Exchange configuration © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. #SitecoreSYM
Theme creation Create theme using CLI Theme settings Download base themes as NPM packages Setting up project folder Creative Exchange configuration © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. #SitecoreSYM
Theme creation Create theme using CLI Theme settings Download base themes as NPM packages Setting up project folder Creative Exchange configuration © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. #SitecoreSYM
Demo
Templating Engine #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
Following platform removal of Nvelocity, we wanted to provide a modern, fast, and highly extensible templating engine with SXA 9.3 #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
Introducing Scriban Rendering Time • Infinitely extensible 8000 • Open source 7000 Rendering Memory used 6000 • Performance 5000 • Full language 4000
Hello Scriban Open source, rich templating engine and fullfledged language that will immediately feel familiar to Frontend Developers Very efficient, fast parser and a lightweight runtime Documentation available on GitHub https://github.com/lunet-io/scriban VS Code Extension available SXA specific extensions © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. #SitecoreSYM
Demo
Compare rendering variants output Standard Rendering Variants © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. Scriban #SitecoreSYM
Compare the HTML Standard Rendering Variants © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. Scriban #SitecoreSYM
Compare the definitions Standard Rendering Variants © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. Scriban #SitecoreSYM
Benefits Empowering Frontend Developers Full featured language • Item property encapsulation • Item querying • Personalization enablers • Extensibility with pipelines • Embedded Sitecore objects and functions Performance Full Creative Exchange Support Visual Studio Code extension Workflow enabled © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. #SitecoreSYM
SXA Styleguide • Open-source educational site • Rebuild from scratch, inspired by Showcase • Best practice approach • Only for educational purposes • Based on SXA 9.3 NOT a Sitecore product, therefore not supported #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
Share your feedback now Please take a moment to review this session in the Symposium mobile app: Schedule ‣ Session ‣ Survey Thank you! © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. #SitecoreSYM
Thank you FOR DISCUSSION PURPOSES ONLY. Sitecore Confidential and Proprietary. ©2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
