Sitecore XM Cloud Components: First Look
May 16, 2023 • 4 Minute Read • Joe Fusco, Directeur technique, front end
Sitecore's content management system (CMS) allows businesses to create customizable websites. One of the key features of Sitecore is its use of components, which are self-contained pieces of functionality that can be developed and tested independently. With speed and efficiency in mind, Sitecore developed XM Cloud Components, a low-code/no-code cloud-based service. It's currently in early release and will be available to the general public soon.
Verndale was able to analyze XM Cloud Components while still in early release to understand its current capabilities, see if we could recreate a set of components and templates, and start documenting our process.
XM Cloud Components works directly with Sitecore Pages in XM Cloud to be able to create flexible and scalable components. It enables creatives and marketers to stand up an experience, such as low-functionality landing pages, microsites, and campaigns, without the involvement of development resources. For more complex applications, Sitecore intends to add the ability to enable custom code within XM Cloud Components as well, providing a lot more flexibility in what can be built, how it's built, and what type of team members get involved.
The XM Cloud Components application provides the ability to build a set of front-end components used in web applications and websites. The platform comes with standard elements and simple out-of-the-box building blocks. It gives anyone the opportunity to create their own experience within the system via a user interface. No code is necessary in order to build an experience. To access XM Cloud Components, you’ll need to log into Sitecore XM Cloud and create a new website. Once you’ve created a new blank site in Sitecore Pages, you can access Components in the left toolbar. That will take you to the XM Cloud Components platform, which is a separate SaaS application.
The Pros of XM Cloud Components
Global Styling
The platform/user interface itself is pretty self-explanatory when adding styles. The labels are clear, the options are well organized, and it’s pretty obvious what you’re creating or changing since it happens in real-time. Typically when we start a project, the first thing the front-end team builds is the user interface kit. This kit includes setting up any and all font styles, colors, breakpoint configuration, padding, and margins - taking a mobile-first approach, allowing us to have a solid base for our build. XM Cloud Components has this capability and is very easy to configure. For example, the platform enables you to use Google fonts and add them to the library through your projects. (Coming at a later date will be leveraging Adobe, custom fonts, etc.). The same goes for colors, breakpoints, typography, etc.
Component Composition
XM Cloud Components allow the user to add a component easily to an existing component. In doing so, you create a more modular build and can directly edit the component. You can also embed the component you created into any project, including a Sitecore project or any project outside the Sitecore ecosystem. You can embed a component in a number of ways, including Web Component and React. You can then take this code and paste it anywhere you’d like.
Datasources
XM Cloud Components allow the mapping of content and data into components with an endpoint. You can set up content from any source from any platform, including JSON, REST, and GraphQL, and it’s a very easy interface to follow. The data tree will automatically update so you can easily see the data properties and how they're nested. You can actually mix data sources across components. For example, perhaps you have some content in Contentful (a headless CMS) that you want to pull in as well as some other data you want from a custom endpoint. This is all possible with Component datasources.
Reduces Development Time
Inherently, with the setup and configuration at a global level, the time it takes to build the site/templates will be significantly reduced. Like any low-code/no-code platform, the goal is to decrease the time for developers and streamline the process, while keeping standard semantics and best practices.
Drawbacks
With XM Cloud Components, organizations may become more dependent on Sitecore for front-end development, which could be problematic if they decide to switch to a different platform or if Sitecore changes its pricing or service offerings.
Cost
XM Cloud Components is a product that ships with XM Cloud and depends on Sitecore XM Cloud for configuration storage and files used by the generated code. XM Cloud must be licensed and may be more expensive than other low-code/no-code platforms. Small and medium-sized organizations will need to evaluate if it's a cost-effective solution. However, it is a great option for organizations that already have an XM Cloud license and are committed to the Sitecore ecosystem.
Rich User Interface
Creating a masonry grid or scrolling animations with XM Cloud Components may be a difficult task and could even be considered impossible. It's also challenging to manage spacing as it has to be managed in block elements. You can’t just add spacing to a title - adding it to a block element is required. At the moment, we don’t see a way to add effects on buttons and links, like fading to a different color or simply changing colors. Some other low-code/no-code platforms offer out-of-the-box libraries, animations, and rich interactive components.
It’s time-consuming to create layouts for different breakpoints, and the CSS doesn't work in a way that allows the flex layouts to go from desktop to mobile automatically. On this platform, you'll need to manually create separate versions of the component to adjust its layout for various breakpoints. However, if implemented with CSS, this process would be automatic. Sitecore is actively working on making this a high priority by increasing its flexibility.
What's Next for XM Cloud Components?
Although XM Cloud Components is still in its pre-release phase, we're optimistic that any issues or suboptimal user experiences will be resolved soon.
We'll continue to explore and find ways to push the boundaries and limitations of this unique offering, which cannot be found in any other similar DXP. With time, it'll only improve. We're excited that Sitecore has the foresight to recognize the potential of low-code/no-code platforms, which are widely regarded as the future.
Would you like to know if your business has use cases that would align with this type of platform? Reach out to chat with us about your options.
Contributing Author: Elizabeth Spranzani, CTO