Forem: Vinicius Souza

3 Useful Tools to Enhance Electron Development

Vinicius Souza — Tue, 24 Oct 2023 10:01:04 +0000

After a few months of working with Electron (yeah, it was my first time) I've decided to share some helpful tools for beginners and maybe for advanced developers, why not?

1. Electron Fiddle

Electron Fiddle is an open-source tool that enables you to experiment, test, and prototype Electron applications within a sandboxed environment. It proves particularly beneficial for newcomers and for swiftly validating concepts.

You can start quickly creating an Electron App, test your experiments, using npm packages, and compile your application.

Download Electron Fiddle and run the basic project from the tool:

Change the code and compile it in seconds:

See the updated application running:

2. Electronegativity

Electronegativity is a tool to identify misconfigurations and security anti-patterns in Electron-based applications.
It leverages AST and DOM parsing to look for security-relevant configurations, as described in the "Electron Security Checklist - A Guide for Developers and Auditors" whitepaper.

This tool might help you to improve during the development lifecycle and avoid security issues for your Desktop Application.

You can quickly analyze Electron upgrades via the command line or CI/CD for issues and breaking changes.

Read the Electronegativity documentation and licenses on repository link.

3. Sentry

Understanding what's happening in your application is always important. An easy way to receive logs and alerts about your Electron App is using Sentry.

With Sentry, you can view the Application logs, configure alerts, and understand your app's performance.

See an example of how to set up:

Sentry.init({
  dsn: "YOUR_SENTRY_DSN_HERE",
  maxBreadcrumbs: 50,
  debug: true,
});

See the prices and plans here.

Thanks to my friend Ivan Azarov for introducing me to Sentry 🙌

Plus - Awesome Electron Repository

If you want to discover more tools, applications, and articles about Electron, I recommend exploring the Awesome Electron repository.

I hope this article may help you to start or improve your experience with Electron.
Thank you so much for reading.

Creating Load Tests with k6

Vinicius Souza — Tue, 23 Nov 2021 01:48:14 +0000

Creating a scalable application is very important in current days.

But, how can we test our application in hard scenarios?
How can we test performance in scenarios of many users and many requests at the same time?

Let's start understanding the Load Test.

Load Test

Load testing generally refers to the practice of modeling the expected usage of a software program by simulating multiple users accessing the program concurrently.

What is k6?

From official site:

k6 is a developer-centric, free and open-source load testing tool built for making performance testing a productive and enjoyable experience.

Install k6

Install k6 on Windows:

$ choco install k6

or on Linux:

$ sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys C5AD17C747E3415A3642D57D77C6C491D6AC1D69
$ echo "deb https://dl.k6.io/deb stable main" | sudo tee /etc/apt/sources.list.d/k6.list
$ sudo apt-get update
$ sudo apt-get install k6

or on MacOS:

$ brew install k6

or follow the steps of the installation guide.

Running k6

For running the tests we will use the following repository on GitHub.

In this repository, we have two folders. The load-test and stress-test.

Running Load Test

First, we will run the Load Test. So, access the root folder and run the command:

$ k6 run load_test\script.js

In the code, we can understand the load test:

import http from 'k6/http';
import { sleep, check } from 'k6';

//Base Url for the test
export const BASE_URL = 'https://test-api.k6.io';

export const options = {
  thresholds: {
    http_req_failed: ['rate<0.01'], // http errors should be less than 1%
    http_req_duration: ['p(95)<250'], // 95% of requests should be below 250ms
  },
  stages: [
    { duration: '30s', target: 20 },   // simulate ramp-up of traffic from 1 to 20 users over 30 seconds.
    { duration: '1m30s', target: 10 }, // ramp-down to 10 users over 1 min and 30 sec
    { duration: '20s', target: 0 },    // ramp-down to 0 users
  ],
};

export default function () {

  const res = http.get(`${BASE_URL}/public/crocodiles/1/`);

  check(res, { 'status was 200': (r) => r.status == 200 });

  if(res.timings.duration > 250)
    console.log('The response is longer than expected - Response time was ' + String(res.timings.duration) + ' ms');

  sleep(1);
}

Thresholds: Success/Fail criteria used to determine performance expectations
- HTTP errors should be less than 1%
- 95% of requests should be below 250ms
Stages: A list of objects that specify the target number of VUs to ramp up or down
- Up to 20 Vus (virtual users) for 2 minutes and 20 seconds over 3 stages

Inspect the k6 end-of-test summary. In the console, we can see the print of summary report to stdout that contains a general overview of your test results. For example:

In the example above, we can see the execution context, any logs of my script (when the response is longer than expected) and the checks result. In other words, success of our application.

Bonus 🎉

Stress Test

It's a type of load testing used to determine the limits of the system. The purpose of this test is to verify the stability and reliability of the system under extreme conditions.

The main idea of this test is to gradually push the application, simulating an abnormal number of operations, like a "Black Friday" and "Cyber Monday", for example. The point of this test is to gradually push your APIs beyond their breaking point.

Running Stress Test

For run stress test, we will use the script on folder stress_test:

