LemonadeJS: Reactive library

LemonadeJS is a reactive javascript micro-library (about 6 KBytes). It enhances the integration between the JavaScript (controllers) and the HTML (view). It supports two-way binding and helps you to deliver great reusable components.

LemonadeJS does not have any dependency. It does not require a transpiler, babel, or hundreds of other dependencies and work just fine with NodeJS, in the browser or any javascript dev environment. It has a small learning curve and keeps coding fun and very close to vanilla JS.
  • Make rich and user-friendly web interfaces and applications
  • Handle complicated data inputs with ease and convenience
  • Improve the software user experience
  • Create rich CRUDS and beautiful UI
  • Highly flexible and customizable
  • Extremely lightweight and simple to use


Modern applications

Build modern applications using LemonadeJS.
import lemonade from "lemonadejs";
import Hello from "./Hello";

export default function App() {
  let self = {};
  self.count = 1;
  let template = `<>
        <Hello />
        <p>You clicked {{self.count}} times</p>
        <button onclick="self.count++;">Click me</button>
    </>`;

  return lemonade.element(template, self, { Hello });
}
See this example on codesandbox


Simplicity

Run LemonadeJS in your browser without dependencies, servers, transpiling.
<html>
<script src="https://lemonadejs.net/v2/lemonade.js"></script>
<div id="root"></div>
<script>
function Hello() {
    let self = {};
    let template = `<h1>Hello World</h1>`;

    return lemonade.element(template, self);
}

function App() {
  let self = {};
  self.count = 1;
  let template = `<>
        <Hello />
        <p>You clicked {{self.count}} times</p>
        <button onclick="self.count++;">Click me</button>
    </>`;

    return lemonade.element(template, self, { Hello });
}
lemonade.render(App, document.getElementById('root'));
</script>
</html>





Installation

% npm install lemonadejs

Or download from our Github Official


New concepts

The Pico Library

The Pico Library brings javascript common components. Each component in the library does not require any dependency and has a limit of 2 kBytes each.

Sugar (Super Global Artifacts)

The LemonadeJS Sugar is a common global container that makes easier communication between different components.


History

Lemonade v2.2.0

  • Support for tables

Lemonade v2.1.13

  • @loop on native HTML tags.
  • Precedence for val() on setAttributes
  • self.parent as reserved property to get the self of the a caller inside custom elements

Lemonade v2.1.7

  • Global queue
  • Pico Library
  • Sugar Common Container
  • self.el as a reserved property which returns the root element
  • Real time templates for custom elements.
  • Extensions and template to the children on custom components

Lemonade v2.0.6

  • @loop property
  • Better integration with components
  • Custom component templating

Lemonade v1.0.0

  • @bind, @ready, @ref magic properties.


Copyright and license

LemonadeJS is released under the MIT license. Contact LemonadeJS



About LemonadeJS

The LemonadeJS is an original micro reactive JavaScript software created to facilitate the integration between the HTML, data, and JavaScript methods in web-based development. It is an efficient and flexible way for building user interfaces. It brings the development as close to the JavaScript vanilla as possible. It has some smart concepts and a powerful optimization that offers a straightforward learning curve. The developer would have the flexibility to extend the development to the browser environment but continue building modern, complex UIs and reusable components.

On the most release, it brings new concepts such as SUGAR (Super Global Artifacts) which is a common container to simplify the communication between components. And PICO is the official component library without dependencies up to 2 KBytes.