I believe that the key to preserving a solid practical benefit to the vanilla framework is ADAPTATION. The reason for the millions of beginners (and even intermediate-to-advanced developers) rushing in to use jQuery is not just its documentation, although vanilla has a more solid standard community wiki at JavaScript | MDN that ensures backward cross-browser compatibility than the jQuery alternative. Rather, beginners and lazy programmers concern themselves with wiki, while strong and seasoned developers rely so much on ability and proficiency with low-level custom reusable Vanilla Frameworks to mimic certain popular semantics to avoid dependencies unless necessary or demanded by the client (such as when dealing with API's).
What is missing is the transition path for beginners to become advanced developers. That said, there is so much more wiki for the use of jQuery than there are (if there exists) for the developer documentation for the CORE of jQuery that should help level up beginners from intermediate to advance paths which should put back reliance on the Mozilla Javascript MDN. If jQuery's core developers have invested time to document the CORE, there could have been more frameworks built than there are jQuery plugins built.
For instance, there is far too little documentation about the fact that the heart of jQuery is in the following custom code:
_.extend = _.fn.extend = function() {
var target = arguments[ 0 ] || {}, options, copy,
i = 1,
length = arguments.length;
if ( i === length ) {
target = this;
i--;
}
for ( ; i < length; i++ ) {
if ( ( options = arguments[ i ] ) != null ) {
for ( name in options ) {
copy = options[ name ];
target[ name ] = copy;
}
}
}
return target;
};
So, more developers rely on using jQuery thinking the same cannot be done with their own code, perhaps believing it is the easiest way to do it because of the lack of a wiki. Plugin developers love the way jQuery offers the use of building new plugins with the following simple code without considering whether or not the same can be achieved by their own custom implementation:
$.extend({
hello : function(){
console.log('$.extending hello');
}
});
$.hello();
$('body').extend({
hello : function(){
console.log('$.fn.extending hello');
return this;
}
}).hello();
Then there are others who rely on solid vanilla with an important intermediate understanding of more advanced topics, which is why a good dedicated website is built documenting why you might not need jQuery. There is also a good example of building your own jQuery-like-library and several other blogs that are readily accessible via Google search. These are still intermediary (as they don't include Modular Object Semantics, and are rather very far-fetched from the jQuery model, and just a beginner alternative, easy to copy-paste, yet HARDER TO MAINTAIN than just using jQuery. But still, the best is in building an entirely new copycat while at the same time far from being a jQuery fork. Nonetheless, these few examples describe an alternate, preliminary starting point, so we need such resources as these as primers to transition developers (the lazy, the novice, and the intermediate, the quick fixers) to a more advanced object oriented, practical understanding, or easy-to-grasp and portable implementation.
The present downside of jQuery is its huge dependency with Sizzle, a pure-JavaScript CSS selector engine designed to be easily dropped into a host library, that is absent from jQuery 1.0, but, that was before querySelectors
were integrated into modern browsers, thanks to the conceptual contribution of this engine. This library though makes every new release of jQuery a tax overhead to performance.
While solid developers rely on modularity, requiring another set of skills for bundling or including only the needed code for production purposes to cost-cut-code-budget those performance issues such as by using requirejs with bower as in this 2014 example, and then minifying and optimizing the result with r.js via node, there is still a need for full control where such things are absent from the present popular libraries as jQuery that benefit the developer to manage his own vanilla better than reading an entire jQuery handbook! I'd rather invest my time reading MDN than burning the candle on the jQuery oil!
Maybe other people thought that the only way to use $
is to use jQuery, but the Mozilla JavaScript | MDN also uses $
to build the community wiki without the jQuery library integrated into their downloadable site!
These days, it is nearly or virtually impossible to find CORE developer documentation for the jQuery library on the internet as was the case 6 or 10 years ago, maybe because by then, (if that didn't cease) people would create their own frameworks inspired by jQuery and then jQuery would not be as popular. Today, there is more documentation on HOW TO USE jQuery, besides its independent jQuery extensions/plugins that are plaguing the net away from Vanilla MDN, rather than how to build libraries that can support jQuery!
For instance, try to search Google or Stack Overflow about how to create a custom $(this)
pure Javascript/vanilla code and you'll find that this basic, yet advanced developer question is part of the lost transition! That may change though after Google searching...
$(this) undefined via requirejs on bower and node
This was my own question 6 days ago that not many developers can answer (except maybe, the jQuery core developers themselves and the smart few code diggers (working with advanced modular js out there whom I welcome to contribute their answer as well.)
What is needed, therefore, which is the missing link, is to bridge the GAP and promote that bridge that transitions developers to become highly advanced programmers. The fact that millions are flocking in to use jQuery and engage questions and answers to this trend is relative to the reality that there is stagnation for beginners transitioning over to quality programmers in the advanced side.
In my practical use case, (bearing other jQuery-reliant developers in mind), I have taken the liberty to codify familiar semantics, a custom vanilla CORE library built to mimic and support jQuery syntax without worrying about licenses, as a way to ADAPT to the trending craze while transitioning the crowd to think just a little about the portable CORE! I have been forced to rethink my own implementation (whether or not to use jQuery) for my own projects due to the new set of standard built by Facebook engineers and published in their article at FACEBOOK Engineering and I have learned that I have implemented about 70-80 percent of the way Facebook does theirs with their new web version of FB, except building my own CODE-BASE since I heavily relied on jQuery for a similar use case (which the article also describes possible by using other frameworks) or needless to say, building a similar platform and also without relying on REACTJS but preserve the vanilla framework exclusively altogether!
The benefit is that when I started building my custom code-base, what was 7MB page is now less than 368kb resources with its un-minified library version!
I did this when I was faced with a challenge to look at how I built my code and tried the best that I can to search for proven ways, and then to make it as compliant as possible according to the most reliable source that I was able to find which is not using jQuery on a production model (Facebook's), and I was forced to look at how jQuery developers built their code, inspect several versions of the jQuery CORE down to version 1.0 prior to Sizzle, until what I was only unable to do was to successfully find AVAILABLE SOLUTIONS on how to change the behavior of a custom $(this)
on my custom setup. Almost every portable solution in the net provides only for $(selector)
but no example shows documentation on how to localize $( this
), because again there is little to no documentation about how jQuery is built! So I built my own code and plugged it into my previous jQuery copycat where I was missing only that, only to find out that Object.assign()
and Function.prototype.call()
, Function.prototype.bind()
and Function.prototype.apply()
can achieve the same thing and I found myself consequently revising to as less code as possible from the jQuery object where they miss this documentation for the following snippet for instance:
if(typeof selector === 'object'){
if(selector == document || selector == window){
if(selector===window) {
console.log(this);
return Array(window);
} else if(selector == document){
return _('html');
}
return _('body');
} else {
if(selector instanceof Element){
this.html = function(text){
if(arguments.length>0)
return selector.innerHTML = text;
else
return selector.innerHTML;
}
this.children = _.map(selector);
return this;
}
}
}
The more people will have access to resources such as this from a modular, Object Semantic Model and make them available in Stack Overflow, or other wikis, then the more people will understand how the jQuery model is built in order for themselves to build their own, without worrying about code compatibility with existing versions of the jQuery library.
So in my view, what's needed is to promote to UNLEARN JQUERY by re-learning Vanilla Technology and building THE MISSING MANUAL while preserving support for jQuery! That actually doesn't allow you to unlearn jQuery overall, but rather, that will help you achieve the balance to have a solid grasp and foundation of both jQuery and your own Vanilla Framework without worrying about the learning curve because people will have to worry only about how yours is built differently since you can also port their own jQuery code to yours because of the support you can choose to preserve for the jQuery Framework! Who knows, you're library may just be the next popular craze in the hood when you can build a good documentation or a wiki for your 5 kilobyte CORE! :D
Talking just about that is of no practical benefit and doesn't help a transitioning community without a working example, so here is one actual app built just for that on a 6.8kb jQuery-like code-base:
custom CORE jQuery library support.