How we bridged Backend with Frontend by converting template syntax and how AI helped.

What is templating?

In web templating, a template acts as a blueprint or a skeleton for the web page. It contains the static parts of the page layout and defines placeholders or variables where dynamic content can be inserted.

I believe every developer is familiar with it, as it comes from the ‘ancient’ web development times and has been around for decades.

The ISML templating

ISML stands for “Intershop Scripting Markup Language” and is a templating language specifically used in the context of Salesforce Commerce Cloud - a cloud platform for creating e-commerce sites. 

No need for a detailed description of the platform, but it uses MVC principles, has JavaScript on the backend, and has a unique templating language called ISML.

You can distinguish it from other templating languages by specific tags that only work with ISML. The tags are responsible for loops, conditions, and the inclusion of other templates. Most templating languages have those, but there are slight differences in syntax.

Compatibility problem

Even though the majority of the templating languages use similar approaches and structure, the syntax is something that varies from one templating to another. 

As an example, let’s see how a single template can look in two different templating languages: one in Nunjucks and another one in ISML:

The structure is similar, but the syntax is different, meaning only one of two templates will work in ISML and one with Nunjucks. That’s quite normal in the development world and usually is not a problem since you don’t need to transform from one template syntax to another. This was a given until we started to see problems with ISML templating - it has to be run on a server only. 

This significantly slows down templating because each change has to be uploaded to a server to become visible. The full template must be uploaded to the server when you change a line, tag name, or HTML attribute. And then, to validate the change, you must reload the resulting page. 

This circle takes around five seconds to execute, which does not sound like a lot until you do it a hundred times. And that is exactly what happens when a template is developed according to a required design. 

So we started looking into seeing the changes locally without using a remote server. That’s when we come across the Nunjuck's templating language. 

Nunjucks and conversion

Nunjucks helps you create templates faster than via ISML because templates don’t have to be uploaded to a server. Setting up a localhost server is all you need, and it comes with a standard Webpack configuration familiar to most FE developers.

But having a template in Nunjucks will not work for SFCC without the obvious syntax change I mentioned earlier. And each Nunjucks template would require at least some manual changes to the syntax. But does it have to be really manual? Of course not!

At DEPT®, we started using the OpenAI platform to convert the templates from Nujucks to ISML. This changed the workflow we had in place for a typical SFCC project. Instead of writing an ISML template, we write a Nunjucks one and then convert it to ISML. This also allowed us to reduce the learning curve for FE developers because they don’t have to learn ISML syntax and SFCC specifications as a new platform. Instead, they only have to work with the more popular and familiar Nunjucks templates.

So our new development process right now is looking like this:

• Frontend team writes templates using Nujucks
• Backend team converts the templates to ISML using the AI
• Backend team makes sure the templates working as expected and commits the changes into the repository

As a result:

• Frontend team saves a lot of time as they don’t have to deal with the server-side rendering and can test the templates locally
• Frontend team does not have to learn ISML templating or SFCC specifications
• Backend team does not spend time on onboarding the Frontend team on the SFCC platform  

Conclusion

So this is one case for us as a company for a template conversion. This is most likely not a very common problem; for some, it does not sound like a problem. However, it’s a good example of how an AI can connect two different expertise: frontend development and cloud-based backend.