ramd.js JavaScript library for making web applications.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src update Jul 14, 2018
LICENSE Initial commit Jul 14, 2018
README.md Update README.md Jul 16, 2018
package.json update Jul 14, 2018
ramd-logo.png First commit Jul 14, 2018
simple-todo.html First commit Jul 14, 2018
todo.html First commit Jul 14, 2018

README.md

License MIT Gzip Size

ramd.js

Minimal standalone JS library for building web applications.


RAMD or Render - Add - Modify - Delete is minimal 0.65 kb library for making simple list projects. Everything is based on the "simplified virtual DOM" that is basically JavaScript Object listing the essential element properties. This Object acts like internal DB that can be stored locally or send to the server. The importance of the "virtualdom" vs DOM is not about the speed but rather ease of use and storage.

// simplified virtual DOM

var someObjectName = {
  "1531563018024-9718829aa677": {
    "element": "li",
    "text": "Hello World",
    "cssStyle": "color:red",
    "id": "",
    "className": "hello"
  },
  "1531563018029-47baba1f2315": {
    "element": "div",
    "text": "button",
    "cssStyle": "",
    "id": "",
    "className": "del"
  }

The Object method "1531563018024-9718829aa677" is Timestamp - Random Number. You can use the Timestamp to determine when the element was added.

This library can be used for render and store any kind of DOM elements. Menus, lists or individual HTML elements. It just takes the virtual DOM and generates DOM nodes. The advantage is that the virtual DOM can be stored anywhere not just in the browser.

What contains library?

  • $ - Selector
  • on - addEventListener
  • Render and renderOne - render all and render one element
  • Adding, modifying and deleting elements
  • localStorage for storing the virtualdom

Making the super simple TODO :

// Just with few lines of code you can add and delete elements

var el1 = {}

on($("#bt"), 'click', function(e) {
    add(el1, $("#todo")[0], "li", $("#tx")[0].value);

    on($("li"), 'dblclick', function(e) {
        del(el1, this);
    });
});

Here is the Demo of the super simple TODO:

Super simple TODO demo

More complex TODO demo that saves the data in the browser

Download & Installation

You can use direct download or:

$ npm i ramd

or use CDN:

<script src="https://unpkg.com/ramd@1.0.1/src/ramd.min.js"></script>

License

This project is licensed under the MIT License