All Projects → vladocar → Ramd.js

vladocar / Ramd.js

Licence: mit
ramd.js JavaScript library for making web applications.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Ramd.js

spring-boot-mongodb-react-java-crud
Spring Boot, MongoDB and React.js CRUD Java Web Application Example
Stars: ✭ 33 (-48.44%)
Mutual labels:  crud, webapp
Mean Stack Angular6 Crud Example
MEAN Stack Angular 6 CRUD Web Application
Stars: ✭ 69 (+7.81%)
Mutual labels:  crud, webapp
NodeExpressCRUD
Node, Express, Mongoose and MongoDB CRUD Web Application
Stars: ✭ 45 (-29.69%)
Mutual labels:  crud, webapp
Mean Stack Angular5 Crud
MEAN Stack (Angular 5) CRUD Web Application Example
Stars: ✭ 107 (+67.19%)
Mutual labels:  crud, webapp
servant-beam-realworld-example-app
Exemplary fullstack Medium.com clone powered by Servant and Beam
Stars: ✭ 33 (-48.44%)
Mutual labels:  crud, webapp
Koa React Notes Web
🤓 A simple SPA built using Koa (2.5.1) as the backend and React (16.4.1) as the frontend. Features MySQL integration, user authentication, CRUD note actions, and more.
Stars: ✭ 61 (-4.69%)
Mutual labels:  crud
Theorytracker
🎼 HTML5/WebAudio multi-track functional harmony analysis and songwriting app! -- https://hlorenzi.github.io/theorytracker/
Stars: ✭ 62 (-3.12%)
Mutual labels:  webapp
New Empty Python Project Base
The Perfect Python Project Template. Bored of coding anew the same thing for your new Python projects? Here is what you need. Click below on the "use this template" green button to start using it instantly. Rename the "project" folder and all references to this folder to customize your project name.
Stars: ✭ 60 (-6.25%)
Mutual labels:  library
Vulkan2drenderer
Easy to use 2D rendering engine using Vulkan API as backend.
Stars: ✭ 60 (-6.25%)
Mutual labels:  library
Sparkbutton
Android library to create buttons with Twitter's heart like animation.
Stars: ✭ 1,129 (+1664.06%)
Mutual labels:  library
Sqlite orm
❤️ SQLite ORM light header only library for modern C++
Stars: ✭ 1,121 (+1651.56%)
Mutual labels:  crud
Jpg Glitch
glitch images with jpg encoding
Stars: ✭ 1,120 (+1650%)
Mutual labels:  webapp
Quantumgate
QuantumGate is a peer-to-peer (P2P) communications protocol, library and API written in C++.
Stars: ✭ 62 (-3.12%)
Mutual labels:  library
Mt Music Player
Web music player
Stars: ✭ 63 (-1.56%)
Mutual labels:  webapp
Mern Stack Authentication
Secure MERN Stack CRUD Web Application using Passport.js Authentication
Stars: ✭ 60 (-6.25%)
Mutual labels:  crud
Dotsloaderview
Simple dots loader view
Stars: ✭ 63 (-1.56%)
Mutual labels:  library
Node Express Typescript Boilerplate
A boilerplate for developing web apps with Node.js, Express.js & TypeScript. Demonstrates helpful recipes in 8 steps in individual branches.
Stars: ✭ 60 (-6.25%)
Mutual labels:  webapp
Webapp.ahk
"AHK-Webkit" / Webapp.ahk - Library for developing web-based apps with AutoHotkey.
Stars: ✭ 62 (-3.12%)
Mutual labels:  webapp
Best Of Web Python
🏆 A ranked list of awesome python libraries for web development. Updated weekly.
Stars: ✭ 1,118 (+1646.88%)
Mutual labels:  library
Cryptofin Solidity
A collection of Solidity libraries for building secure and gas-efficient smart contracts on Ethereum.
Stars: ✭ 62 (-3.12%)
Mutual labels:  library

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/[email protected]/src/ramd.min.js"></script>

License

This project is licensed under the MIT License

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].