Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Bling – the $ of jQuery without the jQuery

gist.github.com

Post reply on HN
Print view View original

61–70 of 138 posts

Re: Bling – the $ of jQuery without the jQuery

#61

Post by tracker1 »

nailer wrote: post #46
VeejayRampay wrote: post #14

Earlier quoted context omitted.

1) Paul Irish is a former jQuery team member and he has blog entries about how much he's learned from reading jQuery's source code, not sure exactly how he's "wrecking jQuery". 2) Semicolons are still in debate amongst the JS community, I don't think there's a consensus on whether they're needed or not and it seems to boil down to personal preferences. 3) This reeks of ad hominem, how exactly is Paul Irish "hipster"?…

>> Tries to play it cool by wrecking jQuery? > not sure exactly how he's "wrecking jQuery" The grandparent is misguided, but I believe they mean using '$' as the QSA. The grandparent probably uses script tags and globals in which case there would be a conflict if a script tag library requires window.$. JS modules should var $ = require('jquery') (or equivalent) and then use the $ in their local scope if they need jqu…

IIRC, there is a jQuery global object available.. you can assign it to a local variable inside in iife, which is the appropriate way to use jQuery when writing a module...

    (function(window,$){
      //module code goes here
    }(this.self || this, jQuery));
In this way, you are keeping jQuery itself and your implicit scope assigned to localized variables.

If you are writing a modern module (not necessarily jQuery based), then following node/cjs conventions is probably best. If you use this convention with such a plugin, said module should probably return the jQuery object that has been modified, and extra care should be taken that all plugins are using compatible/same instance of jQuery.

Re: Bling – the $ of jQuery without the jQuery

#62

Post by insin »

bshimmin wrote: post #58
wldlyinaccurate wrote: post #34

Earlier quoted context omitted.

You're right that your (very contrived) examples are different. But if anybody on my team writes code like this, it doesn't pass code review.

Sure, those examples are quite contrived. Here's one that's not: console.log("woof") (function() { console.log("foo") })() Without semi-colons, that blows up (with a super unhelpful error message, to boot). Sure, if you understand ASI in JS, then you'll figure out the problem very quickly. But if you just always use semi-colons, then ASI is one fewer thing to have to worry about.

Alternatively:

    console.log("woof")
    void function() { console.log("foo") }()
There really is only one ASI rule you need to remember [0] in practice: don't begin a new line with ( or [ if it's intended to be a new statement.

On this topic, it could so easily have been different; I found this interesting from Brendan Eich [1]:

> I wish I had made newlines more significant in JS back in those ten days in May, 1995. Then instead of ASI, we would be cursing the need to use infix operators at the ends of continued lines, or perhaps or brute-force parentheses, to force continuation onto a successive line. But that ship sailed almost 17 years ago.

> ...My two cents: be careful not to use ASI as if it gave JS significant newlines...

[0] this is technically a lie because everybody needs learn the other one whether they use semicolons or not: don't put a linebreak after the "return" keyword :) [1] https://brendaneich.com/2012/04/the-infernal-semicolon/

Re: Bling – the $ of jQuery without the jQuery

#63

Post by tracker1 »

bad_user wrote: post #56
gabemart wrote: post #52

Earlier quoted context omitted.

> jQuery as a library has now become huge > So if you can cut down your cold cache loading times by not > including the full jQuery library, that's probably a win jQuery 1.11.3 is 38.4 KB when minified and gzipped. jQuery 2.1.4 is 34.1 KB when minified and gzipped. I'm all for eliminating unnecessary bloat, but it's not as if a jQuery download is a huge amount of data to fetch. While jQuery is not a framework, most f…

Loading over 30 Kb of minified/gzipped Javascript over a 3G connection on a mobile phone is very problematic, as the bandwidth is poor, the CPU capacity for decompressing and parsing is poorer than on the desktop, so the latency can many times be measured in seconds, therefore loading over 30 Kb of stuff that you don't need gets to be a tough pill to swallow. Also the argument of caching is often brought up, but in m…

While I tend to agree in some respects, mainly in application memory inside the browser in mobile (RAM is still relatively small 2-4GB on many phones), the actual compute power is pretty capable on even modest smart phones for the past year+ (given a roughly 2 year turnover on phones for most), it's less an issue.

