New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Remove jQuery dependency from tabs.js and dropdowns.js #21
Comments
How about implementing tabs and dropdowns in pure CSS? |
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 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 :) |
I could give it a shot, hopefully getting it down in the next 2-3 days. |
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 I think this is a fair compromise since now you can shrink Shoelace's JS down to:
This is about 10KB total (min/gzipped). For comparison, Bootstrap 4.0.0-alpha6 requires:
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:
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 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. |
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. |
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. 👋 |
I whipped up a minimal script for tabs and for dropdowns, both on top of jQuery. I'd like to remove this dependency, however, as it can add a lot of weight to projects that aren't using jQuery.
In previous versions of Shoelace, the docs stated:
However, it's apparent that pretty much everyone will just copy and paste the sample script and use it. If that's the case, we might as well provide an official version of tabs/dropdowns in the dist so users can load it via CDN.
Objective
My goal for
shoelace.js
is to provide vanilla JS scripts for tabs and dropdowns that just work, much like the current jQuery-based versions. These should be simple scripts that don't require initialization and don't have any API. Also like the current versions, they need to use event bubbling to ensure dynamically created tabs/dropdowns also work.Now, before people lose their minds about not having an API and not requiring initialization, I feel this is important to say:
Shoelace components should act like native components as much as possible. This is part of Shoelace's core philosophy.
In the same way you expect a
<select>
control to open without JavaScript, tabs and dropdowns should activate "without JavaScript."In the same way you can disable an
<input>
by adding thedisabled
property, you can disable tabs and dropdowns by adding thedisabled
property.In other words, we're using JavaScript as a shim to make these controls work, not as an extensive plugin that packs in a million features.
Of course,
shoelace.js
will be completely optional. Users who want a more robust solution are welcome to adopt alternatives such as Tabby.So that's where I'm trying to go with things. We're basically cloning
tabs.js
anddropdowns.js
in a non-jQuery way. Browser support should include IE11 even though it doesn't support CSS vars, as many users use Shoelace + a polyfill for older browsers.If you're interested in taking a stab at it, comment here and let me know.
Additional planning:
show
andhide
events for tabsshow
andhide
events for dropdownsselect
event for dropdownsThe text was updated successfully, but these errors were encountered: