Remove jQuery dependency from tabs.js and dropdowns.js

[shoelace-style]

Remove jQuery dependency from tabs.js and dropdowns.js

[claviska]

I just pushed e2160a9 which lets you use either jQuery (34.6KB) OR Zepto (9.7KB) for tabs and dropowns. This is what the next beta will feature and they'll be available in /dist as a single minified file.

I think this is a fair compromise since now you can shrink Shoelace's JS down to:

• 9.7KB Zepto
• 0.6KB Shoelace tabs & dropdowns
• 10.3KB TOTAL

This is about 10KB total (min/gzipped). For comparison, Bootstrap 4.0.0-alpha6 requires:

• 27.2KB jQuery Slim
• 8.1KB Tether
• 13.8KB Bootstrap
• 49.1KB TOTAL

Granted, Bootstrap has more components and scripts than Shoelace, but now we have a guaranteed foundation to build core and third-party components with.

I realize this may be an unpopular opinion in some circles, but for practical use and ease of development, I think it's a good decision. Here are a few reasons why:

• I'm a huge fan of chaining, particularly when traversing the DOM. It's more elegant than vanilla JS, and you don't need to worry about unobvious browser quirks like this.

• We still need shims for basic things like element.closest. This one is nearly the same number of lines as the tabs script alone. Polyfills and helper functions add up, and relying on multiple third-party scripts makes updating and testing more difficult.

• Libraries such as jQuery and Zepto exist to normalize behavior across various browsers and make our lives easier. I don't leave 10 virtual machines running with various browser versions to test basic functionality in scripts. I let the libs test those things so I don't have to — their communities do a better job than I ever could on my own.

• The code isn't not littered with random helper functions or polyfills. It doesn't need to be. If you think vanilla JS is more elegant, I challenge you to create an equivalent version of tabs.js and dropdowns.js so we can compare them apples to apples.

Some people use jQuery as a crutch. I don't agree that loading a 34KB (or even a 9.7KB) library just to toggle a class is a good idea. However, I do believe loading such a library is a good idea if it helps the developer and the project significantly. In this case, requiring jQuery or Zepto provides a foundation for future core and third-party components.

Let's imagine that we go pure vanilla. Now every component has to use its own element.closest polyfill, its own siblings helper, and so on. Here we go adding unnecessary duplicate code to the project.

Hmm, well, why not create a base JS file for Shoelace that has all these polyfills and helper functions so third-party components can use them too?! Well guess what? That's exactly what fucking jQuery and Zepto do.

I'm sure you can save a few KBs with a vanilla version. And you're absolutely encouraged to write your own if you want to go that route. It's open source. Tear it apart! But the fact is, many projects and websites are already using one of jQuery or Zepto. When loaded via CDN, it's probably already cached in their browser.

Personally, I don't think going vanilla at this point adds much benefit to the project, especially considering Zepto as an official 10KB alternative to jQuery.

[claviska]

I would be disappointed to see you bow to a different design paradigm

In terms of JavaScript, it's less about the paradigm and more about what works for me (the developer) and users. It's a balance. I do appreciate the encouragement though 😄

To further emphasize my feelings on this:

As a developer, I know I can do everything without jQuery or Zepto. That doesn't mean I want the burden of polyfilling and testing every feature that target browsers may or may not haven't implemented yet. I like their API. I like chaining. I like that I can write much more elegant code. I like that I created the first version of the tabs plugin in a matter of minutes instead of wasting time copying and pasting functions and polyfills.

For users, a mere 10KB for shoelace.js + Zepto is pretty damn good considering it's still a fraction of the size of many alternatives. Again, it's a balance.

Those who don't like it don't have to use it. Anyone is welcome to create a vanilla version. Hell, you can create a chocolate chip cookie dough version if you want. It's open source. Go crazy. 🍦

If your code is good, it may even make it's way into a successful PR. But if the code is littered with polyfills and copy/pasted functions that make my life harder, I'm going to pass. 👋

[EvgenyOrekhov]

How about implementing tabs and dropdowns in pure CSS?
A quick googling brings up a lot of solutions, for example:

• pure CSS tabs using :target
• pure CSS nested dropdowns

[claviska]

See #19 for some discussion about that.

Good to see that you can access those CSS-only tabs with the keyboard, but I'm still not a fan of the markup. The script is also useful to add helpful events so users can tap into show and hide once those get added.

Also, that dropdown example isn't apples to apples. We don't want them showing on hover — they need to be activated by a button or link by design :)

[TheMonster1995]

I could give it a shot, hopefully getting it down in the next 2-3 days.

[claviska]

Reopening for further discussion.

I am enjoying the direction that you are taking with shoelace and fully intend to use it in several production sites / applications.

I would be disappointed to see you bow to a different design paradigm, so encourage you to keep going the way you see fit. I, however small that may be, like your approach.

One production application that I work on makes heavy use of jQuery, not as a crutch but to ensure cross-browser compatability with many disappointing excuses for web browsers; however because of my interest in shoelace, I have now begun to investigate if we could switch over to zepto for the next major publish.