I also agree that jQuery isn't the end of what gets added... once you add a few additional libraries it gets very big, very quickly... I'm working on a project now that is loading about 19 jQuery plugins in addition to jQuery, as well as a handful of both bootstrap and jQuery-UI extensions, and the payload of a relatively simple page is coming in over 2MB (even if most of that caches, it's really big for a first hit).

People tend to start with a kitchen sink, then add not only the rest of the kitchen, but the barn as well without a thought or consideration to the final result, and the payload that goes with it.

Re: Bling – the $ of jQuery without the jQuery

#64

Post by [deleted] »

ceronman wrote: post #17

Yes, you can re-implement jQuery in 10 lines of code... if you only support 0.1% of the functionality of jQuery. jQuery was a game changer for web client side development. Thousands of work hours have been spent on it. It had a specially important role of dealing with all the inconsistencies between browsers. If you don't use all the features, nowadays you can just create a custom build with the stuff you want. If yo…

[deleted]

Re: Bling – the $ of jQuery without the jQuery

#65

Post by Bahamut »

insin wrote: post #62
bshimmin wrote: post #58

Earlier quoted context omitted.

Sure, those examples are quite contrived. Here's one that's not: console.log("woof") (function() { console.log("foo") })() Without semi-colons, that blows up (with a super unhelpful error message, to boot). Sure, if you understand ASI in JS, then you'll figure out the problem very quickly. But if you just always use semi-colons, then ASI is one fewer thing to have to worry about.

Alternatively: console.log("woof") void function() { console.log("foo") }() There really is only one ASI rule you need to remember [0] in practice: don't begin a new line with ( or [ if it's intended to be a new statement. On this topic, it could so easily have been different; I found this interesting from Brendan Eich [1]: > I wish I had made newlines more significant in JS back in those ten days in May, 1995. Then…

void blows up on Safari.

Re: Bling – the $ of jQuery without the jQuery

#66

Post by benihana »

insin wrote: post #62
bshimmin wrote: post #58

Earlier quoted context omitted.

Sure, those examples are quite contrived. Here's one that's not: console.log("woof") (function() { console.log("foo") })() Without semi-colons, that blows up (with a super unhelpful error message, to boot). Sure, if you understand ASI in JS, then you'll figure out the problem very quickly. But if you just always use semi-colons, then ASI is one fewer thing to have to worry about.

Alternatively: console.log("woof") void function() { console.log("foo") }() There really is only one ASI rule you need to remember [0] in practice: don't begin a new line with ( or [ if it's intended to be a new statement. On this topic, it could so easily have been different; I found this interesting from Brendan Eich [1]: > I wish I had made newlines more significant in JS back in those ten days in May, 1995. Then…

>There really is only one ASI rule you need to remember [0] in practice: don't begin a new line with ( or [ if it's intended to be a new statement.

Here's an even easier and clearer one: finish every statement with a semicolon.

Re: Bling – the $ of jQuery without the jQuery

#67

Post by bodhi »

takle wrote: post #19
bodhi wrote: post #11

Earlier quoted context omitted.

If we're golfing, $ = document.querySelector.bind(document); would be sufficient? ;)

(var | let | const) $ = ::document.querySelector; with experimental ES7 syntax :D https://github.com/zenparsing/es-function-bind

Huh, my joke actually turned into me learning something, thanks!

Re: Bling – the $ of jQuery without the jQuery

#68

Post by rtp »

atirip wrote: post #60
riquito wrote: post #23

Earlier quoted context omitted.

> 2) Semicolons are still in debate amongst the JS community, I don't think there's a consensus on whether they're needed or not and it seems to boil down to personal preferences. They are needed. This var func = function(x) { console.log(x); }; func; (42); is different from this var func = function(x) { console.log(x); } func (42)

A very simple rule - if line starts with '[' or '(', put semicolon before. Thats it. Personally, if all is encapsulated inside self executing function, i put one semicolon before and one after it.

What about this?

    function v(x) {
     return
       x;
    }
    
    v("yeah");
returns undefined

Re: Bling – the $ of jQuery without the jQuery

#69

Post by jrochkind1 »

XCSme wrote: post #40

Well, the thing with jQuery is that if you use a CDN to get it from, then it is a very high chance that the client already has the library cached, so the bandwidth problem is actually not that much of a problem now.

Some people have doubted that, based on so many versions of JQuery and multiple CDN's too. I'm not sure it's ever been demonstrated to be true.

Re: Bling – the $ of jQuery without the jQuery

#70

Post by insin »

benihana wrote: post #66
insin wrote: post #62

Earlier quoted context omitted.

Alternatively: console.log("woof") void function() { console.log("foo") }() There really is only one ASI rule you need to remember [0] in practice: don't begin a new line with ( or [ if it's intended to be a new statement. On this topic, it could so easily have been different; I found this interesting from Brendan Eich [1]: > I wish I had made newlines more significant in JS back in those ten days in May, 1995. Then…

> There really is only one ASI rule you need to remember [0] in practice: don't begin a new line with ( or [ if it's intended to be a new statement. Here's an even easier and clearer one: finish every statement with a semicolon.

This is precisely why I hate optional syntax, regardless of which way your preferences fall on this particular one.
Post reply on HN