リクエストしたページはご希望の言語ではご利用いただけません。

DEVELOPING DIGITAL | EPISODE 3

Storming the content gates: Sitecore’s headless revolution

In this episode, we’ll explore Sitecore’s unique JSS headless architecture and the benefits it offers developers, marketers, and end users of all kinds.

Listen now

Listen to this episode

Introduction

You may wonder if headless is just another of the latest industry buzzwords. And, sure, maybe it is in part. But it’s also much, much more. Sitecore’s Senior Technical Evangelist, Mark van Aalst, joins Derek Dysart to discuss the benefits that Sitecore’s JSS offers developers, including the ability to use the Experience Editor to edit Apps running on any JavaScript, to store content anywhere in Sitecore and reuse it on any channel you’d like, total freedom to visualize your content the way you’d like, support for React, Angular, Vue, and GraphQL, and more.

Read the episode transcript →

 

 

 

 

 

Transcript

Derek Dysart:
Mark, welcome to the podcast.

Mark van Aalst:
Yeah, thanks for having me, Derek.

Derek Dysart:
Why don’t you give folks a little bit of an introduction of who you are?

Mark van Aalst:
Okay, I’m Mark van Aalst, and I’m working for Sitecore now for, I think, close to seven or eight years already.

Derek Dysart:
Uh huh.

Mark van Aalst:
I started as a solution architect in the Netherlands helping our clients and our partners work with Sitecore, and several years ago I moved to the Sitecore corporate office, which essentially means that I now work in technical marketing, and I help our partners and developers still but then on a broader scale with new products that we have out. Right now I’m doing a lot of JSS, SXA, you know, those kinds of things.

Derek Dysart:
Yes. You mentioned JSS, and being a little bit familiar with Sitecore, JSS is kind of Sitecore reacting a little bit to the market, and you hear a lot about headless CMS. I guess, when you think of headless CMS, I guess, what do you—what are your thoughts on that?

Mark van Aalst:
Well, I think the first time I heard the term headless CMS I was kind of looking into it, what is it about, what are people saying about it because it is, I think, sort of a buzzword for now. 

Derek Dysart:
Yeah.

 

Mark van Aalst:
And if you look back at Sitecore's history, I think we had, like, Sitecore 6 already where it could do, like—get the content out of the Sitecore system, use it in APIs, use it in applications, and stuff like that. So in that sense I don’t think it’s that new.

Derek Dysart:
Yeah.

Mark van Aalst:
Right now with, well, all the stuff that we were releasing with 9.1, I think we finally embraced headless even more, and so the end users still have the same control over their headless applications regardless if they’re connected or disconnected from Sitecore.

Derek Dysart:
Yup.

Mark van Aalst:
So that’s the big advantage right now.

Derek Dysart:
Sure, sure. So, I mean, you kind of hinted at it that Sitecore's kind of always had a headless nature to it. I guess elaborate on that a little bit.

Mark van Aalst:
Well, if you look even further back, I think the first versions of Sitecore until 4 or 5—I think specifically until version 3 Sitecore didn’t even have, like, a native way of visualizing the content that was in the system.

Derek Dysart:
Yes.

Mark van Aalst:
It was more or less a kind of modeling tool, and we spit out XML files—

Derek Dysart:
Okay.

Mark van Aalst:
—and people could use those files for whatever they wanted to do.

Derek Dysart:
Sure, sure.

Mark van Aalst:
And it wasn’t until version 3 or 4 where we started introducing XLT to transform all your XML files into HTML, which made it visually more appealing for the end user.

Derek Dysart:
Yes. So Sitecore in its very nature was just kind of storing the content as content—

Mark van Aalst:
Yeah.

Derek Dysart:
—and then ultimately rendering out—

Mark van Aalst:
Yeah.

Derek Dysart:
—CSM mechanism to generate markup.

Mark van Aalst:
Yeah, exactly. Yeah, and I think it was 2002 or so we patented that whole presentation engine, like, the way we build websites nowadays, so the things that Sitecore developers know now as the presentation engine.

Derek Dysart:
Uh huh.

