jWidget 2

jWidget 2 is available as npm package.

  npm install --save jwidget

jWidget features:

• Base class Class for object aggregation.
• Event class for event listening and triggering.
• Property class for value binding.
• Collections, algorithms, synchronizers.
• Component for UI component creation and inheritance with HTML templates and DOM bindings.
• and many other...

jWidget is a pure object-oriented solution which doesn't rely on mystic custom HTML templates and unclear update cycles. Each object simply listens events and handles them in very straightforward way. Look at the next example:

  import "es6-promise/auto";
  import "script-loader!jquery";

  import {TWOWAY} from "jwidget";
  import bindText from "jwidget/bindText";
  import bindVal from "jwidget/bindVal";
  import Component from "jwidget/Component";
  import Property from "jwidget/Property";
  import template from "jwidget/template";

  @template(`<div class="greeter">
               <p>Your name: <input jwid="name-field" type="text"></p>
               <div jwid="greeting"></div>
             </div>`)
  class Greeter extends Component {

      private name = new Property("guest");

      protected renderNameField(el: JQuery) {
          // Bind element value to property
          bindVal(el, this.name, TWOWAY);
      }

      protected renderGreeting(el: JQuery) {
          // Build greeting message
          const text = this.name.map(name => `Hello, ${name}!`);

          // Bind element text to message
          bindText(el, text);
      }
  }

  $(() => {
      new Greeter().renderTo("body");
  });

Sure, in Angular and React this code would be much shorter, but in jWidget you see clearly how it works. This gives you confidence in your ability to implement as complicated and big MV application as you would like to. You are free to use all well-known OOD patterns and follow OOD SOLID principles. Read the jWidget 2 tutorials for more examples.

The difference between jWidget and other Model-View frameworks is the approach of working with properties and collections. In other frameworks, data binding is performed implicitly via HTML templates. In jWidget, data binding is performed explicitly using Property and its bindings. Instead of special tags-repeaters in HTML templates, you work with collections explicitly using Collections and their synchronizers.

This approach is more effective: data binding is not constrained by connection between model and view. All the same practices are used to bind model objects to each other and to bind view components to each other.

Project license is LGPLv3.

Find source code and bug tracker at GitHub.

Legacy jWidget 1 documentation is still available here.