Getting started
LemonadeJS version 2 is about 6 KBytes
LemonadeJS is a free and powerful micro reactive JavaScript library to help build web-based interfaces. It does not require any transpile or dependencies. It can run using NodeJS or just the preferable web 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@2/dist/lemonade.min.js"></script>
NPM installation
npm install lemonadejs
Source code (MIT)
https://github.com/lemonadejs/lemonadejs
Official components
The LemonadeJS official components are javascript implementation of common application required libraries.
Pico Library
The Pico library is a special collection of highly optimize components that does not require any dependencies and has a limit of 1.8 KBytes each. You can visit our official libraries page to know discover more about it.
The concept of LemonadeJS
The self is an object where you define properties and methods. The self is bound to a template, and when the self properties are used in the template, they are included in the observer controller, so each change in the property value reflects automatically in the HTML.
Data binding
When a property is used in the template, all updates in the property value will affect the necessary DOM in the rendered template. In the example below, for each update in the self.count value, only the necessary DOM element will be updated.
<html>
<script src="https://lemonadejs.com/v2/lemonade.js"></script>
<div id='counter'></div>
<script>
var Hello = function() {
// Reactive properties
var self = {
count: 90
}
// Count down every second
setInterval(function() {
self.count--;
if (self.count == 0) {
self.count = 90;
}
}, 1000);
// Component template
var template = '<h1>Count: {{self.count}}</h1>';
return lemonade.element(template, self)
}
lemonade.render(Hello, document.getElementById('counter'));
</script>
</html>
We will explore more about the javascript two-way binding in HTML elements in the next few chapters, but first lets learn more about the LemonadeJS special attributes.