Mark van Aalst:
So you could use multiple components and place renderings on pages and use those same components and renderings and put them in different places to make it look and feel a bit different than any other page.

Derek Dysart:
Yeah, I think that’s—you know, as I’ve talked to Sitecore developers that are new to the platform, I think that—you know, we’ll forget about kind of what, you know, the modern idea of headless is. Sitecore, like you said, has really decoupled the way presentation and how all of that is calculated and brought to bear. You know, the actual formatting of the content data has always been separate. You kind of indicate way back in early versions it was XML, and you used XSLT to change it over. Then there was the embracing of Microsoft ASP.NET Web Forms to actually transform that data into, you know, some sort of HTML rendering that a browser can handle. Then—

Mark van Aalst:
Yeah.

Derek Dysart:
—later on with MVC and Razor views and stuff like that. And so you look at the offerings that are coming out now with JSS, or Sitecore's JavaScript Services for Sitecore, what exactly—what is that kind of bringing to the table now?

Mark van Aalst:
I think specifically the whole JSS SDK that we have right now brings—for partners it brings much more potential. They can have, like, non-Sitecore developers build applications on top of Sitecore and therefore have a larger pool of resources where they can get their people from, and it also frees up, like, the time for the Sitecore developers themselves to have less specific Sitecore developers needed for a project because they can do more with JavaScript developers now. In that sense, I think it frees up their resources for partners. They can handle more projects at the same time, and for the developers themselves they get a lot more freedom now.

Derek Dysart:
Yeah.

Mark van Aalst:
You’re no longer restricted to how Sitecore wants you to do stuff or whatsoever. You can have your own, well, cool pages, have them well designed like the latest standards [unintelligible], and if you look at our Symposium website, for example—

Derek Dysart:
Sure.

Mark van Aalst:
—the Symposium website that we have this year is totally built on JSS, and it’s totally different than the ones we had before.

Derek Dysart:
Okay.

Mark van Aalst:
Those were all quite strict within the Sitecore, well, corporate homepage guidelines—

Derek Dysart:
Sure.

Mark van Aalst:
—and handled, well, every year almost the same, just a different color or some different assets but not that much.

Derek Dysart:
Okay.

Mark van Aalst:
And if you look at it right now, then we have a much more modern homepage. I think that kind of reflects what JSS offers you. It gives you much more freedom in the way of how you want to visualize content.

Derek Dysart:
Sure. And so JSS is going to give access to somebody that may not necessarily be doing traditional HTML development, you know. Can you talk a little bit about what sort of frameworks that you can use with JSS?

Mark van Aalst:
Yeah, so far you have support for React, for Angular, and for Vue—

Derek Dysart:
Yeah.

Mark van Aalst:
—and I think those are probably the—99% of the time people choose either one of those frameworks.

Derek Dysart:
Yeah. And there’s quite good coverage with that, yeah.

Mark van Aalst:
Yeah, and the thing that we did is we created, like, helper components, so you could choose our components to render the content and still have the ability to edit the content within the Experience Editor itself. You can have your app run on any JavaScript runtime on a Node.js server, but you still have the ability to edit it in the Experience Editor that we all know right now—

Derek Dysart:
Yeah.

Mark van Aalst:
—which means that your marketers, your end users, also have the abilities to do all the things they’ve already been doing with Sitecore's sites like personalizing the content, doing testing, and stuff like that—

Derek Dysart:
Yes.

Mark van Aalst:
—but now on a totally different platform now on a JavaScript application.

Derek Dysart:
Yeah, and I think that’s—to kind of expand on that point a little bit, if you’re not familiar with the editing experience in Sitecore, you have the ability to visually edit a page. You know, in the past it was if you had HTML you had different, very easy to conceptualize components on a page, whether it’s—you know, in the markup it’s like a div or something like that, and this brings that level of being able to edit and to personalize and all that using, you know, using React and Angular and Vue and having that full, rich experience but still being able to use those languages.

Mark van Aalst:
Yeah. Well, I think when I went back with the product manager of JSS and we were thinking about what makes JSS so different than any other solution that does headless, right—

Derek Dysart:
Yeah.

