Slick w/ vanilla JS

[raphaelokon]

Hi Ken. Thanks for this awesome slider, I really like it. But this time I would really like to use it w/o jQuery. Do you think it is possible to port it to vanilla JS?

Cheers.

[kenwheeler]

Absolutely. It would probably hose any kind of browser support before ie9, and add a ton of weight, but it wouldn't be too bad to do. Do you want me to give it a spin?

[raphaelokon]

Well, I could fork it and do it too. But a start wold be awesome. Do you really think it will add additional 36KB (size of minified jQuery) when ported?

[kenwheeler]

I'd say about 5k at least

[raphaelokon]

Okay, fair enough. How to progress on this?

[kenwheeler]

well, the first order of business is to write some util methods. Obviously a step animation method, a Function.prototype extender, querySelectorAll wrapper, perhaps a tree walker and some event bind, unbind and trigger methods.

[raphaelokon]

great. i have a small collection of those in place, namely:

– qSA – on/off – extender – wrapper/unwrapper

what about polyfilling all jquery functions used inside the lib?

[kenwheeler]

Honestly, if we're going the vanilla route, I might approach things differently from an architecture standpoint. I'd probably use custom event triggers instead of methods for the after init stuff. Then, remove all the $ plugin bootstrappery and have it just call it like var mySlick = new Slick(element, options);

[raphaelokon]

Aye. I agree. I don't see the need of $ bootstrappery. But internal convenience wrappers would be helpful anyways, e.g. qS and qSA or classList/className.

Do you use Slack or IRC? We could plan stuff out.

[kenwheeler]

Love slack. Email me at ken@outlook.com and I'll shoot you an invite.

[raphaelokon]

Same here – Slick Slack :) I emailed you yesterday. Did you get anything?=

[a-x-]

// Excuse my beginner's English Hi, all. I would be happy, when slick'll has release under vanillajs!

[johjacb]

+1 for a vanilla version!

[kenwheeler]

Closing, as this will be 2.0

[thymikee]

@kenwheeler, any ETA of v2.0?

[kenwheeler]

Working on it. The first step to 2.0 is getting CI and tests running. I'm almost there.

[thymikee]

+1

[alexbet]

+1

[samhh]

+1

[DJviolin]

+1

[linnett]

+1

[dz000]

Hey Ken, are there any news about the vanilla version? best regards

[Quirksmode]

+1 Any news of progress :-)

[Cosmicist]

+1 subscribing for news on this subject :D

[controversial]

Is this still planned for v2 @kenwheeler ? Someone said v2 didn't seem to be moving in this direction.

[kenwheeler]

when v2 drops, it will be vanilla js

[controversial]

Awesome @kenwheeler. Any progress?

[kenwheeler]

a little but not a ton. I've been super focused on react and react-native lately, and driving initiatives at scale with both at my full time job. I would love to get v2 out the door, but I just havent had the hours in the day lately.

[controversial]

Ok. I don’t use jQuery as a matter of stubbornness, but if there’s a small way in which I could help I’d love to.

In the meantime, are there competing libraries without jQuery dependency? Slick’s feature set is just so awesome…

On Tue, Jul 26, 2016 at 10:06 AM Ken Wheeler notifications@github.com wrote:

a little but not a ton. I've been super focused on react and react-native lately, and driving initiatives at scale with both at my full time job. I would love to get v2 out the door, but I just havent had the hours in the day lately.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/kenwheeler/slick/issues/494#issuecomment-235278040, or mute the thread https://github.com/notifications/unsubscribe-auth/AJ5Yr7nbGsp9uJNnzHIgaF4e7OkdSFXRks5qZhRhgaJpZM4CeF6e .

[kenwheeler]

Why not use jquery? If I wasn't in react land, I'd still use it. A couple extra kb in exchange for battle tested browser API normalization is well worth it imo.

[controversial]

Yeah, but I’m lucky enough to be 14 and not writing code that needs to be cross-browser compatible. Thanks, though.

On Tue, Jul 26, 2016 at 10:17 AM Ken Wheeler notifications@github.com wrote:

Why not use jquery? If I wasn't in react land, I'd still use it. A couple extra kb in exchange for battle tested browser API normalization is well worth it imo.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/kenwheeler/slick/issues/494#issuecomment-235281321, or mute the thread https://github.com/notifications/unsubscribe-auth/AJ5Yr8i2mf37fCOLdSvJZWHKaiB7EPmbks5qZhbsgaJpZM4CeF6e .

[ShaggyDude]

