New in SXA 9.3: Scriban Templates

19 mei 2020 om 11:45 by ParTech Media - Post a comment

From a basic drag and drop componentry, Sitecore is accelerating towards meeting the business needs to elevate design build-ups. This acceleration leads to SXA that enables marketers to develop websites without the intervention of development and IT departments. SXA team is focused on the amplification of the website development process using the different components, layouts, and templates.

To empower Sitecore Experience Accelerator (SXA), Sitecore SXA 9.3 is introduced with two new features – Aggregated facet filter and Facet summary. Along with these two amazing features, SXA 9.3 also contains a fast, powerful, lightweight and secure template language called Scriban. It is very simple to import/export Scriban using Creative Exchange and create a flexible environment for the front end developers to work.

Performance metrics template engines

Source: https://www.markvanaalst.com/blog/sxa/sxa-9-3-introducing-scriban

Why SXA Needs Scriban?

Sitecore is already supporting the template language NVelocity, but the results haven’t been much satisfactory. Thus, Sitecore introduced a new template language in SXA 9.3 for better performance and more flexibility.

Scriban Template

Source: https://doc.sitecore.com/developers/sxa/93/sitecore-experience-accelerator/en/scriban-templates.html

The SXA team has been seeking an alternative template language and they did research to evaluate the performance of different templating engines. In their research, they concluded that SCRIBAN is the solution for them. It is a fast and highly flexible templating language as compared to other templating engines.

Moreover, Scriban can be easily extended. There’s even full tutorial available online of how Scriban can be extended. The SXA team has already developed various extensions that you can be utilized to develop your own variant. Moreover, you can use all the Sitecore functions to create variants such as placeholders, rules, edit frames, field extensions, embedded functions and so much more. For instance:

{{
 i_product = i_page.RelatedProducts.target
 sc_placeholder "relatedproducts" i_product
}}

Source: https://www.markvanaalst.com/blog/sxa/sxa-9-3-introducing-scriban

Keeping this aside, there are plenty of different specific item extensions available to allow you to utilize all the common items and properties. For example:

<ul>
 {{ for i_child as i_datasource.children }} 
  <li><a href="{{ i_child.url }}">{{ i_child.Title }}</a></li>
 {{ end }}
</ul>

Source: https://www.markvanaalst.com/blog/sxa/sxa-9-3-introducing-scriban

Potential of Scriban

The SXA team has included Scriban in version 9.3 because of the extended potential features of the templating language. The features embedded by Scriban into SXA 9.3 module are:

Dynamic Language – It's a very fast parser, efficient, and lightweight templating language along with the support of CPU and Garbage Collector.

Supported by Lexer/Parser – This support provides the full Abstract Syntax Tree which is highly efficient, versatile, fast, and robust rather than regex-based parsers. It has a precise source code location to detect and report errors. AST is used to script textual representation to manipulate scripts and resave them to the disk.

Compatible with liquid – With the usage of Template.ParseLiquid method, liquid language can be used. However, liquid language is less powerful than Scriban, but this mode helps to migrate liquid to the Scriban language smoothly. Along with AST mode, the liquid script can be converted to the Scriban script with Template.ToText method. The liquid language might not fully be defined, but still, there are few restrictions to use liquid templates with Scriban.

Extensible – Scriban has an extensible runtime that offers numerous extensibility points.

Powered by async/await – The support for async/await helps in the evaluation of scripts such as Template.RenderAsync.

In-built Function – Scriban is a power-packed template language due to the presence of numerous build-in functions such as arrays functions, date, HTML, maths functions, object, regex functions, string functions, timespan and so on.

Featured Language – Scriban is a fully featured template language including if/else/for/while, expressions (x = 1 + 2), conditions, etc.

How Scriban Actually Works?

If you have worked with rendering variants, then you must be already familiar with the process of defining the HTML structure of the components using different Sitecore items. Each variant field has lots of HTML components that can be utilized to render a field value. By amalgamating these fields, you can develop a whole new HTML structure.

Scriban vs standard variant

Source: https://www.markvanaalst.com/blog/sxa/sxa-9-3-introducing-scriban

But, thanks to Scriban now you have complete control over how HTML should be structured. So, now rather than creating items in Sitecore and defined by HTML, users can create HTML code in multiline text fields easily.

Creative Exchange Live

Okay, we know that writing HTML multiline code in Sitecore is not an ideal solution. Being a front-end developer, you won’t want to work within a CMS and write your HTML code inside the content tree. For this particular type of scenario, Creative Exchange Live is available to empower Scriban.

SXA Theme with Powershell

Source: http://www.pieterbrinkman.com

The majority of programmers are aware of Creative Exchange Live (CEL) as it facilitates them to work on desired themes using the filesystem. With the usage of NPM and Gulp tasks, all the modifications made at the local level can be synchronized to Sitecore instantly. On top, in SXA 9.3, simplicity and customization have been introduced in a better manner. When the site is exported using the Creative Exchange, you will get the support of the folder structure disk that will hold up all the required files for your theme. And, your new folder named Scriban will be ready. This folder will contain all the components required for rendering variants.

Now, all Scriban variants will be edited on the disk. It is a responsibility of CEL to ensure that all the modifications will automatically sync to Sitecore immediately.

Use of Visual Studio Code

To create and use extended Scriban scripts, you can use already developed Scriban extensions for Visual Studio Code with syntax highlighting and colorized syntax schemes. On top of that, Sitecore has extensive documentation and examples available for the better use of the Sitecore Scriban embedded functions.

Conclusion

SXA 9.3 with Scriban turns out to be a good combination for Sitecore. Scriban enables front-end developers to have full control over HTML, better flexibility, and faster development process than before. Plus, a good thing here is that Scriban is just introduced as an additional rendering variant. Thus, developers can easily mix Scriban with the traditional rendering variants anytime. So, you can use Scriban and traditional rendering variants together to produce an effective and more flexible solution.