Benchmark: $broadcast vs pubsub

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>

<script>
angular
    .module("testApp", [])
    .factory('$observerUtil', function () {
        var observers = [],
            _addObserver = function (topic, observer) {
                if (observers[topic] || (observers[topic] = [])) {
                    observers[topic].push(observer);
                }
            },
            _removeObserver = function (topic, observer) {
                if (!observers[topic]) return;

                var index = observers[topic].indexOf(observer);

                if (~index) {
                    observers[topic].splice(index, 1);
                }
            },
            _notifyObservers = function (topic, message) {
                if (!observers[topic]) return;
                observers[topic].forEach(function (el) {
                    el(message);
                });
            },
            _getNumberOfObservers = function (topic) {
                return observers[topic].length;
            };

        return {
            addObserver: _addObserver,
            removeObserver: _removeObserver,
            notifyObservers: _notifyObservers,
            getNumberOfObservers: _getNumberOfObservers
        };

    })
    .controller("testController", function ($rootScope, $scope, $observerUtil) {

    window.$rootScope = $rootScope;
    window.$observerUtil = $observerUtil;
    var items = $scope.items = [];

    for (i = 0; i < 100; i++) {
        items.push({
            number: i,
            text: 'some text'
        })
    }

    $rootScope.$on('broadcast', function (message) {
        $scope.text = message;
    });

    $observerUtil.addObserver('pubsub', function (message) {
        $scope.text = message;
    });

});
</script>

<div ng-app="testApp">
    <div ng-controller="testController">
{{text}}
        <ul>
            <li ng-repeat="item in items" ng-bind="item.number">
            </li>
        </ul>
    </div>
</div>

Tests:

$broadcast
window.$rootScope.$broadcast('broadcast', 'test')
pubsub
window.$observerUtil.notifyObservers('pubsub','test');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
$broadcast
pubsub

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):

LLMs can make mistakes. Check important info.

Let's break down what's being tested on the provided JSON.

**Benchmark Definition**

The benchmark is designed to compare two approaches for broadcasting data from a centralized event bus: `$broadcast` (using AngularJS) and `pubsub` (using a custom utility library).

**Test Cases**

There are two individual test cases:

1. **$broadcast**: This test case uses the `$broadcast` method on the `$rootScope` object, passing a message as an argument. The test is designed to measure the execution time of broadcasting data using AngularJS.
2. **pubsub**: This test case uses the `notifyObservers` method from the custom utility library (`$observerUtil`), passing a topic and a message as arguments. The test is designed to measure the execution time of broadcasting data using the pubsub approach.

**Options Compared**

The two options being compared are:

* AngularJS `$broadcast`: This is an event-driven approach where data is broadcast from a centralized event bus.
* Custom `pubsub` approach: This is a publish-subscribe (pubsub) approach where data is published to a topic and subscribers receive the data.

**Pros and Cons**

Here's a brief analysis of the pros and cons of each approach:

* **AngularJS `$broadcast`**:
	+ Pros:
		- Easy to use and understand.
		- Built-in functionality in AngularJS.
	+ Cons:
		- May not be suitable for large-scale applications due to its event-driven nature.
		- Can lead to performance issues if not properly handled.
* **Custom `pubsub` approach**:
	+ Pros:
		- More flexible and scalable than `$broadcast`.
		- Allows for better control over the broadcasting process.
	+ Cons:
		- Requires additional setup and configuration.
		- May be more complex to understand and use.

**Library: $observerUtil**

The custom utility library (`$observerUtil`) provides a set of functions for managing observers, including:

* `addObserver`: Adds an observer to a topic.
* `removeObserver`: Removes an observer from a topic.
* `notifyObservers`: Notifies all observers on a topic about a new message.
* `getNumberOfObservers`: Returns the number of observers on a topic.

**Special JS Feature/Syntax**

There is no special JavaScript feature or syntax used in this benchmark. However, it does utilize AngularJS's `$rootScope` and `$scope` objects to create a test application.

**Other Alternatives**

If you're interested in exploring other alternatives for broadcasting data, here are a few options:

* **Eventemitter**: A popular library for creating event listeners and emitters in JavaScript.
* **RxJS**: A library for reactive programming in JavaScript, which includes a set of operators for handling events.
* **Redispubsub**: A Redis-based pub/sub system for handling data broadcasting.

Keep in mind that each alternative has its own strengths and weaknesses, and the choice ultimately depends on your specific use case and requirements.

Latest run results:

Run details: (Test run date: 7 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3159.0 Safari/537.36

Browser/OS: Chrome 61 on Mac OS X 10.12.5

View result in a separate tab

Test name	Executions per second
$broadcast	1294633.2 Ops/sec
pubsub	4684583.0 Ops/sec

Related benchmarks:

$broadcast vs pubsub (version: 0)

Comparing performance of: $broadcast vs pubsub

Created: 7 years ago by: Guest

Jump to the latest result

$broadcast

pubsub

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):