Skip to content
This repository has been archived by the owner on Sep 8, 2020. It is now read-only.
/ ToolKit-JS Public archive

This is a lightweight front end library that contains a lot of powerful utilities, while remaining small in size.

License

Notifications You must be signed in to change notification settings

JO3-W3B-D3V/ToolKit-JS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Donate JavaScript Style Guide: Good Parts Dependency Status

ToolkitV3

Okay, so I've gone and scrapped version 1 & version 2, simply because the ultimate goal behind ToolKitMin is to offer a set of tools, not necessarily a framework per-say, but rather s library. You can think of ToolKitMin as a library to aid the development of front end application development. ToolKitMin is a powerful tool for beginners to learn, as it includes some of the following:

  • Components
    • Simplistic template engine
    • State(s)
  • Queries
    • In memory
  • Services (aka AJAX)
  • Storage controller
  • ETC.

Here's an example of some code...

var app = ToolKit;
app.DOM.ready(function () {
  console.log(app);
  app.Session.set('user_id', {user_id : 1});
  console.log(app.Session.get('user_id'));

  // Query demo.
  var queryString = "age GTE 20";
  var queryCols = ["age", "name"];
  var queryData = [{"age" : "30", "name" :"Jack"}, {"age" : "20", "name" :"Jay"}, {"age" : "12", "name" :"Stacy"}];

  app.Query.setColumns(queryCols);
  app.Query.setTable(queryData);
  app.Query.select(queryString);

  app.Query.onComplete(function (records) {
    console.log('Complete query');
    console.log(records);
  });

  // AJAX demo.
  app.Service({
    url: window.location.href,
    method: "GET",
    success: function (data) {
      console.log(data);
      app.Query.exe();
    }
  });

  // Component demo.
  window.appState = {
    name: 'Will I Am'
  };

  var component = {
    name: 'demo',
    state: window.appState,
    root: app.Utils.$one("body"),
    template: '<h1><% data.name %></h1>',
    onStateChange: function () {
      console.log("State changed!");
    },
    onRender : function () {
      console.log("Rendered!");
    }
  };

  app.Component.registerComponent(component);

  app.Router.add(/home/, function () {
    console.log('Home page.');
  });
  app.Router.add(/about/, function () {
    console.log('About page');
  });
  app.Router.add(function () {
    console.log('404 Error?!');
  });
});

// Wait 2 seconds to see the component update.
setTimeout(function () {
  window.appState.name = "Will Smith";
}, 2000);

// Test the router.
setTimeout(function () {
  app.Router.navigate('home');
}, 1000);

setTimeout(function() {
  app.Router.navigate('about');
}, 2000);

setTimeout(function () {
  app.Router.navigate('404test');
}, 3000);

ToolKitMin is what the name may imply, it's a set of tools that have been gathered together, only a lot of the tool(s) have been stripped to their core, making sure that ToolKitMin-JS stays as lightweight as possible, whilst delivering plenty of functionality.

Todo

Update documentation & whatnot!




Features

  • Service
  • Component
  • Utils
  • Query
  • Router
  • Template Engine
  • Others
    • DOM
    • log
    • Session
    • Store

Service

The service method is simply ToolKit's implementation of ajax.

Component

This implements a template which handles some DHTML template via the template engine, it also handles its own state which can be manipulated outside of the component, like in the example. Finally it can dispatch it's own controller's via making use of the 'onRender' property/function.

Utils

This is just a name space for useful/simple methods, not much more to it than that.

Query

This allows you to execute a 'query' over an array of objects, it runs via making use of a callback to ensure that the main execution thread is never blocked by iterating over a large data-set.

Router

Allows you to have different URL's within the front end, allowing for an SPA, currently it only allows for hash based URL's, and it does not monitor URL changes by default, i.e. user tries to navigate to a different URL. Although such a feature is so simplistic that I believe it could be down to the developer(s) decision whether or not to implement such a feature, after all it is mean to be lightweight.

Template Engine

Currently it makes use of a template engine somewhat similar to EJS, although much smaller minimal and simplistic.

Others

These are just simple tools that can be used if necessary or not.

DOM

Namespace for DOM related features.

log

Simply console.log, although it requires dev-mode to be set to true.

Session

Allows you to store data into a user's session, aka a cover over session storage.

Store

Allows you to store data into local storage.

About

This is a lightweight front end library that contains a lot of powerful utilities, while remaining small in size.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published