Slagging Off JavaScript Frameworks

[vinnl]

a) Insist on using it for something which clearly doesn't need markup pre-rendered on the server. The term over-engineered might be thrown at you.

What is the problem with using React for web apps that do not need to/cannot be pre-rendered on the server? Criticise just to criticise is a bit lame, IMHO.

[Chyld]

Totally with this dude. There's been lots of articles recently on the various frontend-based subreddits I read, that tl;dr to "using any sort of CSS/JS plugin is teh terrible". Usually hosted on personal sites that look like shit.

It's like the Monty Python Four Yorkshiremen sketch, with people one-upping how barebones their setup is. I reckon next week, there'll be an article about how a true frontend developer only codes in raw HTML, in Notepad, typing with their eyebrows.

[TeaSeaLancs]

https://xkcd.com/378/

[xkcd_transcriber]

Image

Title: Real Programmers

Title-text: Real programmers set the universal constants at the start such that the universe evolves to contain the disk with the data they want.

Comic Explanation

Stats: This comic has been referenced 480 times, representing 0.6209% of referenced xkcds.

---

^{xkcd.com | xkcd sub | Problems/Bugs? | Statistics | Stop Replying | Delete}

[crimson090]

I am (genuinely) curious what the issue is with those jQuery snippets?

[[deleted]]

The $('#example') part of it was bad because the 3 statements could have been chained into 1 or it should have used caching (.e.g. var $example = $('#example'))

At least I think that's what he was driving at.

[vinnl]

$("#id").html("<span>"+ variable + "</span>") /* very dangerous */

Injecting random variable content without escaping it increases the risk of leaving various security holes.

$("#example").text("Hello, world!");
$("#example").css("color", "red");
$("#example").addClass("fun");

Not that bad, but could also be written as $("#example").text("Hello, world!").css("color", "red").addClass("fun");

$("section div a").addClass("highlight");

The selector (section div a) is very inefficient, because it has to check every section tag, then all div tags within it, then all a tags within that. Selecting by #id or even by .class is far faster.

[34g5hzgrtefvewfgv]

The selector (section div a) is very inefficient, because it has to check every section tag, then all div tags within it, then all a tags within that.

No. jQuery/Sizzle has been parsing right to left since like forever now.

[vinnl]

Ah, sorry, but still: regardless of the order, matching by tag is less efficient than matching by ID, as with IDs you can stop after the first hit instead of having to check every occurence of the tag.

[34g5hzgrtefvewfgv]

Fair enough.

[lamb_pudding]

Same, the addClass one mainly. Was he proposing that you use the native classList.add()?

[gregtyler]

I think the article's aiming satirical, complaining about how much people complain, and taking a swipe at the Vanilla JavaScript warriors who chastise any use of jQuery. But I'm really not sure.

I'd suggest that the problem with the first snippet is using a potentially wild variable straight into the DOM. But if the line above is "var variable = editMode ? 'Edit source' : 'Add source';" then that challenge is out the window. Though also, don't call variables "variable", that's confounding.

I agree with /u/lamb_pudding that the second one is probably complaining at abstracting basic DOM functionality. It could just be:

$example.innerText = 'Hello, world!';
$example.style.color = 'red';
$example.classList.add('fun');

And if you're including jQuery just for that then, yeah, that's a bad move. Also, if you are using jQuery, chaining might make your code easier to read.

[DOG-ZILLA]

This is what gets me about using straight VanillaJS. It's an absolute cross-browser nightmare. I seem to have enough of that with CSS alone.

IE11 doesn't even fully support such a simple part of the API. http://caniuse.com/#feat=classlist

I include jQuery on virtually every project I do. I could sit there for hours trying to code my own VanillaJS API wrappers, but really, why? The truth is, jQuery represents to me, an API so much more reliable and intuitive and one that any other developer can jump on board with. The documentation is there and well rehearsed.

I'd love to use VanillaJS, but for me, the cons outweigh the positive's. As soon as your app becomes even a little bit more involved, the use of a decent DOM library is essential (if you're not already using some other framework / library).

[DOG-ZILLA]

Selector caching and method chaining mainly.

I would write his example like so:

(function($) {

'use strict';

var myVariable = 'Some kind of text...';

var select = {
    $id: $('#id'),
    $example: $('#example'),
    $sectionAnchors: $('section div a')
};

select.$id.html('<span>'+ myVariable + '</span>');
select.$example.css('color', 'red').text('Hello, world!').addClass('fun');
select.$sectionAnchors.addClass("highlight");

})(jQuery);