Easily Compartmentalize Your Javascript Application Into Components

jFactory

jFactory is an Open Source JavaScript library that allows you to easily compartmentalize your application into components. Thus, everything they initialize can be monitored, stopped and removed automatically.

Why? Imagine a feature in your application that uses views, css, event listeners, requests and asynchronous processes. jFactory groups all this together into a component object that provides the methods $install(), $enable(), $disable() and $uninstall(). Now, you can safely stop, remove or restart the component, making your asynchronous application easier to control and clean.

• Playground
• Installation / Starter Kit
• Documentation / Traits / Classes

Abstract

jFactory components are able to:

• operate like a service (install, enable, disable, uninstall)
• automatically switch off subscribed css, dom, event listeners, observers, timers, requests, promise chains and views.
• automatically prevent all expired asynchronous calls (promise subtrees, event handlers…)
• automatically ensure that all the promise chains are completed at service state change
• keep track in DevTools of all running subscriptions (listeners, timers, requests, promises, dom, css…)
• improve the Promise chains (Awaitable, Completable, Cancelable and Expirable)
• easily create/load CSS & DOM and clone from <template>

Supported APIs

jFactory also supports Vue.js, React, and HTML5 WebComponents allowing components to automatically uninstall and reinstall their views. See Playground.

Overview

In a nutshell, jFactory provides methods to register listeners, views, dom, css, requests and asynchronous tasks that will be automatically stopped (including subpromise trees) and removed at opposite service state change (install/uninstall, enable/disable).

Components can be created from any Class, or by using a simple Object Literal through the shortcut jFactory():

let component = jFactory("myComponent", {
  onInstall() {
    this.$domFetch("#myDiv", "asset.html", "#parent").then(() => this.$log("html loaded"));
  },

  onEnable() {
    this.$interval("myUpdater", 250, () =>
      this.$fetchJSON("myRequest", "asset.json").then(() => this.$log("updated"))
    )
  }

  // ... your own methods and properties
})

await component.$install(); 
await component.$enable();
await component.$disable(); 
await component.$uninstall();  

Playground / Starter Kit

Learning

jFactory is an easy-to-learn library based on jQuery. Unlike a framework, it does not impose an application architecture: you are free to use only what you want without restriction.

All the methods are listed here.
See also the Playground and the Starter Kit

Patterns

• Registry: all component subscriptions (listeners, promises, timers, fetch, dom…) are explorable in a registry, allowing quick visual inspections in DevTools.

• Tasks: asynchronous processes can be registered as expirable tasks that block the current Service State Change, guaranteeing that everything is resolved before completing it, including all subpromises.

• Remove Phase: jFactory will automatically stop and remove the subscriptions (listeners, promises, timers, fetch, dom…) registered during an opposite state change (install/uninstall, enable/disable)

• Promise Chains: jFactory uses extended native Promises that makes the whole Chain Awaitable, Completable, Cancelable and Expirable.

• Traits: Components are Objects created from Classes dynamically extended by JFactoryTraits.

• Debug: jFactory is designed for asynchronous component-based application development, using contextual loggers and subloggers, filterable mapped stack traces, identifiers, loggable extended errors, explorable promise chains, …

Library

jFactory is designed from ES6 Classes:

• Extended Promise
  • Expirable, awaitable, explorable Promise Chain
  • Status properties
• Composite Functions
  • Wrappable / Conditional / Expirable Functions
• Awaitable asynchronous observers
• Traits, for dynamic mixins with configurable parser
• Loggers, with identified and formatted console logs and inherited switches
• Errors, with explorable data
• Stack traces, filterable and source mapped

Philosophy

• Does not modify JavaScript prototypes
• Injected methods and properties are prefixed to avoid conflicts
• Most names are prefixed by affiliation for easier code completion
• All registrations must be named, to reinforce debugging
• Most of the library is overridable (no inaccessible private function)
• Designed for debugging and inspections

####### Modular JavaScript

• Written in ES6+ Modules with Class optimized for Tree Shaking
• Highly configurable, overridable and dynamically patchable
• Interoperable. Framework-agnostic. No transpiler.
• Provides a “Developer Build” for additional validations and debugging properties

Implementation

• Supports Vue.js, React and HTML5 Web Components
• Supports Promises, Listeners, Timers, Mutations, DOM, CSS
• Dependencies: jQuery, Lodash

How to Contribute

jFactory is an Open Source project. Your comments, bug reports and code proposals are always welcome. This project is new and you can help a lot by spreading the word. Also consider adding a github star, as it seems very important for its visibility at this stage. Thank you for your contributions!

Download Details:

Author: jfactory-es

Source Code: https://github.com/jfactory-es/jfactory

#javascript