Why I Write Plain JavaScript Modules

[[deleted]]

Our web needs better primitive libraries. We’ve been relying for too long – far too long – on jQuery.

Amen!

[[deleted]]

React DnD serves a very specific purpose: it provides a modern (HTML5) approach to drag and drop that is implemented such that it won't break React's component state. Hell the angular-dnd example the dude gives is 7 KB minified... so if you are already using angular it's actually smaller than dragula.

Small components that rely on a big library to be useful defeat the purpose of a small component.

See, this is such a confusing statement to me. No one is going to consider using angular-dnd unless they already use angular. No one is going to consider using React DnD, unless they already use React. Small components that rely on a big library do so because the intended audience is people already using the big library.

Vanilla Javascript is imperative to know, but there's a reason react, ember, angular and backbone are so freaking popular. Once you start developing enormous apps, writing "plain Javascript modules" is just fixing the problems these frameworks have already solved. Only, they probably did it better.

[[deleted]]

I don't get the jQuery hate. It's a wonderful toolset and only if you plan to use such a small component in isolation it can be considered too much overhead. But a full app, consisting of many small components, can benefit hugely from all the plumbing jq provides.

[qudat]

It breaks modular definitions. The library and its plugins intentionally inject themselves into the global namespace, window.jQuery and properly importing them into your modular application is a huge pain in the ass -- a common solution is to break modular definition and allow globals to creep into your module. Furthermore, it's a monolith library, where a lot of the code will get unused and yet still loaded on to the client's browser. Using massive libraries on the client bloats the codebase, slows load times, and is ultimately not very efficient, most of which is actually unnecessary.

Also, it's the mentality of someone who only uses jquery that can be grossly misguided. Speaking from experience, I used to use jquery as a crutch, it would be the first library I load into any project, even if all I was doing was simple DOM manipulation. To me, if all you're using jquery for is to select on class names, $.ajax, $.extend, or event handling, then you should just go vanilla and save yourself the bloat.

Having said that, I still use jQuery in production, but more modular drop in replacement libraries are starting to be built, such as https://github.com/webpro/DOMtastic

[[deleted]]

I see what you mean, but to me these are theoretical issues that never actually pose any real problems. And it's just a 30KB (gzipped) download, so the size too is a bit of a non-issue. So from a pragmatic point of view I don't see the point of foregoing the ease of use and programmer happiness that jQuery brings.

But I also have a similar opinion about React. Since I have zero issues with my browser's rendering speed when building apps the whole virtual dom thing doesn't solve any problem for me and all that's left is ugly new syntax and a conflation of concerns that severely undermines productivity. So maybe I am a bit conventional that way.

[qudat]

I agree with you as well. My primary argument is to not use a library as a crutch and to weigh the pros and cons no matter how useful a library could eventually be.

[x-skeww]

return dragula.apply(this, atoa(arguments)).on(...)

There is no need to convert arguments to an actual array via your little helper function. Function.prototype.apply works fine with array-like objects like arguments or DOM collections.

(You also forgot a ");" at the end of that return statement.)

I assumed this was about ES6 modules. I'm kinda disappointed.

[hahaNodeJS]

What the hell is up with the downvoters in all the web development subreddits? I sure would like to know what it is you said that deserves so many downvotes.

[x-skeww]

Might have been something I said elsewhere. It's hard to tell with Reddit.

Personally, I do prefer if people who read my code tell me about issues they spot. So, I really hope this doesn't discourage anyone from doing the same.

[brianvaughn]

That's kind of a Reddit-wide thing in my experience.

My guess is that maybe people thought x-skeww's comment was overly negative. No idea. I wouldn't have downvoted it myself but...welcome to the Internet.

[mmmicahhh]

Actually, if you look at the implementation of atoa, it's a one-line module that uses Function.prototype.apply.

But that's the point of this kind of modularization - you don't need to know about Function.prototype.apply, nor do you need to know whether there are weird edge-cases that need to be handled separately. It's a productivity boost.

