Elode.js - A Unique Way Web Development

ELODE (ELement On DEvelopment) is a unique javascript library/framework for creating, composing and rendering HTML Element (DOM) in a unique way. Based on JavaScript ES5 (EcmaScript 2009) that can support old web browsers and also support with other javascript libraries/frameworks

https://elode.js.org

Elode.js Lite (Lightweight-Edition)

Elode.js Lite comes with a minimalist feature for do Model View Controller with reactivity and default composer functions. Now you can make a simple and minimalist web application using the Lite Version!

Websites Using Elode.js

• SkyFlext (Elode.js + Firebase) https://skyflext.web.app
• Cycle (Elode.js + Firebase) https://alf-cycle-app.web.app
• SiKochengOren (Elode.js + ChatGPT) https://sikochengoren.netlify.app (Server Down)
• Blueplan (Elode.js) https://blueplan.netlify.app

Install

• Download Release Versions
• Using CDN:

<script src="https://elode.js.org/src/v2.0/elode.js"></script>

<script src="https://elode.js.org/src/v2.0/elode.min.js"></script>

<script src="https://elode.js.org/src/v2.0/elode.lite.js"></script>

• ES6 Module:

import { Elode } from "https://elode.js.org/src/v2.0/elode.esm.js"

Playground

Try Elode.js (online) with

• CodePen.io https://codepen.io/equneko/pen/BaGobLa/ (v2.0)
• Playcode.io https://playcode.io/elode (v2.0)
• JS Fiddle! https://jsfiddle.net/equneko/c9jnu6ma/ (v1.3)

Browser Compabilities

• Chrome (Version 23 - 114)
• Edge (Version 12 - 113)
• Firefox (Version 21 - 114)
• Opera (Version 100+)
• Safari (Version 16.5+)
• Internet Explorer (IE9+ / IE11 Stable)
• Android WebBrowser (v4.4+ / v5.0 Stable)

JS Compabilities

• Firebase (Tested) https://firebase.google.com
• jQuery (Tested) https://jquery.com
• highlight.js (Tested) https://highlightjs.org
• chart.js (Tested) https://chartjs.org

CSS Compabilities

• Tailwind.css (Tested) https://tailwindcss.com/
  Example 1 - https://codepen.io/equneko/pen/rNQwKVa

• w3.css (Tested) https://www.w3schools.com/w3css/defaulT.asp

Unique

Elode.js brings you to the unique HTML-like Syntax for typing HTML code in a unique way! it's can be fast or simple??? Nope. it's like you will be confused if you don't understand with this unique syntax but you can write quickly, different and less-code if you understand it.

//Basic
Elode("h1 Hello World").render();

//Next
Elode(`div#app 
  <h1.title Hello Elode.js!> 
  <p.sub Get Started to <b Elode.js> >
`).render();

//Extended
Elode.use('div','h1','p');

div("#app.container",
  h1(".title Elode.js"),
  p(".sub A Unique Way <b Web Development>")
).render();

Result:

<h1>Hello World</h1>

<div id="app">
  <h1 class="title">Hello Elode.js</h1>
  <p class="sub">Get Started to <b>Elode.js</b></p>
</div>

<div id="app" class="container">
  <h1 class="title">Elode.js</h1>
  <p class="sub">A Unique Way <b>Web Development</b></p>
</div>

Declarative

Based on HTML-DOM, build your own Component/Element friendly with Standard Web Development. How it works? Elode.js includes their procedure into DOM that cause the Component/Element's same as HTMLElement.

const { use, render } = Elode;
use('div','h1','p');

function CardView(title, content){
 return div("#mycard.card-view.some-class",
    title.clone(), h1("[style color:purple] Elode.js"), p(content)
 );
}

render(
 Title = h1("Declarative"),
 MyCard = CardView(Title,"Get Started to <b Elode.js>")
);

Result:

<h1>Declarative</h1>
<div id="mycard" class="card-view some-class">
  <h1>Declarative</h1>
  <h1 style="color:purple">Elode.js</h1>
  <p>Get Started to <b>Elode.js</b></p>
</div>

Lightweight

Write in JavaScript ES5 (EcmaScript 2009) that makes the size's small and minimalist and also it's works on some old web browser such as IE9+ or with compatible version on IE11

Elode.import('use','render');
use('ul','li');

let js = ['React','Vue','Svelte','Angular','jQuery','Elode'];
render(
   ul( 
    js.map(x => li(x)) 
   )
)

Result:

<ul>
   <li>React</li>
   <li>Vue</li>
   <li>Svelte</li>
   <li>Angular</li>
   <li>jQuery</li>
   <li>Elode</li>
</ul>

Reactive

All Component/Element can be Reactive! if you add some EventListener to your element or you can use alternative way with direct procedure

const { use, render } = Elode;
use('button');

render(
  button("You Count {{count}}",{
     count:0,
     onclick(){
        this.count++;
     }
  })
);

Result:

<button>You Count 0</button>

ES6 Module

Elode.js ES6 Module implementation in v2.0 that we have include elode.esm.js version for import/export feature using ES6 Module.

import { use, render } from "https://elode.js.org/src/v2.0/elode.esm.js"
import { Counter } from "./Component.js"

use('div','h1','p')

render(
  div("#app",
     h1("Hello ES6"),
     p("Elode.js ES6 Module Version"),
     Counter(1000)
  )
)

What's The Next?

How about to using Elode.js now? First, you need to learn more about this library! So, where to start? well, let's view this actions below. You can choice to start from:

• Get Started
• Read Documentation
• Learn Example

Icon Resources By Icons8

All embedded icon resources in this repository are platformed by Icons8.com
Except the one, that's official Elode.js icon by the Author

Homepage Subdomain By JS.ORG

Thanks to JS.ORG for their free subdomain service for elode.js.org
now we have homepage link direct like an official library/framework homepage :v