Before understanding Sitecore SXA you need to understand the different types of development possible with Sitecore.
So there are four types of development possible with Sitecore.
Custom - Development of websites using XSLT, Web Forms, and MVC. XSLT and Web Forms are older technology. Even ASP.NET is no longer in active development by Microsoft.
Headless - In headless websites are developed by separating the back-end functionality like the creation of the template, management of content, etc from front-end functionality like presentation.
SXA - SXA stands for Sitecore Experience Accelerator. The word "Accelerator" signifies the development of a website at a faster pace. SXA comes with Out of box components which help in the development of the website and arrival in the market at a faster pace.
Commerce - Sitecore also provides support for the development of an e-commerce website with their product called Sitecore Experience Commerce.
What is SXA?
SXA stands for Sitecore Experience Accelerator. It is a feature launch by Sitecore to achieve a fast, speedy, and smooth website.
Web development teams use SXA to speed up the production of websites and reduce the arrival time of websites in the market. It lets development teams reuse components, layouts, templates, and settings across various sites.
Sitecore SXA splits the development of the website by separating the front end and back end, so that the front-end designers, content authors, and developers can work parallelly. It also allows teams to deploy and maintain multiple sites quickly and cost-effectively.
Once the basic SXA tenant and site structure are in place resources from different teams can start work on the platform.
SXA is a beneficial option for organizations that have a lot of highly structured sites and the sites have some of the shared content. Also, the sites do not have any complex business logic.
Benefits of SXA
- Enable different workstreams to run parallelly together.
- Ensure faster delivery and quick time to market.
- Allows you to quickly develop pages using SXA drag and drop functionality. There are more than 50+ reusable components already available with SXA.
- Creative Exchange functionality helps the designer as they can import Themes and can easily switch.
- Helps in the development of sites using responsive and reusable renderings.
- Allows you to pick from a different build-in grid system. Like Bootstrap.
Features and Elements available with SXA
Tenants and Sites
Sitecore SXA supports multi-tenancy. You can create a Tenant Folder and Tenant. And within the tenant, you can create multiple websites. SXA provides folder structure to create and assign security roles to isolate content at the tenant level. We do not need to create patch files for multiple websites in SXA. You can create a page template at the tenant level so that page items can have different fields from one tenant to another.
Toolbox
Sitecore SXA comes with a toolbox where you can find all reusable renderings. Content Editor can simply drag and drop components onto the page from the toolbox. The renderings can vary from simple text and images to videos and many other components.
Grid and column layout
Sitecore SXA pages use the built-in responsive grid layout. The grid divides the pages into equal columns. By using row and column splitters or by changing the grid settings of the renderings on the page, you can decide how to divide the available columns on the page. You can also create your grid layout.
Themes
Sitecore SXA comes with a built-in theme named wireframe. SXA Themes are used to separate the structure (HTML) from design (CSS) which makes it easier to change the design of websites. A theme consists of style sheets, scripts, and images. SXA pluggable themes enable you to change the styling of a site quite rapidly. Users can use the built-in theme to develop a website, and later they can use the SXA creative exchange functionality to import the new theme.
Partial Designs
Partial Designs contain parts of the layout that the site uses at multiple places. Partial Designs are used to create the design elements of your pages quickly for consistent style. You create partial designs and use them anywhere. Some of the renderings suitable for partial designs are header, footer, etc.
Page Designs
Page Designs is the presentation definition for a page and it consists of partial designs and other renderings. A page can consist of a single page design but a page design can have multiple partial designs.
Creative Exchange
The Creative Exchange process is a feature that is available in Sitecore SXA to facilitate several different teams to work together on a website. For example, the team that is working on the theme of the site can work in parallel with the team that is working on component development. Creative Exchange enables the front-end developers to work on static HTML, CSS, and JS files of your website while the content editors can continue working on the content of your website. Once the designer finishes the work then it can be imported to enhance the design of the site.
Rendering Variants
Rendering Variants as the name suggests is a variation of the components. When a user places a component by dragging and dropping then they can select the way the component may appear on the page or what content it shows on the page. By default, SXA comes with a set of default rendering and rendering Variants.
Sticky Notes
Sticky Notes is a way to share information on the site. You can add sticky notes to your SXA pages. It is helpful when you are working on a website with lots of developers. Moreover, they are not visible when you publish your site.
Asset Optimizer
SXA site performance can be improvised by optimizing CSS styles and JS scripts. This can be achieved with SXA’s Asset optimizer functionality. When enabled in the production environment, it improves overall site performance by reducing the amount of data that needs to be transferred.
References
Introducing Sitecore SXA - https://doc.sitecore.com/xp/en/users/sxa/17/sitecore-experience-accelerator/introducing-sitecore-experience-accelerator.html
Introduction Sitecore SXA - https://www.altudo.co/resources/blogs/introduction-sitecore-experience-accelerator