Parsley.js icon indicating copy to clipboard operation
Parsley.js copied to clipboard

Vanilla JS version

Open zslabs opened this issue 8 years ago • 37 comments

What kind of issue is this? (put 'x' between the square brackets)

  • [x ] Question. This issue tracker is not the place for questions. If you want to ask how to do something, or to understand why something isn't working the way you expect it to, use http://stackoverflow.com/questions/ask . Provide working code, starting from http://codepen.io/marcandre/pen/jqbzyN?editors=101. We monitor the tag parsley.js.
  • [ ] Bug report. If you’ve found a bug, you must provide a minimal example in a CodePen, starting from http://codepen.io/marcandre/pen/jqbzyN?editors=101 .
  • [x] Feature Request. Make sure there's no good way to do what you want first; consider asking on http://stackoverflow.com/questions/ask first.

Hi, Are there any specific features tying this to jQuery nowadays? Is there any interest in converting this to a vanilla JS version?

zslabs avatar Apr 27 '16 17:04 zslabs

To be very honest, I don't know for absolutely certain, as I never write JS without jQuery, so my knowledge of vanilla DOM is very limited.

I personally have zero interest in a vanilla parsley. Let me try to me more explicit about why.

I don't personally write without jQuery and I don't plan to. Nor do I write in HTML, ES3/5, or in CSS for that matter. I consider HTML, JS, Dom & CSS like assembly language, a platform to target but requiring an essential layer that provides a decent interface to them (slim/Haml, CoffeeScript/ES6, jQuery & Sass/less respectively). Of course that's a personal opinion, but hey, as the only active maintainer, it counts :smile:

More practically, from my limited knowledge: I don't know at which version of IE one could start adding attributes to native objects (ideally without memory leaks). We use jQuery data so that's a solved issue for us, so we can support IE8+.

Parsley makes extensive uses of promises, although we could use ES6's instead. It uses $.ajax, which has a much nicer interface in jQuery than the vanilla equivalent, but again that could be kind of done "manually".

More importantly, there are two things that can't be done reasonably without jQuery to provide easy options:

Config of ajax

It wouldn't be reasonable to provide compatibility with ajax options and ajax validators for the remote validator. These are jQuery specific and are not easy to duplicate.

Selectors.

These selectors are way more powerful than what querySelectorAll can accept. Firstly, some nice builtin jQuery selectors are not supported, but secondly you can write your own jQuery pseudo-selectors. That's a really nice API that one can use, for free. We could provide the possibility for the user to write a callback instead of a string for more complex cases, but that is not nearly as nice would make parsley heavier.

I think that's sums it up.

marcandre avatar Apr 27 '16 21:04 marcandre

Hey @marcandre appreciate the reply.

I can certainly understand keeping the library within your comfort zone; as that's the most important thing 😏

In terms of some of the nicer utilities jQuery offers, I'm sure you've also noticed a lot of the movement around the BabelJS project; which makes a lot of these a non-issue on compilation. Furthermore, the Polyfill.io project has also made it possible to automatically polyfill older browsers, while allowing you to write in native/future technologies and keep your codebase clean. Think of it like Autoprefixer for JS, but even better. It also makes things like fetch a possibility to work around some of the AJAX items you mentioned.

While I've personally been able to move past jQuery without any issues, I'm not on the "jQuery is evil so everyone that uses it is wrong" boat. I very much respect your thoughts on the subject and have appreciated using the library over the years. For me, it's just one of those items that's causing me to load jQuery when it's the only thing that's required for it on my site. Parsley is just so darn convenient 😄

BTW, this is my absolute favorite way of looping over DOM nodes in a more "jQuery like" way:

function forEach(array, callback, scope) {
  for (var i = 0; i < array.length; i++) {
    callback.call(scope, i, array[i]); // passes back stuff we need
  }
}

zslabs avatar Apr 28 '16 14:04 zslabs

I was not aware of polyfill.io or of fetch :smile:. Pretty nice stuff. Great replacement for $.ajax, so it does mitigate my biggest objection.

So I'm starting to feel like it would be possible to have Parsley be compatible with a choice of either jQuery or polyfill.io's fetch and other.

Not really relevant to the discussion, but I feel your forEach is not needed in ES6...

So I'm reopening this and will see about writing a roadmap. kickstarter?? :smile:

marcandre avatar Apr 28 '16 16:04 marcandre

Sweet! It'd definitely be a switch; maybe worth a major version change, but if you wrote Parsley in a way that took advantage of the today's powerful utilities, then you probably stick within the same browser support range if you mentioned by default what was supported, but "with polyfill.io, supports back to whatever".

zslabs avatar Apr 28 '16 18:04 zslabs

AFAIK, fetch is not currently supported on any browser, so I guess it could be a choice of

  • jquery
  • polyfill.io
  • very recent browser and not using remote validators.

Unsure about releasing this as v3, it could in theory be part of the 2.x line.

marcandre avatar Apr 28 '16 19:04 marcandre

IMHO it's more of a documentation challenge. Browser support is okay, but if you mentioned that you could include polyfill.io if you needed older browser support, that would allow you to negate any supports checks and just write natively.

zslabs avatar Apr 28 '16 19:04 zslabs

Mmm, we use promise.state(). Native promises do not give access to that.

