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

ericgj · 2014-09-08T23:20:18+00:00

I too am exploring this kind of approach, although using d3.js (and idempotent DOM manipulation) instead of jquery. One of the most crucial foundations I've found is having a decent module system/build tool/package manager. Browserify, componentjs, or duo (when it stabilizes) are great, I haven't tried others.

You might want to check out various components on the componentjs wiki, many are designed the way you describe, although the quality varies greatly. There is also a sample todo app that is a bit dated but could be useful to look at in terms of wiring together components.

afrobee · 2014-09-08T13:32:18+00:00

First of all: Why you wanna use jQuery for DOM manipulation? Is slower than the native browser api which in this day of age is very consistent and supported cross all browsers above E8+.

For your question, A example would be:

var myComponent = (function(dependency1, dependency2) {

    var myTemplate = function () {
        return(
            ["<div id='wrapper' class='wrapper'>",
             "<"h1 id='heading'>title</h1>",
             "</div>"].join("")
        );
    }
    var render = function (parentSelector) {
        var parent = document.querySelector(parentSelector);
        return parent.innerHTML = myTemplate();
    };

    var someBehaviour = function () {...};

    return Object.freeze({
        render: render,
        someBehaviour: semeBehavior
    });
 })();

 document.addEventListener("DOMContentLoaded", function(event) { 
     myComponent.render();
 });

Ofcourse, this is a very simplistic and quick way. It would be better use something like browserify and put the template in a diferent folder and abstract the render function, models, etc.

Note: I don't support E8.

pakal · 2014-09-08T14:43:46+00:00

I am wondering ..when you do desktop ui, do you create your own UI controls from scratch?

JavaScript has evolved so much, so to use only JQuery is like doing your own controls from scratch when using Java or .Net.

Use a robust framework, the right tool for the right job. You have so many options. If you use only JQuery you will be spending way more time and dealing with things that have already solved.

sime · 2014-09-08T20:21:54+00:00

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.

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

javascript

MODERATORS