GithubHelp home page GithubHelp logo

mickjasker / performance-metrics Goto Github PK

View Code? Open in Web Editor NEW
3.0 1.0 0.0 1.46 MB

Library to gather metrics about a web application

Home Page: https://mickjasker.github.io/performance-metrics/

License: MIT License

JavaScript 51.33% TypeScript 48.67%

performance-metrics's Introduction

Performance metrics

npm npm bundle size npm bundle size GitHub npm

Usage

Installation

To install the library run $ yarn add device-performance-metrics in the root of your project.

Basic usage

Importing the library globally:

import PerformanceMetrics from 'device-performance-metrics';

const performanceMetrics: PerformanceMetrics = new PerformanceMetrics();

const browser = performanceMetrics.deviceSpecifications.getBrowser();

const fps = performanceMetrics.fpscounter.fps;

const bandwidth = performanceMetrics.networkBandwidtInformation.getAverageBandwidth();

Or tree shake the library:

import { DeviceSpecifications } from 'device-performance-metrics';
import { NetworkBandwidthInformation } from 'device-performance-metrics';
import { FPSCounter } from 'device-performance-metrics';

const deviceSpecs = new DeviceSpecifications();
const browser = deviceSpecs.getBrowser();

const networkBandwidth = new NetworkBandwidthInformation();
const avgBandwidth = networkBandwidth.getAverageBandwidth();

const fpsCounter = new FPSCounter();
const fps = fpsCounter.fps;

Getting device specifications

The class DeviceSpecifications gives you the ability to get basic specifications about your user's device. For example his browser and OS:

import { DeviceSpecifications } from 'device-performance-metrics';

const deviceSpecs: DeviceSpecifications = new DeviceSpecifications();

const browser = deviceSpecs.getBrowser();

const browserName = browser.name;
const browserVersion = browser.version;

const OS = deviceSpecs.getOS();

const OSName = OS.name;
const OSVersion = OS.version;

console.log(`Browser: ${browserName}(${browserVersion}), OS: ${OSName}(${OSVersion})`);
// example log: 'Browser: Chrome(73.0.3683), OS: MacOS(10.14.4)'

Network bandwidth

If you need to get information about the bandwidth you can use the NetworkBandwidthInformation class.

import { NetworkBandwidthInformation } from 'device-performance-metrics';

const networkInfo: NetworkBandwidthInformation = new NetworkBandwidthInformation();

// Logs an array of all measured bandwidths found when the class is contstructed
console.log(networkInfo.bandwidths);
// example log: [1432, 4234, 7686]

// Logs an avaerge of all measured bandwidths found when the class is contstructed
console.log(`${networkInfo.averageBandwidth}bps`);
// example log: 3973bpms

// Because the above values are made when the class is contstructed you also directly trigger the functions that get the data, for example:

console.log(networkInfo.getAverageBandwidth());
// example log: 4264bpms

FPS

The FPSCounter class gives you the ability to get the current framerate.

import { FPSCounter } from 'device-performance-metrics';

const fpsCounter: FPSCounter = new FPSCounter();

// Logs the current FPS
console.log(`${fpsCounter.fps}fps`)
// Example log: 60fps

If you want to get realtime information about the framerate you can use the setInterval() function:

// Logs the current FPS every 500ms.
setInterval(() => {
    console.log(`${fpsCounter.fps}fps`);
}, 500);

Typedoc

Detailed documentation can be found in the typedoc.

Building

This project forces you to use yarn;

$ yarn

$ yarn test to test

$ yarn test:dev to watch tests

$ yarn build to build the code to the /lib folder.

$ yarn doc to generated documentation in the ./docs folder

Contribution

TODO

performance-metrics's People

Contributors

mickjasker avatar

Stargazers

 avatar Floris Bernard avatar  avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.