Sxa in action
•Download as PPTX, PDF•
0 likes•359 views
Slides from my session "SXA in action" recorded for and broadcasted during Sitecore Virtual Developer Day 2019
Recommended
Recommended
More Related Content
What's hot
What's hot (10)
Similar to Sxa in action
Similar to Sxa in action (20)
More from Peter Procházka
More from Peter Procházka (8)
Recently uploaded
Recently uploaded (20)
Sxa in action
- 1. SXA in action by Peter Prochazka (tothecore.sk / @chorpo) Log out | Peter Prochazka Peter Prochazka tothecore.sk / @chorpo SXA in action
- 2. SXA in action by Peter Prochazka (tothecore.sk / @chorpo) Log out | Peter Prochazka Overview • What is SXA? • Why to use SXA? • How to use SXA? -> Demo
- 3. SXA in action by Peter Prochazka (tothecore.sk / @chorpo) Log out | Peter Prochazka Quick introduction • Peter Prochazka • Sitecore Solutions Architect at Accenture / Avanade • Experienced in Sitecore for 5 years, ASP.NET for 10+ years • Sitecore Certified Developer (3x) • Sitecore Experience Commerce 9.0 Certified • https://tothecore.sk/ • @chorpo
- 4. SXA in action by Peter Prochazka (tothecore.sk / @chorpo) Log out | Peter Prochazka What is SXA? • SXA = Sitecore Experience Accelerator • Accelerator • For Content Editors • For Developers • For Marketers • For Administrators • Accelerates processes and delivery
- 5. SXA in action by Peter Prochazka (tothecore.sk / @chorpo) Log out | Peter Prochazka What is SXA? • SXA = Sitecore Experience Accelerator • Accelerator • For Content Editors • For Developers • For Marketers • For Administrators • Accelerates processes and delivery
- 6. SXA in action by Peter Prochazka (tothecore.sk / @chorpo) Log out | Peter Prochazka What is SXA? • SXA = Sitecore Experience Accelerator • Accelerator • For Content Editors • For Developers • For Marketers • For Administrators • Accelerates processes and delivery
- 7. SXA in action by Peter Prochazka (tothecore.sk / @chorpo) Log out | Peter Prochazka What is SXA? • SXA = Sitecore Experience Accelerator • Accelerator • For Content Editors • For Developers • For Marketers • For Administrators • Accelerates processes and delivery
- 8. SXA in action by Peter Prochazka (tothecore.sk / @chorpo) Log out | Peter Prochazka What is SXA? • SXA = Sitecore Experience Accelerator • Accelerator • For Content Editors • For Developers • For Marketers • For Administrators • Accelerates processes and delivery
- 9. SXA in action by Peter Prochazka (tothecore.sk / @chorpo) Log out | Peter Prochazka What is SXA? • SXA = Sitecore Experience Accelerator • Accelerator • For Content Editors • For Developers • For Marketers • For Administrators • Accelerates processes and delivery
- 10. SXA in action by Peter Prochazka (tothecore.sk / @chorpo) Log out | Peter Prochazka Why to use SXA?
- 11. SXA in action by Peter Prochazka (tothecore.sk / @chorpo) Log out | Peter Prochazka Why to use SXA?
- 12. SXA in action by Peter Prochazka (tothecore.sk / @chorpo) Log out | Peter Prochazka Why to use SXA?
- 13. SXA in action by Peter Prochazka (tothecore.sk / @chorpo) Log out | Peter Prochazka Why to use SXA?
- 14. SXA in action by Peter Prochazka (tothecore.sk / @chorpo) Log out | Peter Prochazka Demo overview • Microsite with news / press releases: • Toolbox • Components • Page & Partial Designs • Rendering Variants
- 15. SXA in action by Peter Prochazka (tothecore.sk / @chorpo) Log out | Peter Prochazka
- 16. SXA in action by Peter Prochazka (tothecore.sk / @chorpo) Log out | Peter Prochazka “The only source of knowledge is experience.” Albert Einstein
- 17. SXA in action by Peter Prochazka (tothecore.sk / @chorpo) Log out | Peter Prochazka https://tothecore.sk/ https://twitter.com/chorpo http://goodreads.com/chorpo https://linkedin.com/in/chorpo https://doc.sitecore.net/ https://sitecorechat.slack.com/ https://sitecore.stackexchange.com/
Editor's Notes
- Hi, my name is Peter Prochazka and welcome to my session “SXA in action”. SXA or Sitecore Experience Accelerator is Sitecore module with tremendous features OOTB. These features can help you create content quickly with well-defined information architecture. Let’s look, what I have prepared for you today.
- I will begin my talk describing what is SXA and why you should use it. However, majority of this session will be hands-on and I will show you how SXA works and also how to work with SXA. I will walk you through creation of a small microsite from scratch fulfilling common scenarios and requirements that organizations have when it comes to content and content creation. Even though this session is aimed for developers and content editors, I believe that also marketers and all rest of you will enjoy it nonetheless. Before we jump in, let me quickly introduce myself.
- I am Sitecore Solutions Architect at Accenture / Avanade. I’m experienced in Sitecore for almost 5 years and in ASP.NET more than double that time. I’m three times Sitecore Certified Developer and Sitecore Experience Commerce 9 Certified. I am active blogger and blogging on my website tothecore.sk. I have chosen this domain as I grew up and still happily live with my family in Slovakia. You can also find me on twitter @chorpo. Fun fact – Chorpo is my childhood nickname. Enough about me, let’s jump into our topic.
- As I already mentioned, SXA stands for Sitecore Experience Accelerator. I have highlighted “Accelerator” on purpose because it nicely describes the module in its essence. It’s an accelerator, a framework and not like Habitat, it’s meant to be used as a starter kit. A starter kit that brings all sorts of functionality that developers are usually building from ground up for each and every Sitecore implementation they do. Let’s take a close look on some common roles during Sitecore implementations and how SXA can help them accelerate their work and practices.
- SXA gives around 80 components OOTB for Content Editors . These are visible and selectable from Toolbox and can be used to create content just minutes after provisioning new Sitecore instance with SXA installed. No more waiting for components to be developed and styled at the beginning of the project. If you have content strategy in place, you are good to go creating content with SXA. If content editors lack some components, developers can either create Rendering variants for the existing components or create new components easily for them.
- Developers receive components which are Helix complaint so adding in their own components should be matter of minutes. It brings them also grid system, themes, page and partial designs, rendering variants and lots of other great features and concepts that I will show you in a moment. SXA has Creative Live Exchange functionality which divides frontend and backend development. With its export and import they can work nicely in parallel with their own tooling.
- Marketers will like that components which come with this module are fully personalizable through setting rules. Standard Sitecore A/B testing is also possible without any problem. Pages have OOTB fields to improve SEO and SXA can also generate sitemaps automatically. It is up to marketers whether they need dynamic sitemaps or static ones are just sufficient. Just by changing one setting they can achieve either of them quickly.
- Administrators can easily administer structure of items with multi tenant and multi site features of SXA. SXA adds new commands to create, remove or administer tenants or sites. They can configure sites through SXA Site Manager. They don’t need to create new sites by patching config files like it was in the past which resulted in restarting IIS.
- I have talked about roles so far but SXA also accelerates processes and delivery. Creative Live Exchange speeds up BE and FE collaboration and back and forth roundtrips are not so often anymore. Frontend developers are not dependent anymore on Sitecore tooling and actually they don’t need to even have Sitecore installed on their dev machines like it was without SXA Asset Optimizer minifies and optimizes css and js files for you so you don’t need to care about these anymore Lots of additional enhancements to the Experience and Content Editor ease use of Sitecore for everybody. In Experience Editor there is a special Experience Accelerator toolbar which adds possibility to change field values within Experience Editor. It also lets you work with page and partial designs, set theme and various other activities without switching to Content Editor. On the other hand, in Content Editor you have lots of new commands in context menu. Let’s now look why you should use or start using SXA if I haven’t convinced you so far 😊
- Traditional process of website creation looks usually like this. UX is defined at the beginning. Based on it, UI is made with wireframes, style guides and mockups of elements, components and pages. Front end devs together with backend devs then implement components and page templates based-on requirements. Only after all this is done, content editors can come and start entering content. This usually takes weeks or months. Even though content editors have access to components during this time, it is until very end when they can create “real” pages with content.
- On the other hand, process with SXA is much simpler and done in a way where things are happening in parallel. This is possible as SXA separates structure from design. You have components that generate HTML, but you have themes that apply styling and look & feel to them. You have also lot of components OOTB so content editors don’t need to wait couple of weeks to start creating content. They can create content from Day 1.
- I have already scratched some of the great features of SXA when I was talking how it helps accelerate but let me now go through these features a bit more in detail. SXA has toolbox where you can find many pre-built components grouped by sections. You can find there various types of components such as row and column splitters, page list, promos, map, media components like image and video, social related components, composite types like accordions, tabs, carousels, snippets, just to mention few of them. SXA gives you unified structure (the information architecture) of tenants, sites and items OOTB. It creates site structure where you can store pages, component data, settings, and media items. It’s also ready to be installed on PaaS. It has predefined themes and couple of grid systems to choose from. Bootstrap is default one, but you can pick also Foundation or 960 (citaj nine sixty) Grid. If you would like to use different one, you are free to do it. SXA is easily extensible also in this case. Renderings are mobile first and responsive. There are also special JSON renderings in toolbox that can help you work with Sitecore in more headless fashion. I am really keen to see how JSS and SXA with be integrated in the future. There is only one prerequisite for installing SXA and that is Sitecore PowerShell Extensions or SPE module. You can find this module on Sitecore Marketplace. Let’s take a look what are the page and partial designs and rendering variants.
- A page design in SXA is a selection of partial designs and renderings that help you structure your pages. You can also set up a page structure for specific pages, such as a landing page, events page, product page or press release page. You can use the partial designs to create the design elements of your pages quickly for a consistent style and look & feel. For example, you can create parts of your page once, such as headers and footers, and then reuse them everywhere on your site. You can construct your pages by drag and dropping components directly where you need them. These components are called renderings and they are listed in the Toolbox in the Experience Editor. Rendering variants can make rendering appear differently or they can make it show different content. For example, the list rendering can have different variants for: product list, detailed lists or thumbnails list. As you can see on current slide, Promo rendering can have 2 rendering variants - Promo with Image or just simple Text Promo. For Promo with Image, Image would be in Background and text would be overlaying it. In latter case for Text Promo, image field wouldn’t be shown at all, and title would be emphasized. As I have promised earlier, a demo follows.
- I will create microsite with news & press releases with site specific header and footer. I will show you Toolbox and how to configure and use some of the OOTB renderings or components. I will not write a single line of code because I want to show you what can be achieved with SXA without much effort. I will also create some Page & Partial Designs and Rendering Variants to make same content look different in various places. Let’s head to my Sitecore Instance now…
- We came to the end. I believe that I have showed you lot of great and ready-to-be-used features of SXA in these couple of minutes. As Albert Einstein once said: “The only source of knowledge is experience”. So, when I finish talking in a moment, download and install Sitecore Experience Accelerator if you haven’t done so already and try it out. I can guarantee you won’t regret it or at least you will have some fun 😉
- Information provided in this session should help you embrace SXA much easier and faster. There are also lots of other recordings available online about SXA from Sitecore User Groups, Sugcons or from father of SXA himself Adam Najmanowicz. There is also great documentation on doc.sitecore.net that you can use during your SXA journey. Don’t forget about SitecoreChat on Slack and Sitecore Stack Exchange where you can find lot of Sitecore developers and enthusiasts that can help you with solving your problems or answering your questions. You can check my blog or connect with me through twitter or LinkedIn. If you are on Goodreads, don’t hesitate to add me as your friend so we can share and recommend some good books to read 😉. Thank you for watching this session. Till next time. Cheers.