$ k6 run stress-test\stress-test-script.js

The code:

import http from 'k6/http';
import { sleep, check } from 'k6';

//Base Url for the test
// make sure this is not production
export const BASE_URL = 'https://test-api.k6.io';

export const options = {
  stages: [
    { duration: '2m', target: 100 }, // below normal load
    { duration: '5m', target: 100 },
    { duration: '2m', target: 200 }, // normal load
    { duration: '5m', target: 200 },
    { duration: '2m', target: 300 }, // around the breaking point
    { duration: '5m', target: 300 },
    { duration: '2m', target: 400 }, // beyond the breaking point
    { duration: '5m', target: 400 },
    { duration: '10m', target: 0 }, // scale down. Recovery stage.
  ],
};

export default function () {
  const req1 = {
    method: 'GET',
    url: `${BASE_URL}/public/crocodiles/1/`,
  };
  const req2 = {
    method: 'GET',
    url: `${BASE_URL}/public/crocodiles/2/`,
  };
  const req3 = {
    method: 'GET',
    url: `${BASE_URL}/public/crocodiles/3/`,
  };  
  const req4 = {
    method: 'GET',
    url: `${BASE_URL}/public/crocodiles/4/`,
  };  

  // call the 4 requests in parallel
  const responses = http.batch([req1, req2, req3, req4]);

  check(responses, {
    'status is 500': (r) => r.status == 500,
  });

  sleep(1);
}

Conclusion

k6 makes easier the best scenarios of the load test.
For example, some benefits:

Scripts on Javascript
Without external dependencies
Fast to creat test scenarios
Easy to use version control

My opinion, it's a good alternative to Load Tests.
My next step is to create more integrations, like Grafana, Kafka, and Postman.

In this project, I used a k6 for Visual Studio Code.

Creating Kubernetes Guestbook App With Pulumi

Vinicius Souza — Tue, 02 Nov 2021 18:41:25 +0000

Pulumi is an open-source Infrastructure as code (IaC) SDK.
It's possible to use common programming languages to create, deploy and manage infrastructure in the most popular clouds.

This article shows how to use Pulumi to create a Kubernetes infrastructure.
We'll create, build and deploy the Kubernetes Guestbook example using typescript whit Pulumi.

Installation

We'll use NodeJs and npm, so install both:

Install NodeJS (10.x or later)
Install npm

You have to install Pulumi CLI:

https://www.pulumi.com/docs/get-started/install/

install Pulumi on Windows:

$ choco install pulumi

or on Linux:

$ curl -fsSL https://get.pulumi.com | sh

or on MacOS:

$ brew install pulumi

Create new project

Let's start creating a folder and Pulumi project:

$ mkdir quickstart && cd quickstart
$ pulumi new kubernetes-typescript

After, finish project setup on prompt:

Set the project name
Set the project description
Create a stack (in this case, we will use dev)

Change index.ts file with the below code:

import * as pulumi from "@pulumi/pulumi";
import * as k8sjs from "./config/k8sconfig";

let stack = pulumi.getStack();
let project = pulumi.getProject();

console.log(`Creating Pulumi Project ${project} on Stack ${stack}`)

const config = new pulumi.Config();
const isMinikube = stack == "dev";

const redisImageLeader = "docker.io/redis:6.0.5";
const redisImageReplica = "gcr.io/google_samples/gb-redis-follower:v2";
const frontEndImage = "gcr.io/google_samples/gb-frontend:v5";

const redisLeader = new k8sjs.ServiceDeployment("redis-leader", {
    image: redisImageLeader,
    ports: [6379],
});

const redisReplica = new k8sjs.ServiceDeployment("redis-replica", {
    image: redisImageReplica,
    ports: [6379],
});

const frontend = new k8sjs.ServiceDeployment("frontend", {
    replicas: 3,
    image: frontEndImage,
    ports: [80],
    allocateIpAddress: true,
    isMinikube: isMinikube,
});

export let frontendIp = frontend.ipAddress;

And we will create a folder to components of the configuration of the project:

serviceDeployment.ts

import * as k8s from "@pulumi/kubernetes";
import * as k8stypes from "@pulumi/kubernetes/types/input";
import * as pulumi from "@pulumi/pulumi";
import * as serviceDeployArgs  from "./serviceDeploymentArgs"

export class ServiceDeployment extends pulumi.ComponentResource {
    public readonly deployment: k8s.apps.v1.Deployment;
    public readonly service: k8s.core.v1.Service;
    public readonly ipAddress?: pulumi.Output<string>;

