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

nope-js-browser

v1.7.10

Published

NoPE Runtime for the Browser. For nodejs please use nope-js-node

Downloads

18

Readme

Please visit our Docu

No Programming Environment - NoPE

NoPE provides the basics for a distributed system. The NoPE basically links all modules to a system. It hides the distribution. The modules can run on multiple nodes (computation nodes) and NoPE takes care of coupling them, executing services and subscribing to events etc.

In Addtion, NoPE provides a basic concept for a front-end. This front-end will run on next.js.

Nope is availabel in multiple Programming-Languages:

  • nodejs
  • python

Installation.

Installing using Batch-File (Windows ONLY)

This approach works on windows only.

To install NoPE just extecute the 00-install.bat-Batch-File in the root-directory.

Manual Installation

Make shure you run the following tasks

  1. npm install
  2. ./00-compile.bat (on windows) or ./00-compile.sh (on linux)
  3. ./05-link.bat (on windows) or ./05-link.sh (on linux)

Usage

NoPE - Command Line Interface.

After installation you can use the following cli-tool:

nope-js

Please select the option you want. Therefore add one of the following options:

  • help Show this help.
  • run Start a NoPE-Backend.
  • init Initialize a new project. This project is empty.
  • conf Trys to update the configuration file.
  • scan-ui Scans and extracts the provided uis.
  • upload-ui Uploads the determined ui-file
  • service Generate Helper Files to provide services
  • repl Opens an interactive console.

Changelog

Checkout our changelog.

NoPE in 5 min

1. Create a Nodejs Project

Get started by creating a new project distributed using NoPE.

  1. Installation using npm:
npm install -g nope-js-node
  1. Start your first Project:
nope-js project create

This should open a cli like that:

Tool

  1. Answer the requried questions to complete create the directory.
  • Name the project HelloWorld
  • Give it a short summary. This summary will used during distributing your project.
  • make shure you select typescript as project type
  1. navigate to the create folder ( e.g. cd ./HelloWorld )

This creates the following folder structure:

Folder.

  1. Open your IDE (e.g. vscode)

By using the project-tool the following features are added to the project:

  • Debugging of the application using VS code (launch-file)
  • Creation of a doc file (see doc/make)
  • Helpers to build a browser related version
  • Defined Project Structure (using interfaces etc.)
  • Use of a changelog
  • Deployment as a package
  • Simple extension using project-tool

2. Add a Service in Typescript

Our goal is to define a greeting service

The service creates a greeting message for a person.

Why a Service

This service is independent of how many times it has been called. Our functionality is stateless, this allows us to use a service.

Using the CLI to generate the Service

  1. To create the Service: use the project-tool to create the service
nope-js project edit

Edit

  1. Perfom the following selection inside of the tool.
  2. Selection add, to add a new element
  3. Select service, because we want to create a service
  4. Enter the name of the service, in our case HelloWorld

Creation of the corresponding files and imports is done automatically

This will update our files in the Folder:

Folder.

Now NoPE defined a new service file (HelloWorld.functions.ts) for us:

import { HelloWorldService } from "../types/interfaces";
import { exportAsNopeService, getNopeLogger } from "nope-js-node";

const logger = getNopeLogger("HelloWorld-service")

// Here is our main implementation we need to change
export async function _HelloWorldService (greetings: string) {
    // Please overwrite me.
    logger.debug("calling service 'HelloWorld' with the following parameters:", greetings)
    return "Hello " + greetings + "!"
}

// The exported Service.
export const HelloWorld: HelloWorldService =  exportAsNopeService(_HelloWorldService, {
    id: "HelloWorld",
    schema: {},
});

In that file, you will find a template for the service we want to implement. By default, the newly created service implements the hello-world behavior. This must changed. In our case it matches the desired behavior.

All services must be implemented async manner. This is necessary so that the runtime is not blocked.

Adding a Service interface

We now want to describe our service, that it can be used correctly at different Runtimes. Therefore we will add an schema to the exported service. This Schema follows the definition of a JSON-Schema:

export const HelloWorld: HelloWorldService =  exportAsNopeService(_HelloWorldService, {
    id: "HelloWorld",

    // We describe our interface as follows:

    schema: {

        // Enhanced Type of the JSON-Schema. We added the type: "function" for this purpose
        type: "function",
        
        // To describe the used inputs of a function or serive we added the field "inputs" to the schema.
        // It contains a list of all required inputs.
        inputs: [
            {
                // The Description of the Parameter
                description: "The name which should receive a Greeting",
                // Its used name in the function (see the arguments of the function)
                name: "greetings",
                // The Schema follows a default JSON-Schema
                schema: {
                    type: "string"
                }
            }
        ],

        // To describe the return of a function we added the field "outputs". It contains a 
        // JSON-Schema Object.
        outputs:{
            type: "string",

            // We provide some extra Info for the other users.
            description: "The greeting Message!"
        }
    },
});

Luckily, Typescript will help us during this process due to the typing system of Typescript.

3. Running the Service:

Before we are able to execute our service we have to compile our code to pure javascript.

  1. Make shure you installed all dependencies (This has only to be performed once):
npm install
  1. Compile your code:
./00-compile.sh

This will compile the Typescript files to pure javascript. Additionally the Files will be compiled to a specific browser version.

To run the service and distribute to different NoPE-Runtimes we have to determine a configuration:

nope-js conf -d dist

The cli will find all defined services or modules exposed in a so called NoPE-Package (This has been created automatically during the initalization of the project). The tool will store its results in the following configuration (located at ./config/config.json):

{
    // Our toool fund the following functions:
    "functions": [
        {
            "path": "dist\\src\\HelloWorld.functions.js",
            "functions": []
        }
    ],

    // Additionally the tool found our `HelloWorld` Project as "module"
    "packages": [
        {
            "nameOfPackage": "HelloWorld",
            "defaultInstances": [],
            "autostart": {},
            "path": "dist\\src\\HelloWorld.package.js"
        }
    ]
}

Finally we are ready to distribute our service by using the command:

nope-js run

This should produce the following output.

Runtime

4. Interact with the Runtime

Currently our service is only run internally (nope is not connected and runs without an external connection layer). To check and play with the distribution, we kill our old process (ctrl+c) create a separate process (e.g. a bash) and provide a serve:

nope-js run -c io-server

This will spool up a socket-io server on our localhost.

Afterwards we will restart our Runtime hosting the created service using io-sockets as connection layer:

nope-js run -c io-client

Now we are able to start our interact-tool to manually execute our process:

nope-js interact -c io-client -s

To use the interact-tool follow the questions:

  1. What do you want to do?

    • We want to inspect our distributed system -> inspect
  2. What do you want to inspect?

    • We want to check if our service is present -> service
    • We should be albe to see our HelloWorld-Service (see 1)
  3. Now we want to execute this service. Therefore we navigate back to the main menu

  4. Now we select execute and afterwards service because we want to execute our service

  5. Now the Tool renders the available services and we select HelloWorld (see 2) and it will render the previously defined Schema.

  6. Now we have to enter the inputs required by the Service:

    • It is important that the parameters are entered as list (because there might be more the 1 Parameter)
    • Enter the parameters as valid JSON Data.
    • Press enter

    Executing services with the interact tool will perfom function immedialty. If you integrated Hardware be aware of that.

  7. The Tool shows the result (see 4)

Runtime

You are now running a distributed System using remote procedure calls