Three key improvements we made in SXA

A presentation at Sitecore Symposium 2019 in November 2019 in Orlando, FL, USA by Mark van Aalst

Slide 1

Slide 1

Three key improvements we made in SXA Presented by: Adam Najmanowicz Mark van Aalst Date: November 5, 2019

Slide 2

Slide 2

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.

Slide 3

Slide 3

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.

Slide 4

Slide 4

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.

Slide 5

Slide 5

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

Slide 6

Slide 6

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

Slide 7

Slide 7

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

Slide 8

Slide 8

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

Slide 9

Slide 9

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.

Slide 10

Slide 10

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.

Slide 11

Slide 11

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.

Slide 12

Slide 12

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.

Slide 13

Slide 13

Example: Simple aggregated search filter and facet summary

Slide 14

Slide 14

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

Slide 15

Slide 15

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

Slide 16

Slide 16

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

Slide 17

Slide 17

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

Slide 18

Slide 18

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

Slide 19

Slide 19

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.

Slide 20

Slide 20

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.

Slide 21

Slide 21

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.

Slide 22

Slide 22

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

Slide 23

Slide 23

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

Slide 24

Slide 24

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

Slide 25

Slide 25

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

Slide 26

Slide 26

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

Slide 27

Slide 27

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

Slide 28

Slide 28

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

Slide 29

Slide 29

Demo

Slide 30

Slide 30

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.

Slide 31

Slide 31

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.

Slide 32

Slide 32

Introducing Scriban Rendering Time • Infinitely extensible 8000 • Open source 7000 Rendering Memory used 6000 • Performance 5000 • Full language 4000

  • Not just templates - Flow control 3000 2000 1000 0 © 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

Slide 33

Slide 33

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

Slide 34

Slide 34

Demo

Slide 35

Slide 35

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

Slide 36

Slide 36

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

Slide 37

Slide 37

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

Slide 38

Slide 38

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

Slide 39

Slide 39

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.

Slide 40

Slide 40

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

Slide 41

Slide 41

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.