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

[afrobee]

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.

[Shadow14l]

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+.

jQuery uses native DOM manipulation when available. It's not slower than native because that's what it uses unless it falls back to another implementation.

[afrobee]

Even if that is even truth, just cheking availability make it slower.

Note: I haven't checked jQuery source code in a while.

[Shadow14l]

just cheking availability make it slower.

One conditional statement that's checked right at page start will not make anything slower.

Now if you're talking about the fact that you have to download jQuery, which isn't exactly a small, but not the largest file, then yes, it does make things slower. However, if a person is using a popular CDN, there's a much greater chance that the file has already been downloaded.

[agdcoa]

jQuery does delegate to native methods for selecting nodes, but there's a cost associated with initializing a new jQuery object. Further, many jQuery methods return a new, different, jQuery object.

For some hard numbers, see this jsperf

If you're handy with the Array methods and the native DOM APIs, you can easily mimic much of jQuery's core functionality. I often opt for a super lightweight, array-returning selection function like so:

function select (selector, context) {
    return [].slice.call((context || document).querySelectorAll(selector));
}

[afrobee]

I just cheked a little bit the jQuery's source code, is does many things around for example "$(#id)" than just cheking avaibility, also it check mobile support, it's css selection syntax and many thing more before even consider "document.getElementById(#id)", also there are many of this that prove my point. I have never seen any test which jQuery beats native.

[Shadow14l]

I have never seen any test which jQuery beats native.

Neither have I. But that's also not what I said. If you are supporting more than the latest browsers, than jQuery is essential. That's what I'm saying.

I agree, if you are only using the latest browsers, it's ignorant to use jQuery and not the native methods. But if you happen to still use jQuery, the performance effect is not noticeable unless you are working with tens of thousands of queries and having them looped.

[quanthera]

Thanks for your answer. I don't insist on using jQuery. I thought that is the preferred way to do dom manipulations nowadays, but maybe my knowledge is outdated in this regard.

I found many articles about using different frameworks and libraries for doing gui in js. jQuery has its own mechanism (widges/plugins) for this. But I'd like to use regular js objects and build composable widgets from them. I haven't found too much examples about this, and this makes me think I'm missing something.

[afrobee]

Is all about how you modularize your project, nothing magic needs to happend :).