webaxol / pluglightjs

A light-weight JavaScript framework designed to create flexible and maintainable projects with a modular and hierarchical approach

OooOOo.   o               o                o           OooOoo .oOOOo.  
O     `O O               O       o        O                O  o     o  
o      O o               o                o      O         o  O.       
O     .o O               o                O     oOo        O   `OOoo.  
oOooOO'  o  O   o  .oOoO O       O  .oOoO OoOo.  o         o        `O 
o        O  o   O  o   O O       o  o   O o   o  O         O         o 
O        o  O   o  O   o o     . O  O   o o   O  o   O     o  O.    .O 
o'       Oo `OoO'o `OoOo OOoOooO o' `OoOo O   o  `oO `OooOO'   `oooO'  
                       O                O                              
                    OoO'             OoO'                              
----------------------------------------------------------------------------
**Data-driven light-weight JavaScript framework for real-time applications** 

Introduction

PlugLightJS is a simple javascript framework designed to build data-driven applications with a modular approach easily. Its architecture was inspired by an existing framework called ECSY.js; I decided to make my framework, to gain more control of some design aspects like event management and object construction and allocation.

Usage

//  First, create a 'World' instance: the top-level class that controls the framework components

const world = new World()

Create Services

Services contain code that is executed every frame by the World class. They are implemented as 'Service' sub-classes

import { Service } from 'pluglightjs'; // You may need to import the Service class

// Make a 'Service' sub-class: you can add custom methods and attributes

class ExampleService extends Service{

  constructor(){
    super();
    // etc...
  }

  execute(){
   // Your code!
  }
}

// Then, register your service ( service name, service instance )

world.registerService('exampleService', new ExampleServiceA());

Create Events

Here are the main functions to work with events in pljs:

world.registerEvent('eventName'); // create event

world.registerServiceToEvent('serviceName','eventName'); // make service an event listener

world.notifyEvent('eventName', { info : 'eventInfo' }); // emit event

Lets implement that with a brief example:

class EventEmitter extends Service{

    constructor(){
        super();
        // etc...
    }

    execute(){

        // Emit event
        
        this.world.notifyEvent('exampleEvent');
    }
}

class EventReceiver extends Service{

    constructor(){
        super();
        // etc...
    }
  
    // event-handler class (on + event name)

    onexampleEvent(){
        console.log('event received');
    }
}

world.registerEvent('exampleEvent');

world.registerService('emitter' , new EventEmitter());
world.registerService('receiver', new EventReceiver());

world.registerServiceToEvent('receiver','exampleEvent');

Framework Execution

world.execute();    

world.pauseExecution();

---

Contribute

git clone https://github.com/WebAxol/PlugLightJS