Mark van Aalst:
—there are a lot of competitors who do headless, and they support content editing and things like that, but the thing that we do with JSS is we offer the marketer to have full control over the page layout—

Derek Dysart:
Yup.

Mark van Aalst:
—something which often other, well, companies are not doing. They just add—give them the ability to edit text or edit some new text and stuff like that.

Derek Dysart:
Or it’s something if you’re developing, say, a React application, that’s something you have to build as the developer.

Mark van Aalst:
Yeah.

Derek Dysart:
And a lot of this is just coming for free with Sitecore.

Mark van Aalst:
Yeah, yeah, it does. Yeah, and still it allows people, well, to edit those applications, to manage those applications themselves. So whenever marketing wants you to add, like, an extra component or some extra text on a page, after you need to go back to the developer themselves to actually add that placeholder so that they can add text or something like that.

Derek Dysart:
Yup.

Mark van Aalst:
With JSS, there’s no need for that. You can add another component as you would normally add a Sitecore component to any page.

Derek Dysart:
Yeah.

Mark van Aalst:
And now the marketer can still do that themselves without going back to IT. I think that’s the biggest benefit of SXA. It gives you total freedom of how you want to visualize your content—

Derek Dysart:
Yeah.

Mark van Aalst:
—still with full control of the Sitecore platform.

Derek Dysart:
Yeah, that’s great, great. So you mentioned kind of the Sitecore symposium site. Are there other examples you can think of where people are leveraging this?

Mark van Aalst:
Right now we have two sites, two public sites, running, and that’s the JSS documentation site—

Derek Dysart:
Uh huh.

Mark van Aalst:
—and that is the Symposium website. Since JSS is in the tech preview mode still, it’s not supported for our clients to go live with those sites.

Derek Dysart:
Sure.

Mark van Aalst:
We do have a few clients lined up who will go live whenever we release the product itself, and it will be fully supported and tested.

Derek Dysart:
Okay, so besides JSS, what other products does—you know, where does—where else does Sitecore play in the headless space?

Mark van Aalst:
Yeah, well, we have several products that support headless depending on the use case people have, so right now we also have SXA, the Sitecore Experience Accelerator—

Derek Dysart:
Uh huh.

Mark van Aalst:
—which is essentially a platform for both end users and developers to build sites on top of a foundation that’s laid by us. What SXA does is offer you two ways to provide your content in JSON so that you can use it in any application that you want.

Derek Dysart:
Sure.

Mark van Aalst:
So people compose their own JSON fees by just using the Experience Editor.

Derek Dysart:
Okay.

Mark van Aalst:
They can drag and drop components onto a page, which will then be visualized in JSON.

Derek Dysart:
Yeah.

Mark van Aalst:
And we have the ability to change, well, to translate the presentation settings of a page to JSON itself so they don’t have to do anything. They can automatically just call the API or just call the URL, add a parameter there, and then their page will be translated into JSON. Then they can use it there as well.

Derek Dysart:
Yeah, and so this presentation setting is kind of Sitecore's internal representation of how—what components are on this page.

Mark van Aalst:
Yeah.

Derek Dysart:
You know, I think historically if you’ve looked at Sitecore in the past, that would be kind of all your components that build out very little, small snippets of HTML to build out the entire page—

Mark van Aalst:
Yeah.

Derek Dysart:
—and you can get that information. That’s really kind of one of the strengths of Sitecore is, you know, that presentation—you’d said before the presentation engine of being able to—that data’s stored in Sitecore. That’s what enables a lot of the personalization, right?

Mark van Aalst:
Yeah.

Derek Dysart:
It’s, you know, you’ve got rules on, you know, show this component if this condition is matched. If this condition—you know, if there are other conditions, show this other component. Being able to get at that, have that come out of Sitecore as JSON, now you can consume that in some other API.

Mark van Aalst:
Yeah, yeah, definitely, and the whole presentation settings, they not only store what kind of components you want to use to visualize the content, but they’ll also store the references to the actual content items themselves. So it doesn’t really matter where your content lives within Sitecore. It doesn’t have to be on a page-based level. It can be anywhere within Sitecore, and you can still use that content because we’re using that as data source items—

Derek Dysart:
Okay.