Microsoft has stopped supporting IE9. So should developers. +1 for javascript.

[controversial]

Currently going with http://flickity.metafizzy.co, for anyone interested. It has everything I need, and it's vanilla JS. When Slick drops jQuery I'll come back, though 😀

[websirnik]

I'm very happy with http://idangero.us/swiper it's flexible with good APIs.

[samhh]

I've had a good experience with Swiper also, though I'll probably be moving back to Slick come v2 with this news. Many of the websites I develop now only support modern browsers so I've no need for jQuery, and it's massive bloat as a dependency.

Echoing someone above, if there's anything that can be done to help progress this cause let me/us know!

[kenwheeler]

Don't get me wrong, I get it, I wish I never had to support any older browsers, but slick is used on big ass websites where supporting older browsers means not losing out on potential revenue for them. If someone wants to, they could really just convert all the jquery to regular js. You would make an IIFE and pass a selector and then use QSA for all the selections and addEventListener for the events. Then use a lightweight animation lib for tweening values. If any of you wanna do that, I'd be happy to provide it as a vanilla version. V2 isn't about that. I mean v2 will be vanilla, but it would be a fundamental rewrite as well. Think free scrolling, dropping clones, physics based animation.

[controversial]

That's awesome @kenwheeler. Not hating on Slick. I'll switch back as soon as v2 is out (or even in beta). You've done great work here already, as well.

On Wed, Jul 27, 2016 at 8:09 AM Ken Wheeler notifications@github.com wrote:

Don't get me wrong, I get it, I wish I never had to support any older browsers, but slick is used on big ass websites where supporting older browsers means not losing out on potential revenue for them. If someone wants to, they could really just convert all the jquery to regular js. You would make an IIFE and pass a selector and then use QSA for all the selections and addEventListener for the events. Then use a lightweight animation lib for tweening values. If any of you wanna do that, I'd be happy to provide it as a vanilla version. V2 isn't about that. I mean v2 will be vanilla, but it would be a fundamental rewrite as well. Think free scrolling, dropping clones, physics based animation.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/kenwheeler/slick/issues/494#issuecomment-235566320, or mute the thread https://github.com/notifications/unsubscribe-auth/AJ5Yr7jtlin4C-1Oz3yocB1aKlGegfzzks5qZ0p2gaJpZM4CeF6e .

[thasmo]

@kenwheeler Does it work with cash.js?

[darrenjacoby]

@SamHH @websirnik had a look at Swiper, but it's double the size of Slick. So, using jQuery and Slick comes to the same thing?

[jshrssll]

Any updates on v2 @kenwheeler ?

[alittlebirdo]

This is a good slick substitute until Slick drops jQuery: http://meandmax.github.io/lory/. Written in ES6 and looks/acts very similar to slick too.

[Quirksmode]

We found this alternative, it's vanilla JS and has so much of Slicks functionality, it's brilliant.

http://idangero.us/swiper/#.WG5cEraLSWY

On 5 January 2017 at 11:57, alittlebirdo notifications@github.com wrote:

This is a good slick substitute until Slick drops jQuery: http://meandmax.github.io/lory/. Written in ES6 and looks/acts very similar to slick too.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/kenwheeler/slick/issues/494#issuecomment-270628300, or mute the thread https://github.com/notifications/unsubscribe-auth/ABtC8NUKMi2AfSu6dNNTjnaenUXLiYFAks5rPNqYgaJpZM4CeF6e .

[darrenjacoby]

Thanks @alittlebirdo will have a look. @Quirksmode I've had a look at Swiper, but it's larger than Slick and jQuery combined.

[jshrssll]

@alittlebirdo @Quirksmode @darrenjacoby a friend recommended this. Decided to go for it with the current project I'm working on. Really liking it so far.

http://flickity.metafizzy.co/

[darrenjacoby]

@splurtcake Looks good, but it has got a comm license, whereas Lory is MIT.

[benjamincharity]

I have worked with Flickity quite a bit and can say it's a really solid library.. Lory just seems to be quite a bit smaller than the other libraries.

[TheAsia]

@kenwheeler Its nice to have an approx time for v2 release. I really want to use it with React and no jquery. Thanks 😊

[hernimen]

any release date ? thx

[shelldandy]

@TheAsia there's actually a react port https://github.com/akiran/react-slick

[samhh]

@mike3run That appears to include jQuery under the hood based upon a cursory look, so it doesn't really solve the issue of needless dependency bloat.

[shelldandy]

@SamHH its written without jquery, it has slick as a dependency but only for the css, i've used that in production and its much more smooth than slick