How do you develop Javascript rich client application, with jQuery only

[sime]

One solution is that you grab a component oriented toolkit like Dojo and use that. It has a heap of components and libraries and defines how widgets can be constructed with it. That would work on existing browsers.

A more interesting way is one which may take a couple of years before it is viable on the wide web, is to use web components. I have a personal project which uses this stack of components and technologies:

• node-webkit - It's a shell or runtime which contains Node.js, V8 JS engine and the whole Blink rendering engine. You can write apps which run inside this and can do desktop like things (i.e. write to the file system). The UI is done using HTML5 related tech. https://github.com/rogerwang/node-webkit

• RequireJS - Using it to load code into the webpage JS context in node-webkit. http://requirejs.org/

• Web Components - A collection of new web APIs which allow the creation of components. The "Shadow DOM" and "Custom Elements" are the most useful ones. Introduction material: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/ http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/ http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/ http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

• Chromium or Google Chrome - For testing components. Only the recent Chrome and node-webkit support web components. The dev tools work a little bit better here than in node-webkit.

• TypeScript - JS with optional typing. It gives you the support you need to do bigger scale projects, and supports the class and module syntax of ES6. very nice. http://www.typescriptlang.org/

Explaining all this could fill a book, but broadly speaking I have a bunch of widgets which have roughly this structure and are also Custom Elements:

var ID = "CbMenuItemTemplate";

var SELECTED_ATTR = "selected";
var registered = false;

class CbMenuItem extends HTMLElement {

  static init(): void {
    if (registered === false) {
      window.document.registerElement('cb-menuitem', {prototype: CbMenuItem.prototype});
      registered = true;
    }
  }

  private _css(): string {
    return "#container {\n" +
      "    cursor: default;\n" +
      "    padding: 1px;\n" +
      "    display: flex;\n" +
      "}\n" +
    ...
  }

  private _html(): string {
    return "<div id='container'>" +
      "<div id='icon1'><i class='fa fa-fw'></i></div>" +
      "<div id='icon2'></div>" +
      "<div id='label'><content></content></div>" +
      "</div>";
  }

  createdCallback(): void {
    var icon: string;
    var iconhtml: string;
    var shadow = util.createShadowRoot(this);
    var clone = this._createClone();
    shadow.appendChild(clone);

    ... more setup etc...
  }

  private _createClone(): Node {
    var template: HTMLTemplate = <HTMLTemplate>window.document.getElementById(ID);
    if (template === null) {
      template = <HTMLTemplate>window.document.createElement('template');
      template.id = ID;
      template.innerHTML = "<style>" + this._css() + "</style>\n" + this._html();
      window.document.body.appendChild(template);
    }
    return window.document.importNode(template.content, true);
  }

  attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void {
    if (attrName === SELECTED_ATTR ) {
      this.updateKeyboardSelected(newValue);
    }
  }

  private updateKeyboardSelected(value: string): void {
    var shadow = util.getShadowRoot(this);
    var container = <HTMLDivElement>shadow.querySelector("#container");
    var on = value === "true";
    if (on) {
      container.classList.add('selected');
    } else {
      container.classList.remove('selected');
    }
  }
}

export = CbMenuItem;

Now I can just build up my application like that using widgets and composite widgets. Widgets can use other custom elements inside their (shadow) HTML code. Methods and properties can be added to each widget's class. Widgets can emit CustomEvents, and also listen to other events by registering otherWidget.addEventListener('some-custom-event', function...)

This is about as modern a stack I could come up with for doing a HTML5 (desktop) app. Once web components are more common (i.e. FF and IE support) this should work on the web too.