Getting started

LemonadeJS is about 7 KBytes and does not require any dependencies to run.

LemonadeJS is a free and powerful micro-reactive JavaScript library to help build web-based interfaces. It does not require any transpile or dependencies. So, you can develop components using webpack or directly into the browser.

You can build from a simple widget to more advanced web-based applications.

Installation

The reactive LemonadeJS can be installed using one of the following methods.

CDN

<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>

NPM installation

% npm install lemonadejs

Source code (MIT)

https://github.com/lemonadejs/lemonadejs

Quick Start

If you would like to create a base project on your machine, you can use.

// Create a new project
% npx @lemonadejs/create myApp
// Go to the project folder
% cd myApp
// Run a hot update server
% npm run start

Now you can go to your browser and have fun.

Official components

The LemonadeJS official components are javascript implementation of common application required libraries.

Testing Library

Tester is a official library for testing LemonadeJS components.
https://lemonadejs.net/v3/tests

Pico Library

Pico is a unique collection of LemonadeJS components with no dependencies and a limit of 2 KBytes each.
https://lemonadejs.net/v3/libraries

The concept of LemonadeJS

The {self} is an object where you define the properties and methods of your component. A property of the {self} used in the template creates observers to help keep synchronization between the value and the HTML element.

Data binding

As shown in the example below, all property value updates will affect the elements in the DOM.

<html>
<script src="https://lemonadejs.net/v3/lemonade.js"></script>
<div id='counter'></div>
<script>
function Hello() {
    // Reactive properties
    const self = this;
    self.count = 90;
    // Count down every second
    setInterval(function() {
        self.count--;
        if (self.count == 0) {
            self.count = 90;
        }
    , 1000);
    // Component template
    return '<h1>Count: {{self.count}}</h1>';
}
lemonade.render(Hello, document.getElementById('counter'));
</script>
</html>

Next Chapter

We will explore the two-way javascript data binding in HTML elements in the following few chapters, but first, let's learn more about the LemonadeJS attributes.

Next chapter: LemonadeJS attributes