Localization for Real-World Use-Cases: Key Learnings from Onboarding Global Brands

♪ React Jingle ♪ If at any point you find my talk boring, you might want to pull up your phone here and take a photo of that QR code. You can book yourself a demo, get a look at Sanity, get an understanding. Otherwise, you can have a listen to me over the next few minutes.

So good day everyone in the room and a big hello internet, to everybody on the live stream. My name is Simeon Griggs I'm a Solution Engineer at Sanity.io. And I come here today with two goals in mind.

Two, one, I'm going to talk to you about localisation. And I want to bring, because I know it's been a long day already, I am going to bring the energy of a thousand exploding suns to localisation, because I know it's a topic that just excites people. To no end, but two, I do have an ulterior motive, I am a narcissist and I am obsessed with conference speaker photos. And I'm really hoping that there's some photographers in the room. And I just want to make sure that I... ... ...leave with a bit of that thought leadership sort of style. So I'm hoping somebody captured that or maybe there's something a bit better.

Well, it looks like I'm doing an open mic night holding my mic today. I'm going to talk to you about localisation in the real world. I am from Sanity. Sanity is a content... It's not a content management system. It's a platform for structured content. It means that you can customise your CMS experience to be anything you want to, if you want to make a validation rule on a document that you need to solve the day's wordle in order to publish it, you can do that. You don't need to, but you can. And we say that content is data. And what does that mean? Well, let's unpack that by saying what the opposite is. Who listens to podcasts at 1.5 speed? Because I figured there's going to be enough of you that you're going to be able to hold up if I keep talking like this for the whole time.

So you've built a website like this, I've built websites like this. And back in the day when I used to sling WordPress websites, who used to build WordPress websites for a living? Yes, my people. And back in the day you would've looked at this and you would have said, what is the content model of this page? And you would've said, Simeon, the content model for that, sir, is a page. And you would have made a file called template-course.php and you would've made that as a page. And the lessons would have been child pages of that page.

But that's content as presentation. Sanity focuses on content as data. And if you're still doing WordPress, I don't know, they're all blocks or something now but it's not right. So let's look at this website again. This is made up of disparate pieces of content that are connected, but we don't have to focus on the presentation of it as a website. It just happens to be in a website. This is content. This is course data, presenter data, label data, lesson data, and most importantly of all for today's topic, this is language data. And language data is really important because that can be internationalized differently based on that content.

So let's consider our presenter model. I've got a name, a title, and a photo. Now, only two of those things are going to change if I need to internationalize this document. My name is always going to be the same. My photo is going to be the same. So if I have multiple language versions in that document, I'm going to make multiple language versions of that field. And so if I'm looking at a lesson, well, all of these are text, so it wouldn't make sense to have all of these be localized versions in this document, we might as well just make localized versions of that document, and this is the sort of flexibility that Sanity gives you, is that you get to internationalize things, how it makes sense to the content, not how it makes sense to us. We don't tell you how to do language internationalization, because to us, everything's data. Language is the data. This is how you set up languages in Sanity, because everything's JavaScript, so it makes sense to a developer, right? You just map over fields, or map over documents, and create language-specific versions of those. And then this one config file can spread to your Sanity schema, to your plugins, off to translations APIs and services, off to your Next.js, or Remix routes, and it all just comes from this single source of truth that you check into GitHub, you deploy into the Studio. And that's localization in the real world.

So as a solution engineer, a lot of my job is presenting Sanity to customers that we have, but the great thing about how flexible Sanity is as a content platform is that our customers tell us how they're doing things. And so a lot of the rest of the talk here is showing how our customers are showing how they have done internationalization in our software. The problem is, I can't tell you any of their names, so I have to just talk in weasel words, kind of. So this internet connected speaker company that uses Sanity, they do key value pairs. So if you've done localization, sanity, you've probably done this sort of thing already. This is looking at a Google Translate plugin that we have so you can type content in one language and have that automatically be translated into multiple other languages. And you can set up key value pairs. So usually you'd store that in JSON. You can give your content teams a content editable version of that.

There's a particular German fitness brand that we also work with. They extend the model. They've got markets and languages. Some markets have multiple languages. Some markets have a single language. No two markets might have the same language, but they can still provide the same experience in here. So not every market is creating the same content, but markets are creating content in multiple languages. And you can do all of that in sanity. And you can set that up how you like. And this is an administrative view. But they're able also to have that inform their user roles and permissions. So now a Canadian author who logs in only sees their content, even though it's all administered from the one data set.

Is everyone feeling exhausted with the way that I'm talking? It's probably too much. So this multinational conglomerate does the same thing, but they're in like 75 markets in one data set. 75 different market-specific websites with multiple languages, all from one data set, all from one Sanity project, plus global content. People are able to reach into another data set and origin to another market and pull content in and be able to translate their own version of that. So he's like the global version with the markets as well. And that's, this is that thing about reaching out that I talked about.

And then this particular Swedish music streaming company that happens to use Sanity that you probably can't guess who it is. They use 22 languages, custom markets. Like, markets aren't in code. They're content editors able to create markets. If they want to say this line of text can only be seen in countries where this particular plan is available, they can do that from one document. And here it is. So there's a lot to unpack here. Let's go through it very quickly, and I'm almost done. I swear this thing is flashing at me, but I'm almost done. They offer all of their market-specific content in one document. And so here we've got some Norwegian content, some United States content. If we have a look at that from the United States, we only see that content.

This is because we store content as data. It's because it's an array of objects, that text. If we have a look at the Norwegian version, we're filtering that out. And we're not overfitching, fetching, overfetching sounded like a kiwi there, overfetching and then filtering it back out. We are doing this at the point of query because we have our own query language as well. You should come and ask us about that.

So number one, content is data. I am embarrassed to try this, but I'm going to do it anyway. Let's do a call and response. I say content. You say is data. Content. Content. It worked. Internationalized content by its domain. Don't let us tell you how to internationalize your content. We can show you best practices, but you're able to do it how it makes sense to your organization. Which is kind of this point. Localize how you should. Localize how you should work, how you need. I think I wrote that one. I'm responsible for it.

Anyway, so if you want to have a look at that demo, if you still got your photos out. Photos out, cameras out. Have a look at the demo or come and see us at the booth afterwards. One more thing. Sorry, I thought I was done, but I added these slides very recently. We just launched the brand new version of Sanity Studio. Version 3. Can your CMS do this? Now the whole CMS is just a component that you can load into any React application. So at the conclusion of all these lightning talks in the next break, run, don't walk, to the Sanity booth and we'll show you Sanity Studio inside of a Remix application that you can put it wherever you like. It's never been so flexible. There's never been a better time to be a Sanity developer. There's never been a better time to set up a... I was going to say a headless CMS but I'm not allowed to say that. A platform for structured content. Thank you.