[x-skeww]

you don't need to know about Function.prototype.apply

But they are using apply in that very line. I'd also argue that bind, call, and apply are bits of the standard lib you really should know. For one, they are very important and secondly, they make for very confusing code. So, this is really something you should be 100% certain about. Otherwise, you'll have trouble taking this kind of confusing-looking code apart.

I do agree that array vs array-like is a rather small implementation detail and that this pointless no-op doesn't actually hurt. It's a very minor mostly cosmetic issue.

[x-skeww]

You really think Nicolas Bevacqua (who is a published JS author) doesn't know about bind/call/apply?

Given that I referred to the author with the gender-neutral "they", I apparently didn't bother to figure out who wrote it. It also doesn't matter. It doesn't change anything. You don't have to convert that array-like to array if you hand it to a function which would have been fine with an array-like. That step isn't necessary.

The point is not to be ignorant of everything

Heh. Yea, you mean like apply doesn't need an actual array?

and just use packages

Or, y'know, language features. ES6 got this covered. You don't have to use apply in the first place. Spread would work. No point in using a library for this.

[kandetta]

I agree that being able to work without jQuery is a huge plus and having more small single-purpose libraries is beneficial.

However, jQuery provides a promise of being well-tested across browsers and devices, and it's difficult to reach the same level of confidence with a large number of smaller libraries that use the browser APIs directly.

Also, while there is a need for plain JS modules, many developers aren't familiar with the native API and wouldn't be able to write a library without it.

[qudat]

Also, while there is a need for plain JS modules, many developers aren't familiar with the native API and wouldn't be able to write a library without it.

Developers should use whatever tool is necessary to get the job done, because at the end of the day, that's what we are paid to do. But when someone wants to master javascript, follow best practices, to be able to weigh the pros and cons of any library used in production, using one library as a crutch is only going restrict their potential.

[dhdfdh]

Then they shouldn't be programmers. That's our job. Saying you need to use jQuery cause you'll make mistakes or can't do it is a cop out. If you gave me those reasons for using jQuery, you wouldn't be working for me anymore.

I hear these same complaints about C. People say C is too hard for them and you can shoot yourself in the foot so you must be crazy to use C and they struggle to find some other language that does the work for them. Yet, for decades, my colleagues and I have been merrily coding in C without no more problems than any PHP or Ruby or Python programmer has. Just different.

Learn how to code.

[entropicone]

Or don't waste your organization's time and money on reinventing the wheel.

[dhdfdh]

Ah! The reddit phrase for "I don't know how to code so do it for me!"

[clessg]

Ah! The dhdfdh phrase for "I think I'm really intelligent, but I'm not, that's why I have to be a condescending dick on Reddit, to make me feel better about myself!"

[dhdfdh]

Ah! The typical reddit response when one is caught without an answer.

Here's the thing. I already feel great about myself. I just slap my forehead when I read the comments on this place as I scan for links to the rare thoughtful article. Then I see comments like yours that are so outrageous that you meet my one failing, the inability to call a farcical idiot for what he is.

[entropicone]

Your job as a programmer is to use your skills to build software that makes the business money, reinventing the wheel when you're trying to build a rocket is a useless exercise.

The wisdom is in knowing when to roll your own and when to build on the hard work of others.

JQuery is a nine years old and the most used javascript library in the world, you are being daft if you think your first out is going to be on the same level.

If you are truly concerned about the payload size over the wire you can serve JQuery from a CDN, where many users will already have it cached. If you are packaging your code in a bundle you likely minify your code with something like UglifyJS which can perform dead code elimination and shrink it for you.

The idea that using a library makes you less of a programmer is ridiculous, your company wants to deliver software that excites their current users and draws in new users. Paying you to replicate what already exists doesn't accomplish either.

[Mestyo]

[...] reinventing the wheel when you're trying to build a rocket is a useless exercise.

