DEV Community: Darshan Sen

Visualize Performance issues in your JavaScript application

Darshan Sen — Fri, 03 May 2024 08:10:51 +0000

While working on improving the performance of an Electron app, I noticed that it was require()-ing a lot of modules up front during startup, which was leading to a poor startup performance. However, it was hard to tell which modules were taking the most time to load. So I decided to create perftrace to visualize performance issues in your JavaScript application!

What is `perftrace`?

Record PerformanceEntry objects from your JavaScript application in the Trace Event Format, so that it can be visualized on https://ui.perfetto.dev like this!

The code for this example is available here.

How do I use it?

Install it:

npm i perftrace

Create a new TraceEvents object:

const { TraceEvents } = require("perftrace");
const traceEvents = new TraceEvents();

Attach a callback to generate a file with the traces before the process exits:

const { writeFileSync } = require("node:fs");

process.on("beforeExit", () => {
  const events = traceEvents.getEvents();
  traceEvents.destroy();
  writeFileSync("events.json", JSON.stringify(events));
});

Profile the parts of your application that you are interested in by using the performance.mark() and performance.measure() Web APIs:

// Only needed in Node.js:
const { performance } = require("node:perf_hooks");
// `performance` is a global Web API present in other JavaScript runtimes.

performance.mark("before");
// code that needs to be measured
performance.measure("after", "before");

To trace require() calls, simply call trackRequires(true):

const { trackRequires } = require("perftrace");
trackRequires(true);

Run your program. After it stops, the generated file can be opened on https://ui.perfetto.dev for visualization.

Conclusion

Check out the project repository here. Go through the API documentation and try out these examples!

If you find this useful, please consider supporting my work in https://github.com/sponsors/RaisinTen.

Hacktoberfest: A great opportunity to learn

Darshan Sen — Mon, 19 Oct 2020 08:01:31 +0000

What I Learned From Hacktoberfest

Let me be honest here. Everyone of us had that moment in life when we were stupefied by people actually contributing to massive projects. Hacktoberfest helped me to break out of my bubble and become one of those people! Read along if you too want to become one of those people.

Here are the 🌠 5️⃣ magical steps🌠:

When you visit the project page, you are presented with the README. The name tells you what you have to do to get a decent idea of the repository. 📖
Often, you will find links to important documents you need to go through in the README itself. Don't forget to go through these: 📚
- Code of conduct - how you are supposed to behave in the community
- Contributing - how you can help improve the project
- License - permissions to use or own the software
Now, you should start reading the code. If you feel that something isn't quite right, open an Issue about it! Instead, if you feel you can fix it, you can even open a Pull Request with your changes! 👨‍💻
For huge codebases, it is not possible to read the entire code and keep your sanity intact at the same time. So, you should try looking into Issues created by other people. Do ask them for clarifications if needed. If you understand what they mean, try to query the codebase with relevant keywords using git grep or GitHub's Search facility so that you can find out the code that needs your contribution. 👀
Try to do your best at adding the changes. You don't have to be perfect. When you are happy, open a Pull Request! There is a team of people who will review your changes. If something needs to be changed, they will inform you kindly. At the end, if everything works out well, your Pull Request will be merged and you will become a contributor! 🎉

This feels like a lot of work? Well, that's what Hacktoberfest is here for! The tee serves as a great motivation to drive you through 4 passes of the 5 magical steps. In fact, if you honestly liked the experience, Hacktoberfest will turn you into a Pull Request beast who will get to produce a yearlong of Pull Requests! Happy Open Sourcing! 😃

Sokoban Action

Darshan Sen — Wed, 16 Sep 2020 14:25:11 +0000

My Workflow

Sokoban Action

Hi everyone! This is the first time I'm making a GitHub Action and this is also my first post here!

When I came to know about the GitHub Actions Hackathon, I had no idea what an Action was or how it worked. As I was scrolling through the comments of the Hackathon Announcement post, I came across this:

Peter Kim Frank • Aug 13 '20 • Edited

I'm looking forward to seeing what the community comes up with for this contest across all categories, but especially for Wacky Wildcards. You can get pretty dang creative here. I'm a fan of this Profile Readme where you can actually play chess (powered by GitHub Actions).

So, I visited the link and found this amazing project!

timburgan / timburgan

Tim's Community Chess Tournament

Game is in progress. This is open to ANYONE to play the next move. That's the point. 👋 It's your turn! Move a black (solid) piece.

A	B	C	D	E	F	G	H
8
7
6
5
4
3
2
1

BLACK (solid): It's your move... to choose where to move...

FROM	TO - just click one of the links :)
A7	A5 , A6
B7	B5 , B6
B8	A6 , C6 , D7
C8	D7 , E6 , F5 , G4 , H3
D8	A5 , B6 , C7 , D7
E7	E5 , E6
E8	D7
F6	D5 , D7 , E4 , G4 , G8 , H5
G7	G5 , G6
H7	H5 , H6
H8	G8

Ask a friend to take the next move: Share on Twitter...

How this works

When you click a link, it opens a GitHub Issue…

View on GitHub

I was surprised by the capabilities of GitHub Actions. So, I went through the docs and took the awesome courses at GitHub Learning Lab to get a good grip on GitHub Actions.

Finally, I decided upon making my own game using GitHub Actions. I implemented Sokoban, which is a classic box-pushing game.

The game takes place right in the README.md. It has a table representing the game board, furnished with the game items, like this:

Your character is the Octocat. To play the game, you are supposed to push each box to a goal using the given controls.

When you click on the controls, it opens a new issue with a text to trigger the workflow. After you submit the issue, the action starts running and updates the board and replies to your issue like this:

Now push! 😃

Submission Category:

Wacky Wildcards

Yaml File or Link to Code

RaisinTen / sokoban-action

Sokoban game using GitHub Actions 🤖

Sokoban Action

⬆️ ⬇️ ➡️ ⬅️ ↩️

Instructions

Sokoban is a game where you are supposed to push each box to a goal.

Items

Name	Item	Description
Octocat		You can move me in all 4 directions with ⬆️, ⬇️, ➡️, ⬅️ and go back a move with ↩️ when you are stuck.
Box		I get pushed in the direction Octocat moves. When I am pushed into a goal, I turn blue!
Goal		When a box is pushed into me, it turns blue!
Wall		You can't push me.

Working

GitHub Actions

This game is made using GitHub Actions! When you click on the controls, it opens a new issue with a text to trigger the workflow. After you submit the issue, the action starts running and updates the board and replies to your issue.

To know more about this, check out the blog on !

Now push! 😃

Code of Conduct

…

View on GitHub

Hope you enjoyed playing this game. 😊
Thank you for your time. 🙏

DEV Community: Darshan Sen

Visualize Performance issues in your JavaScript application

What is perftrace?

How do I use it?

Conclusion

Hacktoberfest: A great opportunity to learn

What I Learned From Hacktoberfest

Sokoban Action

My Workflow

Sokoban Action

timburgan / timburgan

Tim's Community Chess Tournament

BLACK (solid): It's your move... to choose where to move...

Submission Category:

Yaml File or Link to Code

RaisinTen / sokoban-action

Sokoban game using GitHub Actions 🤖

Sokoban Action

⬆️ ⬇️ ➡️ ⬅️ ↩️

Instructions

Items

Working

GitHub Actions

Code of Conduct

What is `perftrace`?