Mark van Aalst:
—so we’ll retrieve those items somewhere from the Sitecore content repository, and then we’ll visualize them either on HTML or using JSON.

Derek Dysart:
Sure.

Mark van Aalst:
So with that you can—indeed you can do personalization. You can do testing. You can change the data sources depending on rules and stuff like that, so it’s a very powerful method of, well, composing your website or assembling your website, your webpages.

Derek Dysart:
Yeah, that’s interesting. So you had kind of hinted at it. If this is something—I’m a JavaScript developer. I’m interested in looking at this. What sort of documentation is out there?

Mark van Aalst:
So right now we have a documentation site, jss.sitecore.net, and this documentation site is—it’s quite extensive.

Derek Dysart:
Okay.

Mark van Aalst:
We’ll walk you through all the first steps to set up a page.

Derek Dysart:
Sure.

Mark van Aalst:
It will offer you different developer workflows, different techniques, our best practice in there. We’re also starting with a JSS trial, so on sitecore.com/trial you can already request a trial for a developer trial.

Derek Dysart:
Yup.

Mark van Aalst:
And we’re expanding that with a JSS trial as well, so people have the option to start with a JSS trial. Then they’ll get a free license they can use to set up a Sitecore instance either on Azure or locally. They can set up their own JavaScript applications, which it’s open source right away to JSS SDK.

Derek Dysart:
Yup.

Mark van Aalst:
They could do that either way, but they can set up their applications, deploy into Sitecore, and they’ll get all kinds of, well, personalized information based on the level of where they are at that moment.

Derek Dysart:
Yeah. We’ve covered JSS. We’ve covered Sitecore Experience Accelerator. Is there anywhere else a JavaScript developer can get access to Sitecore information?

Mark van Aalst:
Yeah, I think that there are lots of interesting things for JavaScript developers out there right now. If you look at JSS, for example, JSS now is a set of features, a set of, well, multiple features which will, ultimately, also will end up in the inner core platform. One of those things, for example, is GraphQL.

Derek Dysart:
Yeah.

Mark van Aalst:
So GraphQL is our new query-based language to retrieve data from Sitecore in a very efficient way. Originally it was developed by Facebook for their own mobile apps.

Derek Dysart:
Yeah.

Mark van Aalst:
We’ve adopted that right now, and right now it’s in JSS SDK, but it will most likely end up in the inner core platform itself.

Derek Dysart:
Okay.

Mark van Aalst:
And that’s, like, the most powerful language out there right now to get your data. With one query you can get all the data you want to have. You can request the specific fields you want to have. You can customize the results ATT. You can do stitching with external data sources.

Derek Dysart:
Yes.

Mark van Aalst:
It’s very powerful, and it’s quite new to Sitecore, but I think for the JavaScript developers it’s already—it’s been out there for a while, since 2015 or so.

Derek Dysart:
Yes.

Mark van Aalst:
So I think they’ll be very happy that they can use that language right now to, well, get the data from Sitecore. It doesn’t have to be a JSS app per se. You could also do it on a non-JSS app so just your regular JavaScript application.

Derek Dysart:
Yeah.

Mark van Aalst:
Yeah, that’s pretty cool.

Derek Dysart:
You know, what about—you know, I think people often think of Sitecore as a content management system—

Mark van Aalst:
Yeah.

Derek Dysart:
—but it’s much more than that. You know, it’s more than lip service of calling a customer experience platform is that tying a lot of analytic data and information about your customer. What sort of access do you have for kind of inputting information into Sitecore that way?

Mark van Aalst:
Well, we already have quite some things with the whole xConnect API, which is quite extensible, and one of the things we’re introducing now with 9.1, that’s the universal tracker. It is our scalable tracking methodology based on the web API technology.

Derek Dysart:
Yeah.

Mark van Aalst:
And what it does is it allows you to feed xDB with information that can come from anywhere so—

Derek Dysart:
Okay.

Mark van Aalst:
—especially in this whole IoT era where we have lots of devices—

Derek Dysart:
Yup.

