Velo by Wix: Using HTML template to the better performance

The $w.Repeater most popular element on Wix sites and it the first killer of performance. In this article, we look at how we can do the repeater faster.

(fragment of Wix promo video) / Read this article on my blog

I have been working with the Velo platform for more than a year. The $w.Repeater element most popular in our projects, it's a great element it has very flexibility potential. We really use it very often.

But repeater has a problem with performance. The more we use elements in repeater containers, the slower it works. For example user cards with contact info:

We need to control the number of elements and trying to use fewer elements that we can. For this, we consider using templates. This way has a restriction, we can’t use it with the database collections UI we can use it only with code.

We would be using the function _.template() from library Lodash. The first we need to install Lodash with Package Manager.

Install lodash

After installation, we can use Lodash just import to your code.

Now we look at a simple example to understand how to work template.

How it works:

  1. Importing Lodash library. The first you have to install the library from Package Manager
  2. Setting the custom template delimiters as {{key}} . Lodash uses delimiters <%=key%> by default. more
  3. Pattern string with two keys {{firstName}} and {{lastName}} .
  4. Creating a compiled template, it returns a function compiled() which will be passed an object with properties. {firstName:"John",lastName:"Doe"} .
  5. The compiled() function gets an object and returns the string with replaced keys to the object properties value. Result "Hello, John Doe!" .

We can get a text element’s HTML content by .html property. $w.Text

This means we can get HTML of the text elements with all their styles! Cool, why don’t we use it as a template…

$w.Text template

We created a needed text template with markup, styles, and keys where we want to pass params. Then we hide the text element in the properties panel “Hidden on load”.

In the repeater container, we keep only two elements #image1 and #text1 .

Repeater container has only two elements

There’s only we need to change HTML of #text1 elements in repeater containers to HTML of the #textTemplate pattern element.

It works faster now because we have only two elements in repeater one image and one text element. DEMO


JavaScript Developer