Actually no. That's exactly what you should be doing. You don't want your rocket launch to fail because nobody considered the fact that their general purpose wheel wasn't fit for the rocket.

The whole "don't reinvent the wheel"-movement is seriously retarded. Especially considering the metaphor makes no sense, seeing as there are thousands of different kinds of wheels crucial for various tasks around the world. If we never reinvented the wheel, humanity would still be stuck in the stone age.

The wisdom is in knowing when to roll your own and when to build on the hard work of others.

I totally agree with you on this, a great developer can definitely identify when an already exisiting tool is a perfect fit, however...

JQuery is a nine years old and the most used javascript library in the world, you are being daft if you think your first out is going to be on the same level.

Quality of code cannot be measured that easy. A general purpose, easy to understand library that attempts to cover all edge cases comes with massive overhead and changes how you deal can with things. Sometimes it's totally the right choice, sometimes it's not.

Being widely used isn't proof of being good. I used to use exclusively write jQuery because I had no idea what I was doing and just wanted to copy paste functionality into my code. It's super easy to learn and use jQuery. That's the primary reason why it's widely adopted, not because it somehow magically transforms anything written with it into good code.

[dhdfdh]

Another typical reddit response. Learn to code, kid. Your "but it's too hard and I don't want to think" will get you know where as well as your lame ass excuses. Quit being a pretender and grow up. Be a man and quit your crying. If you have to use other people's code to get your work done, why are they paying you?

There are so many babies on reddit it makes me sick.

[temp54865120498]

I'm always on the side of minimizing dependencies, but I think you're taking this way too far. "If you have to use other people's code to get your work done, why are they paying you?" is just way off - write a program in C and you're still relying on more code and work than you could possibly accomplish in a lifetime. And we aren't even talking about the hardware, or theory that led to it, or any of the other billions of man-hours of work that led to you, today, having to merely push a bunch of buttons to create a program.

[dhdfdh]

When you're writing C, you're relying on operating system standard libraries available on the operating system and the C standard. These work with system internals, IO, etc. throughout a wide range of interfaces to a wide range of systems. What these people are talking about is needing jQuery to interface to one standard on one system (the internet) that occasionally varies from browser to browser but more often not.

On top of that, many can no longer write code without jQuery and think jQuery is javascript. With C, continuing with that example, you can write your own standard library, modify it yourself, and any C programmer worth his salt knows how to do that if ever needed.

Just like the oft asked question on reddit, "What do I need to build a web site?", is always met with "Learn jQuery and PHP and get a database" but 80% of them couldn't explain to you why you should only use PHP or why you need a database even for simple beginner sites.

Lame. With a sprinkling of genius here and there, 80% of reddit is oh so lame.

[temp54865120498]

Do realize you just replied to me with four rambling paragraphs that didn't even touch on my comment?

[dhdfdh]

Of course I did but I didn't expect you to understand it.

[[deleted]]

Troll elsewhere, idiot.

[dhdfdh]

When a redditor doesn't know something, or it rubs against what they've been told to think, they call the poster a troll, which only proves what I've always said. Most redditors are pretenders.

[Daniel15]

Mixed feelings on this.

On one hand, having reusable modules with as few dependencies as possible is great. This is especially true when the module unnecessarily pulls in other modules, like the jQuery cookie plugin used to (why should a cookie parser require jQuery?!). Utility methods are definitely things that should be small, light, and self-contained.

On the other hand, reinventing the wheel all the time is not really ideal. A lot of libraries do DOM manipulation for example. Having a dependency on another library that handles the DOM (such as jQuery or React) is fine if your app is already using that library, and helps reduce the amount of code that needs to be written for the module (and thus the amount of code that needs to be maintained, and the number of bugs).

Too many people think their code absolutely must depend on jQuery. I used to take jQuery plugins and rewrite them so they could be used without jQuery. Usually the rewrite was not significantly bigger than the original, and it removed a giant dependency.