Sitecore Experience Accelerator (SXA) Basics

Challenge:

Howdy Friends, I’m really excited to share my first SXA post with you!

SXA 1.0 was launched in 2016 and SXA 9.3 (Yes, Sitecore has changed SXA versioning!) has been released on November 2019.

I just explored little bit when it was launched, But I had my own apprehensions about It’s adoption due to unclear Sitecore licensing process [at-least to me] and lot of other things. But as following quote says:

“All change is hard at first, messy in the middle, and so gorgeous at the end.” – Robin Sharma.

I think this is true for SXA as well. SXA 9.3 is gorgeous version! [That doesn’t mean past version has been hard/messy 😉 ]

I wanted to learn SXA, But there were lot of resources on the web posted by great people. As a newbie, I was confused. From where to start? [You as well!?]

Image result for confused kid with options — Image Credits : https://www.successunlimited-mantra.com/index.php/blog/what-to-do-when-confused

Or, If you have following questions in your mind, then this post is for you!

Where to learn SXA basics?
What is SXA?
Why I should learn and adopt SXA?
How can I be expert in SXA?
What is co-relation between Sitecore Custom, Sitecore SXA, and Sitecore JSS? Are they competing development methodologies or complementing each other?
We are starting new project — It should be on SXA or Custom?
How SXA development is different than my earlier Sitecore Custom Development (Sitecore WebForms/MVC Development)?
I’m working on Sitecore since long time, So, whatever I’ve learnt on Sitecore platform till this point of time will be of no use?
Our FED-BED integration process will be impacted by SXA?
All my FED team need to learn SXA?
All my FED team need to have Sitecore instance in local?
BED Developer Can’t I work ahead of FED Developers?

Wow, There are lot of questions. I might not be able to cover all of them in this post. But I will try to share SXA fundamentals and try to answer few questions and by end of this post my goal will be that you will be self sufficient to find your own answers!

Quotable Quote:

“Give a man a fish and you feed him for a day. Teach him how to fish and you feed him for a lifetime

Solution:

Let’s follow the W-W-H (What, Why, How) learning framework for SXA.

What is SXA?

Let’s refer Sitecore’s definition : https://doc.sitecore.com/users/sxa/93/sitecore-experience-accelerator/en/introducing-sitecore-experience-accelerator.html

Web development teams use Sitecore Experience Accelerator (SXA) to speed up the production of websites and to reuse components, layouts, and templates across a variety of sites.

SXA separates structure from design, so front-end designers, creative designers, content authors, and developers can work in parallel and you can deploy and maintain multiple sites quickly and cost effectively. Once a basic user experience plan is in place, everyone can get started on the platform. For example: the content author can start entering the content in the wireframe environment, while the front-end developer works on the theme, and the developer sets up the data templates.

Before we go in further details about SXA. Let’s understand type of Sitecore Development:

Image credits : http://www.pieterbrinkman.com/2019/12/02/sitecore-9-3-whats-new-blog-series/

Custom : If you have been doing Sitecore Development since long time, then you must have seen Sitecore framework ivolved from XSLT [You are getting old? :-)], to Web Forms and MVC. We’ve taken a big leap in development from XSLT to MVC for sure. But as a human we always want to do better than yesterday. Sitecore industry folks also wanted to make product better for the full eco system. Developers across different companies/projects/agencies have been spending more time on building those similar components – Header, Footer, Menu etc. rather than focusing on core business challenges and this was impacting “Time to market” for business. Everyone was looking for something better and there were few accelerators built by few companies for either their in-house use or as a product. But Configide‘s Zengarden was promising. It got adopted by lot of companies and community members. Sitecore also noticed that and adopted SXA in Sitecore’s offerings!
SXA : SXA stands for Sitecore Experience Accelerator. As name suggests, it helps you to speed up your website development. SXA comes with over fifty components that can be completely customized for the needs of your brand.
Sitecore JSS : For headless development.

Refer following diagram which depicts SXA benefits :

SxA Website development process
User Experience
Visual Design
Frontend Development
Backend Development
Content Entry
Time to market

Let’s try to understand above diagram with an example – Company Contoso Inc. acquired new brand and would like to spin up a new website. They asked two different teams to develop website using different approaches. Sitecore Custom vs Sitecore SXA.

This is how overall process looks like:

**Sitecore custom approach – Looks more like old manufacturing assembly approach. Where each department can work on module, once last department completes their work.**

**SXA approach – Looks more like round-table approach. Where everyone can work collaborate together!**

As you rightly guessed, SXA team could spin up new website faster than Custom Development team.

ALERT! — If your Maths is good and you are a business stakeholder, Then please don’t create formula that SXA site should take 5 times less than Custom Development approach. It might not work that way. As each Site has different features, integrations and complexity. Please let your implementation team come up with proposed solution and time it needs to build. You also need to consider some learning curve for this new tool set. But relatively SXA should take less time than Custom. But how much that all depends on lot of factors. Which your implementation team will be able to share with you.
Also, depends on your site’s complexity, you might need to divide some work between Design, FED and BED team.

If you want to read more about SXA, I strongly recommend you to read this doc : https://doc.sitecore.com/users/sxa/93/sitecore-experience-accelerator/en/introducing-sitecore-experience-accelerator.html

