Measuring the performance of JSS apps

Illia Kovalenko — Tue, 18 Jul 2023 21:01:32 +0000

In the scope of this article, I would like to share with you tools and approach that the JSS team uses internally to measure the performance of sample apps.
For this purpose, we are using some libraries:

Clinic.js - performance analysis tooling.
k6 - load testing tool that provides an easy way to make performance testing.

I'm using node-headless-ssr-proxy app + react app scaffolded by create-sitecore-jss.
To setup all the things appropriately, follow the next steps:

1. Install k6

Follow documentation steps.
In my case it's a Windows machine, so I run

choco install k6

2. Implement k6 script to perform load testing

loadTesting.js

import http from 'k6/http';
import { sleep, group, check } from 'k6';
import { Trend, Counter } from 'k6/metrics';

// load test settings
export const options = {
  discardResponseBodies: true,
  scenarios: {
    contacts: {
      // scenario name
      executor: 'ramping-vus',
      // VUs - virtual users
      startVUs: 1,
      stages: [
        { duration: '2m', target: 100 },
        { duration: '10m', target: 100 },
      ],
      gracefulRampDown: '0s',
    },
  },
};

const pageTrend = new Trend('Page_Trend', true);
const pageCount = new Counter('Page_Count');

// execute test
export default function() {
  // point to the page of your sample app
  const rootUrl = 'http://localhost:3000/styleguide';

  // generate page hit
  group('JSS Sample Application', function() {
    const response = http.get(rootUrl);

    check(response, {
      'Response 200': (r) => r.status === 200,
    });

    if (response.status === 200) {
      // add a successful record to compare with total page hit counts
      pageTrend.add(response.timings.duration);
      pageCount.add(1);
    }

    sleep(1);
  });
}

3. Install Clinic.js

npm install -g clinic

4. Compile node-headless-ssr-proxy app

.\node_modules\.bin\tsc

5. Collect metrics

In order to start clinic.js command we need an entry point to load the testing script (loadTesting.js) and specify the entry point of the headless app (index.js) we compiled previously. Clinic will start headless app and after that perform load testing.

Generate Doctor graphs. It will help us to diagnose performance issues in the headless app.

clinic doctor --on-port 'k6 run ./loadTesting.js' -- node ./src/index.js

Generate Flame graph. It shows the bottlenecks and hot paths in your code.
Generate Heap Profiler. Uncovers memory allocations by functions with Flamegraphs.
Analyze metrics provided in console

Wrap up 😎

That's all for this article. Based on the information that we generated, you can deeply investigate performance issues if you encountered any. For us these tools are extremely helpful.
I hope it was useful to you to know a bit more about performance profiling. Thank you for your attention! See you in LinkedIn Instagram GitHub 👋

How to contribute a new framework to Sitecore JSS

Illia Kovalenko — Sat, 15 Jul 2023 13:48:30 +0000

Hey there 👋! I'm pretty sure that there are some developers who would like to contribute a new framework to JSS, at first glance it looks a bit more complex though.
Out of the box JSS provides a create-sitecore-jss npm package. See more information on how to scaffold a new sample app in a documentation.

For the creation of the samples JSS uses an initializers approach. Let me highlight some major terms before moving forward.

Initializer - the process for handling the creation of the selected template.

Template - the sample populated by ejs tokens. Templates are divided into types:

base - contains all the files, base features for the application (e.g. nextjs).
add-on - provides additional features for the base template. Multiple add-on templates can be applied to the base (e.g. nextjs-styleguide).

I will walkthrough the example of adding a Nuxt framework into the create-sitecore-jss. Let's consider that Nuxt will be styleguide based.

1. Create a new initializer ✅

Firstly, we need to add an initializer entry point.
I create a new folder under src/initializers/nuxt. Let's add required scripts:

index.ts

import path from 'path';
import inquirer from 'inquirer';
import { prompts, NuxtAnswer } from './prompts';
import { Initializer, transform } from '../../common';
import { NuxtArgs } from './args';

export default class ReactNativeInitializer implements Initializer {
  // Required to point that template is base
  get isBase() {
    return true;
  }

  async init(args: NuxtArgs) {
    // Ask for required parameters e.g. appName, hostName 
    const answers = await inquirer.prompt<NuxtAnswer>(prompts, args);

    // Merge framework specific and base scaffolding related answers
    const mergedArgs = {
      ...args,
      ...answers,
    };

    const templatePath = path.resolve(__dirname, '../../templates/nuxt');

    // Executes scaffolding process
    await transform(templatePath, mergedArgs);

    const response = {
      appName: answers.appName,
    };

    // Return response to be accepted by next add-ons
    return response;
  }
}

args.ts

It defines a type of value that we accept in the initializer and pass to the next add-ons. We have arguments that will be passed by default to the initializer. I added a new teamcity property that we will request below.

import { ClientAppArgs } from '../../common';
import { NuxtAnswer } from './prompts';

type NuxtCustomArgs = {
  teamcity: boolean;
};

export type NuxtArgs = ClientAppArgs & Partial<NuxtAnswer & NuxtCustomArgs>;

prompts.ts

It defines questions that we want to ask for customer. We have default prompts that you can extend by adding an additional question.

import {
  ClientAppAnswer,
  clientAppPrompts,
  StyleguideAnswer,
  styleguidePrompts,
} from '../../common';

const customPrompts = [
  {
    type: 'confirm',
    name: 'teamcity',
    message: 'Do you want to apply Teamcity integration?',
    default: false,
  },
];

export type NuxtAnswer = ClientAppAnswer & StyleguideAnswer;

export const prompts = [...clientAppPrompts, ...styleguidePrompts, ...customPrompts];

2. Create a new template ✅

I create a new folder under src/templates/nuxt. Here you need to add all the required files you want to contribute. In case of Nuxt it can be Nuxt sample app but extended with JSS.

3. Introduce a new sitecore-jss-nuxt npm package ✅

I create a new npm package in a repository under packages/sitecore-jss-nuxt in order to place all the components, enhancers, utils specific to Nuxt. We need to reference this package in a sample app. Some part of the functionality can be re-exported from sitecore-jss, like data fetching utils, models, etc. You can take a look at sitecore-jss-react as an example.

4. Let's test it out ✅

In the CLI run

create-sitecore-jss

Here we go, Nuxt is present in a list

And here is a last question we wanted to ask about Teamcity integration

The new application has been successfully scaffolded!⭐

Wrap up 😎

That's all for this article. Next time I will explain on how to contribute a new add-on for the base template. Thank you for your attention! See you in LinkedIn Instagram GitHub 👋

DEV Community: Illia Kovalenko

Measuring the performance of JSS apps

1. Install k6

2. Implement k6 script to perform load testing

3. Install Clinic.js

4. Compile node-headless-ssr-proxy app

5. Collect metrics

Wrap up 😎

How to contribute a new framework to Sitecore JSS

1. Create a new initializer ✅

index.ts

args.ts

prompts.ts

2. Create a new template ✅

3. Introduce a new sitecore-jss-nuxt npm package ✅

4. Let's test it out ✅

Wrap up 😎