npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@tbminiapp/pixi-runner

v6.2.1-beta.9

Published

A simple alternative to events and signals with an emphasis on performance.

Downloads

14

Readme

@tbminiapp/pixi-runner

A simple alternative to events and signals with an emphasis on performance.

Can be used as an alternative to events / signals.

Installation

npm install @tbminiapp/pixi-runner

Usage

import { Runner } from '@tbminiapp/pixi-runner';

const onComplete = new Runner('onComplete');

//listenerObject needs to have a 'onComplete' function
onComplete.add(listenerObject);

//emit and all listeners will have their 'onComplete' functions called
onComplete.emit(data);

Can be used to execute a function on many objects. Handy for games. If you need to update you game elements each frame:

import { Runner } from '@tbminiapp/pixi-runner';

const updateRunner = new Runner('update');

// gameItems should all have a 'update' function
updateRunner.add(gameItem1);
updateRunner.add(gameItem2);
updateRunner.add(gameItem3);

// update game elements..
updateRunner.emit();

Features

  • Easy to use familiar API.
  • Under the hood it dynamically creates a looping function that is highly optimised.
  • Avoids using 'call' and runs the function directly (which is faster!).
  • You can pass parameters when emitting.

Pros:

  • Doesn't rely on strings.
  • Code-completion works properly.
  • Trying to dispatch or listen to an event type that doesn't exist throws errors (helps you find errors early).
  • No need to create constants to store string values.
  • Easy to identify which signals the object dispatch.
  • Favor composition over inheritance.
  • Doesn't mess with the prototype chain.
  • Its fast, a lot faster than events and signals.
  • Great for when performance matters.
  • Its light weight, with a tiny memory footprint (smaller than events and signals)

Cons:

  • Not quite as flexible. All listeners / items in the runner must have the correct function name specified within the runners constructor.

When to Use

In practice I have found the Runner incredibly useful and so thought it would be nice to share with the world. It currently forms the backbone of the messaging system in our game engine. Its working out great for things like update events, collision events etc.

Great to use if you are say looping through and array and calling the same function on each object. The resulting code is cleaner than a loop whilst still keeping the performance as fast as possible.

So yeah, if you are dispatching signals/events to a lot of listeners often (like everyframe often), then I would consider using this alternative. For most cases, this performance boost is not really important enough to switch from your current fave.

Think of this as a nice alternative for when speed really counts!

to run the tests, move to the runner-benchmark folder then run the following:

npm run benchmark

Next open you browser (http://localhost:9966). The test is run in the console. The test result above comes from macbook pro chrome 58.

Any thoughts or comments hit me up on twitter @doormat23, I'd love to hear them!