Current processing is quite nice. Handle every validations as promises, combine them, etc..., to implement whenValid and whenValidate. The methods isValid and isValidate simply call those and inspect the state of the resulting promise. I don't see an easy way keep doing this with native promises :cry:

marcandre avatar Apr 30 '16 17:04 marcandre

Not that I'd personally want a whole library integrated for this piece, but does BluebirdJS help us at all here?

zslabs avatar Jun 02 '16 20:06 zslabs

Bluebird has a sync API, so yeah that would help, but I'm not sure much is gained.

This discussion led to a very long discussion with the jQuery people, and they changed some of the processing for v.3.x that should make compatible with Parsley, although I still need to double check that

marcandre avatar Jun 02 '16 21:06 marcandre

Ha well I guess that's good for the jQuery version ;) Is this Promise situation all that you think stands in the way?

zslabs avatar Jun 03 '16 01:06 zslabs

just my 2 cent: IMO a validation library should support async validators. Letting the user write a custom async validation rule, using whichever ajax api/library/module he wishes.

pazams avatar Jul 19 '16 13:07 pazams

Would ES6 Generators help control the flow of these requests?

zslabs avatar Sep 08 '16 18:09 zslabs

@zslabs not really

marcandre avatar Sep 08 '16 18:09 marcandre

Do you think creating a vanilla-JS branch and making broadcasting a call-to-action for help in converting could help spur some thoughts into any of the roadblocks that we may be facing to see if there's some workarounds?

zslabs avatar Nov 16 '16 15:11 zslabs

Are there still people interested in this? I've put down my ideas on how to do this. I could lay down the ground work for this, and would handle the most delicate part (promise combining) but would very much like help from others. Anyone can commit to serious collaboration effort?

marcandre avatar Mar 01 '17 18:03 marcandre

I can help with a lot of the pure syntax-related swaps, but some of the deeper API changes may be outside of what I can dedicate time to right now.

zslabs avatar Mar 01 '17 18:03 zslabs

@marcandre I'm still very interested about it but have no time to contribute at the moment, sorry.

Flaburgan avatar Mar 02 '17 09:03 Flaburgan

I've started to convert some jQuery calls to use the native DOM. PRs welcome (post here first on what you intend to do...)

marcandre avatar Mar 07 '17 19:03 marcandre

Hey @marcandre, I decide to give you a little help :) (I really want this feature)

I'm opening a PR now to remove jquery from one of parsley's files. :)

herberthenrique avatar Mar 28 '17 23:03 herberthenrique

Bump. I could also help.

DanielRuf avatar Feb 11 '18 22:02 DanielRuf

@DanielRuf PRs welcome. Ideally keep commits small, and don't hesitate to ask for help if you're unsure of something.

marcandre avatar Feb 13 '18 17:02 marcandre

Would be better to move this project to an org.

DanielRuf avatar Feb 13 '18 17:02 DanielRuf

Would be better to move this project to an org.

Probably, but since I'm the only active maintainer and that Guillaume is quite responsive to the very rare admin changes that need to be made, the current setup has never been an issue. If any further discussion on this topic is required: new issue please!

marcandre avatar Feb 13 '18 18:02 marcandre

Hi. I'm looking at Parsley.js for my project and I'm interested in a jQuery-free version. I don't need it right away and can start using the library right away with the jQuery dep. If there is a firm roadmap to drop jQuery, I'd be happy to contribute. Please, advise on the current status on this ticket.

Seebiscuit avatar Jun 07 '18 18:06 Seebiscuit

I'm involved in other OSS projects that are my priority, so unless I am sponsored for this, I'm afraid I won't be working on it myself in the foreseeable future. OTOH, I'll be glad to review and merge high quality PRs.

marcandre avatar Jun 07 '18 19:06 marcandre

Thanks for the quick reply.

I may still be able to contribute if you could please provide me

  1. Reasonable estimate of the time required
  2. List of modules that require refactor

I know this is an old thread, but perhaps @zslabs and @DanielRuf may still be interested in helping?

Seebiscuit avatar Jun 07 '18 19:06 Seebiscuit

@Seebiscuit I ended up using http://rickharrison.github.io/validate.js/ and rolling my own UI on top of it for my needs.

zslabs avatar Jun 07 '18 19:06 zslabs

I may still be able to contribute if you could please provide me

  1. Reasonable estimate of the time required

I'd have a very hard time answering that if I were to do it, so it's even harder to provide for you! Sorry...

  1. List of modules that require refactor

You can grep for uses of $ in src/. While references to $element would remain, most methods called on it need to be changed (e.g. this.$element.is(this.options.inputs) would become DOMInterface.is(this.$element, this.options.inputs) or similar, where DOMInterface.is would be something native for the vanilla version, and jQuery's is function for jQuery version.

As stated previously, one tricky part is promise handling and combining, which I'd be willing to do myself once that's the last remaining thing to be done.

HTH

marcandre avatar Jun 07 '18 19:06 marcandre

BTW, if there's interest, I could start a kickstarter/bountysource (not sure of the differences), although I doubt it would get enough traction.

marcandre avatar Jun 07 '18 19:06 marcandre

ROk. I'll take a look.

Re Kickstarter, I think you need some kind of discounted deliverable as an incentive. Don't know how you do that with OSS...

Seebiscuit avatar Jun 07 '18 19:06 Seebiscuit