jWidget 2

jWidget 2 is available as an npm package.

  npm i jwidget jquery

jWidget features:

• Base class Class for object aggregation.
• Dispatcher class for message listening and dispatching.
• Property class for value binding.
• Bindable collections and 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 messages and handles them synchronously in a very straightforward way. Look at the next example:

  import "core-js/stable";
  import "regenerator-runtime/runtime";

  import $ from "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 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.

Current versions of the library, its source code, tests, documentation, examples and tutorials are distributed under terms of MIT license. Versions 2.0, 2.1 and all versions prior to 1.4.8 are distributed under terms of LGPLv3 license.

Find source code and bug tracker at GitHub.

Preconfigured jWidget project template is available for an easy start.

Legacy jWidget 1 documentation is still available here.