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

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:

$w("#repeater1").onItemReady( ($item, itemData, index) => {
  $item("#image1").src = itemData.avatar;
  $item("#firstName").text = itemData.firstName;
  $item("#lastName").text = itemData.lastName;
  $item("#company").text = itemData.compony;
  $item("#phone").text = itemData.phone;
  $item("#email").text = itemData.email;
});

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.

Install Lodash

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

Lodash installation with Velo Package Manager

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

import _ from "lodash";

Text templates

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

// #1 install and import
import _ from "lodash";

// #2 Use custom template delimiters.
_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;

// #3 Pattern string with two keys
const pattern = "Hello, {{firstName}} {{lastName}}!";

// #4 Create a compiled template.
const compiled = _.template(pattern);

$w.onReady(function () {

  // #5 result: "Hello, John Doe!"
  $w("#text1").text = compiled({
    firstName: "John",
    lastName: "Doe"
  });

});

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!".

HTML templates

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

const value = $w("#textTemplate").html; // "<b>Bold Text</b>"

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

Wix 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.

import _ from "lodash";

_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;

$w.onReady(function () {
    // Create a compiled template
    const compiled = _.template( $w("#textTemplate").html );

    $w("#repeater1").onItemReady( ($item, itemData, index) => {
        $item("#image1").src = itemData.avatar;
        $item("#text1").html = compiled(itemData); // use template
    });

    // set repeater data
    $w("#repeater1").data = [ /* here are our users */ ];
});

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

Resources

Posts