As you might have noticed from architecture diagram. Lot of other Sitecore pieces are old e.g. MVC, WFFM, Presentation etc. You must have noticed Sitecore Powershell module in architecture diagram.

Powershell module is heart of SXA.

Why SXA?

I believe by this time you might have already been clear with “Why SXA?” and you must be saying “Why not SXA?” 🙂 But still if you are someone who needs more reasons before deciding. I would recommend you to read following posts:

If you reached thus far and have heard following feedback from your colleagues/friends about SXA and hesitant to use SXA with that feedback or not:

Front-end and Back-end integration is challenging.
It’s cumbersome to make rendering variants.
Front-end markups can’t be exactly applied in Back-end.
Export and Import process of Creative exchange is cumbersome when project is complex and team is big.
It’s good for small sites. But if Site has complex custom design. Then customization takes lot of time.

This all is great feedback and learnings. Sitecore product team have been listening and working on it, and came up with SXA 9.3 version. Which has major updates. Two of my favorites are:

Scriban templates support – This is huge and solves two main challenges – FED-BED integration and makes customization super simple and extensible!
Front-end and Back-end integration workflow has been revamped : Raw FED Assets has been moved to file system rather than media library. So, your FED team mates can work in isolation and larger team can work together. Only compiled assets will be stored in Sitecore media library.

I will not spend much time writing about SXA 9.3 as lot of great souls have already written/shared about it:

What!? You are still not convinced to use SXA and need to see more reasons to use SXA over Custom Development?

Let me share few examples using which you can compare Custom and SXA way to do things and understand how efficient SXA is:

SXA Caching Options : Read this section : https://doc.sitecore.com/developers/sxa/93/sitecore-experience-accelerator/en/set-sxa-caching-options.html – Allows you to apply HTML Caching at Site, Component, Placeholder level along with donut caching.
Source field report OOTB : https://doc.sitecore.com/developers/sxa/93/sitecore-experience-accelerator/en/run-a-source-field-report-to-set-the-data-source-context.html
Helps you choose option : https://doc.sitecore.com/developers/sxa/93/sitecore-experience-accelerator/en/flowchart-to-determine-whether-to-create-a-custom-rendering.html
Easy cloning : https://doc.sitecore.com/developers/sxa/93/sitecore-experience-accelerator/en/clone-an-sxa-site.html – You can create pattern library and clone it as per your need.
SXA Site manager : https://doc.sitecore.com/developers/sxa/93/sitecore-experience-accelerator/en/manage-multiple-sites-with-the-sxa-site-manager.html – No more restarts for adding/deleting website!
Standard Security and roles management : https://doc.sitecore.com/developers/sxa/93/sitecore-experience-accelerator/en/security.html

Hopefully you must have been convinced to use SXA by this time. If not, then please drop your use case and we can try to understand more about it :-). It might be possible that custom development might be more efficient for you to use than SXA.

Please remember technology and tools can’t solve all problems!

How to use SXA?

If you reached thus far. Then it means you are all charged up to learn SXA and looking for sources from where you can start learning basics of SXA.

I will share my learning sources and approach which I followed. Feel free to tweak it as per your need.

Sitecore e-learning courses : I was very impressed with Sitecore training course’s new design. If you are developer, you might not find lot of value from Development Point of view. But these courses are great to have SXA’s fundamental understanding. You can follow your suitable approach to learn SXA. I learnt following two courses:
1. Introduction to Sitecore® Experience Accelerator 9
2. Fast-Track Design in Sitecore® Experience Accelerator 9
Short, unofficial, ad-hoc, Sitecore SXA tutorials : This is second great source to learn SXA. Lot of great videos have been posted here. But please don’t get overwhelmed with all videos. To learn SXA, you no need to go through all videos. To keep things simple, go through some basic videos – especially – How to create site, Page Design, Partial design, Rendering variants etc. : https://www.youtube.com/channel/UCn_P819AlbNv_maQCqrKp4g/videos
Sitecore Documentation : https://doc.sitecore.com/developers/sxa/93/sitecore-experience-accelerator/en/setting-up-and-configuring.html – This is another great source to learn more about SXA features. I would really like to shout-out documentation team for doing great job in documenting SXA as well as some of the recent document updates have been really great! – Looks like, Sitecore documentation team is going in right direction.
Practice, Practice, Practice : Nothing can beat this step. You must need to do hands-on with SXA concepts. As there are lot of concepts to explore and you can’t remember those, until you practice.
1. Install SXA : If you are using Sitecore Install Assistant then installing SXA is super easy.
2. Create one website : Create one simple website, which has header, footer and some pages.
3. Create new theme using SXA CLI and try to create few rendering variants with or without Scriban
4. If you have been working with Sitecore Custom Development since long time, and have been aware about some best practices like Standard values, Renderings, Layouts etc. try to understand their Sitecore SXA approaches.
Advanced learnings:
1. https://buoctrenmay.com/2019/12/23/sitecore-xp-9-3-0-and-sxa-9-3-0-demo-habitat-home-setup-guide/
2. Build complex website using SXA 9.3 and Scriban templates.