    constructor(name: string, args: serviceDeployArgs.ServiceDeploymentArgs,
                opts?: pulumi.ComponentResourceOptions) {
        super("k8sjs:service:ServiceDeployment", name, {}, opts);

        const labels = { app: name };
        const container: k8stypes.core.v1.Container = {
            name,
            image: args.image,
            resources: args.resources || { requests: { cpu: "100m", memory: "100Mi" } },
            env: [{ name: "GET_HOSTS_FROM", value: "dns" }],
            ports: args.ports && args.ports.map(p => ({ containerPort: p })),
        };
        this.deployment = new k8s.apps.v1.Deployment(name, {
            spec: {
                selector: { matchLabels: labels },
                replicas: args.replicas || 1,
                template: {
                    metadata: { labels: labels },
                    spec: { containers: [ container ] },
                },
            },
        }, { parent: this });

        this.service = new k8s.core.v1.Service(name, {
            metadata: {
                name: name,
                labels: this.deployment.metadata.labels,
            },
            spec: {
                ports: args.ports && args.ports.map(p => ({ port: p, targetPort: p })),
                selector: this.deployment.spec.template.metadata.labels,
                type: args.allocateIpAddress ? (args.isMinikube ? "ClusterIP" : "LoadBalancer") : undefined,
            },
        }, { parent: this });

        if (args.allocateIpAddress) {
            this.ipAddress = args.isMinikube ?
                this.service.spec.clusterIP :
                this.service.status.loadBalancer.ingress[0].ip;
        }
    }
}

serviceDeploymentArgs.ts

import * as k8stypes from "@pulumi/kubernetes/types/input";

export interface ServiceDeploymentArgs {
    image: string;
    resources?: k8stypes.core.v1.ResourceRequirements;
    replicas?: number;
    ports?: number[];
    allocateIpAddress?: boolean;
    isMinikube?: boolean;
}

Basically, in index.ts we define the images of deployments and call serviceDeployment.ts to create container, deployment, and service in K8s.

Moreover, in the project, we have files with metadata of the project.
The Pulumi.yaml and Pulumi.dev.yaml define metadata of configuration of the project, like name, description, and custom properties:

Pulumi.yaml

name: k8s-guestbook
runtime: nodejs
description: Creating Kubernets Gustbook with Pulumi

Pulumi.dev.yaml

config:
  k8s-guestbook:isMinikube: "true"
  k8s-guestbook:useLoadBalancer: "false"

Deploy to Kubernets

The command to create and update a stack is:

$ pulumi up

Afther this performe updates using prompt, selecting yes:

Previewing update (dev)

View Live: https://app.pulumi.com/acme/k8s-guestbook/dev/previews/9fb88818e4-756d-48ed-baf8-f44774d9bbd0

     Type                                 Name               Plan       Info
 +   pulumi:pulumi:Stack                  k8s-guestbook-dev  create     1 message
 +   ├─ k8sjs:service:ServiceDeployment   redis-leader       create
 +   │  ├─ kubernetes:apps/v1:Deployment  redis-leader       create
 +   │  └─ kubernetes:core/v1:Service     redis-leader       create
 +   ├─ k8sjs:service:ServiceDeployment   frontend           create
 +   │  ├─ kubernetes:apps/v1:Deployment  frontend           create
 +   │  └─ kubernetes:core/v1:Service     frontend           create
 +   └─ k8sjs:service:ServiceDeployment   redis-replica      create
 +      ├─ kubernetes:apps/v1:Deployment  redis-replica      create
 +      └─ kubernetes:core/v1:Service     redis-replica      create

Diagnostics:
  pulumi:pulumi:Stack (k8s-guestbook-dev):
    Creating Pulumi Project k8s-guestbook on Stack dev


Do you want to perform this update? yes
Updating (dev)

View Live: https://app.pulumi.com/acme/k8s-guestbook/dev/updates/23

     Type                                 Name               Status      Info
 +   pulumi:pulumi:Stack                  k8s-guestbook-dev  created     1 message
 +   ├─ k8sjs:service:ServiceDeployment   frontend           created
 +   │  ├─ kubernetes:apps/v1:Deployment  frontend           created
 +   │  └─ kubernetes:core/v1:Service     frontend           created
 +   ├─ k8sjs:service:ServiceDeployment   redis-replica      created
 +   │  ├─ kubernetes:apps/v1:Deployment  redis-replica      created
 +   │  └─ kubernetes:core/v1:Service     redis-replica      created
 +   └─ k8sjs:service:ServiceDeployment   redis-leader       created
 +      ├─ kubernetes:apps/v1:Deployment  redis-leader       created
 +      └─ kubernetes:core/v1:Service     redis-leader       created

Diagnostics:
  pulumi:pulumi:Stack (k8s-guestbook-dev):
    Creating Pulumi Project k8s-guestbook on Stack dev

Outputs:
    frontendIp: "10.108.227.133"

Resources:
    + 10 created

Duration: 44s

Checking the results

Inspect your cluster to validate the Guestbook App services:

$ kubectl get services

Minikube does not support type LoadBalancer; if you are using dev stack, run:

$ kubectl port-forward svc/frontend 8080:80

and open in browser http://localhost:8080

Destroying the Project

To clean up and destroy resources, run commands to destroy and remove your stack/resources:

$ pulumi destroy --yes
$ pulumi stack rm --yes

Links

Pulumi example projects https://github.com/pulumi/examples

Conclusion

Pulumi is a good alternative to use the most common program languages (javascript, typescript, python, C# and Go) to create IaC projects in popular clouds (AWS, Azure, and Google Cloud).

The code of this post is available on Github