Mark van Aalst:
—and lots of coupled devices talking to each other, you now have an endpoint where you can shoot your information towards. So if you have an interaction in a store—for example, you walk past a beacon or you have an interaction with an in-store application or even if you want to open up your refrigerator, for example—

Derek Dysart:
Sure.

Mark van Aalst:
—you could shoot that interaction into the universal tracker. It’s an application that runs on Sitecore hosts on the latest .NET core technology—

Derek Dysart:
Sure.

Mark van Aalst:
—and it is very scalable. I think we’ve tested it right now for—that it can handle, like, 5000 requests per second on a single instance, and you can scale it even more, so it’s very—again, very extensible. It’s very [unintelligible] as well. We set it up as we have done with the platform itself, so using pipelines you can customize the information. You can enrich the information so—

Derek Dysart:
Okay.

Mark van Aalst:
—if you have, like, for example, an IP address, you can also add some view information to that interaction and then shoot it into the xDB using xConnect API.

Derek Dysart:
Sure. And so xDB is the experience database.

Mark van Aalst:
Yeah.

Derek Dysart:
It’s kind of the central store for all of your customer information, and xConnect is the—for lack of a better term—API—

Mark van Aalst:
Yeah.

Derek Dysart:
—that sits in front of it and gives you kind of a standardized interface. So this universal tracker seems like it would be a great way to, like you said, get information from IoT devices or other personalized information that you can build a better, you know, kind of a better picture of your customer—

Mark van Aalst:
Yeah.

Derek Dysart:
—and then serve them a better experience, whether it’s for those devices or on your website or wherever. So, Mark, I appreciate so much you kind of coming on to talk about what offerings that Sitecore has. I think before we go, what—you know, to kind of recap, when you talk about headless, I think it’s easy to look at it as just a buzzword that people are throwing around, but it’s—you know, it truly is something out there. I guess, for folks to take away, looking at all the offerings that Sitecore does have for integrating in a headless way, I guess, how would you define what Sitecore thinks of headless?

Mark van Aalst:
I think it’s—that headless is not just a technology or something like that. It’s more or less an approach. It’s an architectural concept that kind of allows you to decouple certain elements of the content management part or the content experience part—customer experience part. So, for instance, we have the whole content management part where you edit your account and stuff like that. Then you have the content delivery, the part where you’ll get the content to the actual client, and you have the content presentation.

Derek Dysart:
Uh huh.

Mark van Aalst:
So what headless does is it kind of removes that final bit, that content presentation part, and it takes it apart so it sets it apart. It’s not connected in any way to a content management server whatsoever.

Derek Dysart:
Yeah.

Mark van Aalst:
It’s just something that lives out there, and it’s powered by a content management server in the end, but it’s not directly connected, which allows you to scale up humongously. If you have, like—if you have a web publication which needs to be live for a conference, for example, you can scale up to—

Derek Dysart:
Yes.

Mark van Aalst:
—well, numerous servers and have it not connected to environment at that time.

Derek Dysart:
Yeah, yeah. So I think it’s good to think of it as the—delivering content in—I don’t want to say in a non-traditional way because what is traditional? It’s changed over time. But it’s being able to deliver content beyond just a webpage, you know?

Mark van Aalst:
Yeah.

Derek Dysart:
And beyond just writing an API to get this content. It’s being able to use it from—use it from frameworks like you mentioned like React and Angular and being to build what are essentially applications running in the browser and consume that content out of Sitecore but still leverage the ability of Sitecore—

Mark van Aalst:
Yeah.

Derek Dysart:
—and all that it brings to bear.

Mark van Aalst:
Yeah, I think it’s important to know that whenever you want to have content being displayed somewhere, it doesn’t necessarily have to be a webpage. It could be something on a kiosk, or it could be on an app, on a tablet, or whatsoever. And the output doesn’t really matter. You can drive everything with a content management system in that sense, and it could be headless. It could be decoupled. It could be coupled as well. There’s no perfect solution for every use case, right? You can have multiple solutions to one case, and I think that’s the benefit that Sitecore brings. We can support all those cases.

Derek Dysart:
Great, great. Well, thanks again, Mark, for coming.

Mark van Aalst:
Yeah, thanks.

Find events near you

現在地を使用

Change my location

適用