LemonadeJS

A micro reactive, with a two-way data binding, no dependencies, JavaScript ...

UI FrameworkReactive programming
lemonadejs/lemonadejslemonadejs.netlemonadejs

README

LemonadeJS: Reactive micro library

Create amazing web-based interfaces with LemonadeJS v2


LemonadeJS is a super lightweight reactive vanilla javascript micro-library (7 KBytes). It aims to help the integration between the JavaScript (controllers) and the HTML (view). It supports two-way binding and integrates natively with jSuites to help to create amazing interfaces quicker.


It would help you deliver reusable components and does not require transpilers, babel, or hundreds of other dependencies. It works just fine in any javascript dev environment. LemonadeJS has a quick learning curve and keeps coding fun and very close to native 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
- Lightweight and simple to use

Examples

Node


Build modern applications with lemonadeJS and node.

See this example on codesandbox

  1. ``` js
  2. import lemonade from "lemonadejs";
  3. import Hello from "./Hello";

  5. export default function App() {
  6.   let self = {};
  7.   self.count = 1;

  9.   let template = `<div>
  10.         <div><Hello />div>
  11.         <p>You clicked {{self.count}} times</p>
  12.         <button onclick="self.count++;">Click me</button>
  13.     </div>`;

  15.   return lemonade.element(template, self, { Hello });
  16. }
  17. ```

Browser


Simplicity to run in the browser without dependencies, servers, transpilers.

  1. ``` html
  2. <html>
  3. <body>
  4. <div id="root"></div>
  5. <script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
  6. <script>
  7. function Hello() {
  8.     let self = this;
  9.     let template = `<h1>{{self.title}}</h1>`;
  10.     return lemonade.element(template, self);
  11. }
  13. function App() {
  14.     let self = {};
  15.     self.count = 1;
  16.     let template = `<>
  17.       <Hello title="your title" />
  18.       <p>You clicked {{self.count}} times</p>
  19.         <button onclick="self.count++;">Click me</button>
  20.       </>`;
  21.     return lemonade.element(template, self, { Hello });
  22. }
  23. lemonade.render(App, document.getElementById('root'));
  24. </script>
  25. </body>
  26. </html>
  27. ```

Creating a table from an array of objects


  1. ``` js
  2. import lemonade from "lemonadejs";

  4. export default function Component() {
  5.     let self = {};

  7.     self.rows = [
  8.         { title:'Google', description: 'The alpha search engine...' },
  9.         { title:'Bind', description: 'The microsoft search engine...' },
  10.         { title:'Duckduckgo', description: 'Privacy in the first place...' },
  11.     ];

  13.     // Custom components such as List should always be unique inside a real tag.
  14.     let template = `<table cellpadding="6">
  15.             <thead><tr><th>Title</th>Descriptionth></th>thead>
  16.             <tbody @loop="self.rows">
  17.                 <tr><td>{{self.title}}</td>{{self.description}}td></tr>
  18.             </tbody>
  19.         </table>`;

  21.     return lemonade.element(template, self);
  22. }
  23. ```


The event object


  1. ``` js
  2. <html>
  3. <body>
  4. <div id='root'></div>
  5. <script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
  6. <script>
  7. var Component = (function() {
  8.     // Create the self object
  9.     var self = {};
  10.     self.test = function(e) {
  11.         console.log(e);
  12.         e.preventDefault();
  13.     }

  15.     // The property call is added to the observable list when added to the DOM
  16.     var template = `<>
  17.         <input type="button" value="Click test" onclick="self.test(e);"/>
  18.         </>`;

  20.     // Render the template and create the observation
  21.     return lemonade.element(template, self);
  22. });

  24. // Render the LemonadeJS element into the DOM
  25. lemonade.render(Component, document.getElementById('root'));
  26. </script>
  27. </body>
  28. </html>
  29. ```

Enable/disable HTML elements


  1. ``` js
  2. <html>
  3. <body>
  4. <div id='root'></div>
  5. <script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
  6. <script>
  7. var App = (function() {
  8.     let self = {};
  9.     self.disabled= false;

  11.     let template = `<>
  12.             <button onclick="self.disabled = !self.disabled">Toggle</button>
  13.             <input type="text" disabled="{{self.disabled}}" />
  14.             </>`;

  16.     return lemonade.element(template, self);
  17. });

  19. lemonade.render(App, document.getElementById('root'));
  20. </script>
  21. </body>
  22. </html>
  23. ```


Installation


% npm install lemonadejs


License


This software is free to use and it is distributed under the MIT license.

Documentation

Other tools


https://jsuites.net
https://jspreadsheet.com/home
https://bossanova.uk/jspreadsheet