Skip to content
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

Please add plain ES5 examples #200

Closed
ghost opened this issue Jun 19, 2015 · 32 comments
Closed

Please add plain ES5 examples #200

ghost opened this issue Jun 19, 2015 · 32 comments

Comments

@ghost
Copy link

@ghost ghost commented Jun 19, 2015

Not all of us have the luxury of using newfangled ES7 syntax, it would be a lot of help for newcomer information overload if there could be a couple working examples that didn't introduce all these new language features (especially experimental features like ES7 decorators) in the examples. The usefulness of examples is diluted when cluttered with experimental language features.


Edit from maintainer: please track them here:
https://github.com/vkbansal/react-dnd-es5-examples


@gaearon
Copy link
Member

@gaearon gaearon commented Jun 19, 2015

I'm happy to accept such contribution.

The tutorial examples are all offered in ES5, ES6 and ES7:
http://gaearon.github.io/react-dnd/docs-tutorial.html

Every doc page also has examples in ES5, ES6 and ES7:
http://gaearon.github.io/react-dnd/docs-drag-source.html
http://gaearon.github.io/react-dnd/docs-drop-target.html
etc

Unfortunately I didn't have the time to port all the example code, but this should help you get started.

@vkbansal
Copy link
Contributor

@vkbansal vkbansal commented Jun 19, 2015

There are ES5 examples on the documentation site. http://gaearon.github.io/react-dnd/docs-overview.html

image

@ghost
Copy link
Author

@ghost ghost commented Jun 19, 2015

I'm referring to the complete, functional examples in the github repo.

@ghost ghost closed this Jun 19, 2015
@ghost ghost reopened this Jun 19, 2015
@awarberg
Copy link

@awarberg awarberg commented Jun 23, 2015

I agree ES5 examples with optional ES6/7 would be preferable until ES6/7 is mainstream. It will be easier to learn react-dnd if you don't have to learn a new programming language at the same time + transpiling to ES5 to make the code run.

@gaearon
Copy link
Member

@gaearon gaearon commented Jun 23, 2015

I'd argue ES6 is already mainstream with the language being finalized and Babel used in tons of projects.

@jeffreywescott
Copy link

@jeffreywescott jeffreywescott commented Jun 26, 2015

Forcing people to learn ES6 (and worse, ES7) syntax just to understand your example code is hostile at best. This looks like an amazing module. Why not at least export the ES5 version of one of your examples into an ES5-example folder for the uninitiated. Saying you'll accept a PR isn't helpful, as the people asking for the examples are likely unfamiliar with ES6 and ES7 to begin with!

Le sigh.

@bismark64
Copy link

@bismark64 bismark64 commented Jun 27, 2015

I agree with the guys here, @gaearon you should not force people to learn ES6/ES7 just to understand how the library works.. This could lead people to use another library instead.
This library is amazing, the only thing I have to argue against it is this topic. I'm not a JS expert (I'm a Ruby dev) so it's hard to me to understand the examples, just because you're using another syntax (I'm not against the new syntax, but when developing a library you should adopt mainstream standards), which is ridiculous..
If you want this library to be the standard DnD library for React, you must correct this. Otherwise I'm afraid people will use another "easier" solution no matter whether it is better or worse than yours..

@vkbansal
Copy link
Contributor

@vkbansal vkbansal commented Jun 27, 2015

just because you're using another syntax

FYI, this is not another syntax, It's ES6, which is JavaScript. And if you have problem with ES6 syntax then you must also have problem with react, because it is actually another syntax.

but when developing a library you should adopt mainstream standards

ES6 is becoming mainstream. io.js and react itself has support for ES6

@bismark64
Copy link

@bismark64 bismark64 commented Jun 27, 2015

You're mistaken.

  1. Check out Wikipedia:

In computer science, the syntax of a computer language is the set of rules that defines the combinations of symbols that are considered to be a correctly structured document or fragment in that language

And:

ECMAScript 2015 (6th Edition) is the current version of the ECMAScript Language Specification standard

Yes both ES5 and ES6 are JS, but the syntax is different.
2.

ES6 is becoming mainstream. io.js and react itself has support for ES6

"Becoming" and "support for" denotes you know ES6 is not mainstream yet.. It will, eventually, but in the meantime you should give examples in ES5.

@vkbansal
Copy link
Contributor

@vkbansal vkbansal commented Jun 27, 2015

If you want ES5 examples so badly why don't you guys make an effort of contributing it yourself. @gaearon is very busy person and works on this library in his spare time. So instead of demanding try to contribute, so that others also can benefit from it.

@hakanderyal
Copy link
Collaborator

@hakanderyal hakanderyal commented Jun 27, 2015

Guys, project owner, gaearon, is not forcing anyone to anything.

gaearon has already done a tremendous work on this lib. Project is open source, and offered for free. Accusing him of being hostile, or like he owns the users anything is kinda hostile IMHO.

He stated he doesn't have time to port the examples to es5, and he is open to contributions. There are already examples in es5/6/7. And to be honest, syntax is not that different.

Also, you can use a transpiler, like babel, to transform the es6/7 code to es5, and use it, examine it or learn from it.

Nobody is forcing people to use react-dnd, nor it's the purpose of this library to be the 'one and only' solution.

@vkbansal
Copy link
Contributor

@vkbansal vkbansal commented Jun 27, 2015

@hakanderyal exactly my point!

@bismark64
Copy link

@bismark64 bismark64 commented Jun 27, 2015

@hakanderyal we're not discussing that.. you're right, we all thank @gaearon for the tremendous work in this project.

We know there was no malicious intention to write the examples in ES6. Personally I'm not accusing anybody of this. Nevertheless I believe this issue shows us there is a need of ES5 examples.

Yes, we could use Babel, but in some cases you don't want to add more complexity to your project adding more libs just because the examples you have require them. I'm using React and ReactDnD in a Rails project and honestly I don't want to deal with more transpilers and stuff just to run my code..

Also, some people (myself included) are not JS experts, so I think it'd be nice to keep things as simple as posible.

Any existing contributor or a new one could take the lead on this issue and start adding some examples, not only @gaearon

@vkbansal
Copy link
Contributor

@vkbansal vkbansal commented Jun 27, 2015

@bismark64 @jeffreywescott @emergentcypher See #214

@bismark64
Copy link

@bismark64 bismark64 commented Jun 27, 2015

👍 Outstanding @vkbansal! Thank you!

@jeffreywescott
Copy link

@jeffreywescott jeffreywescott commented Jun 27, 2015

Thanks, @vkbansal -- you rock!

@gaearon
Copy link
Member

@gaearon gaearon commented Jun 27, 2015

Hey folks.

I spent weeks and nights of my personal time working on this project and its docs website which is the only JS library website I'm aware of that shows ES5, ES6 and ES7 code examples on every doc page that contains some code. I'm sorry I didn't quite live up to your expectations with the examples themselves!

When I get some free time after spending weeks and nights of my personal unpaid time working on my React Europe talk, I might consider your request. In the meantime please use another library or ask somebody to help you out with ES5 examples.

Here's a few things I suggest you do when you get some free time:

Thanks.

PS Huge thanks to @vkbansal.

@stooboo
Copy link

@stooboo stooboo commented Jun 27, 2015

Hi Gaearon,

Releasing your code for public use is very much appreciated by the majority of people using it.

You're pushing things 'forward' and doing it in a public way .. neither of which is 'easy'.

I'm totally surprised (and I think most people will be) by the accusations you've received
e.g 'forcing' people.. and being 'hostile'
...especially when you've invited contributions

Your response to these attacks is much more restrained than mine would be given the same provocation.

Please do not be put off by this negative minority

many thanks for the code and the ideas

Stu

@gaearon
Copy link
Member

@gaearon gaearon commented Jun 27, 2015

Please respect my wish to not continue this discussion. I don't want to spam people watching this repo any further.

I'm not locking the issue, but if another comment is posted, I'd expect this to be a useful comment linking to more PRs or something of the sort, not a “discussion” comment. We can twist each other's words forever and “hear both sides” but I don't see the point.

I understand your concern: you need ES5 examples and don't want to learn ES6/7 at the moment. A totally valid position to have. My position at the moment is that I'm physically unable to work on these examples. I might be able to in the future. Right now there is nothing I can do to help you except to point out this great ES6 learning resource (which is how I learned it myself).

Moreover, if I were to focus on these examples I would not have shipped 1.0 at all. It was a necessary cut to get 1.0 out because I had to start working on my talk right after that. You can use React DnD 0.9.2 which is the latest version to have ES5 examples. Note that it differs significantly from 1.0.

Finally, there is a certain open source etiquette, and some of the phrases in above comments violate it. If you don't see that, this is your problem, not mine. Breaking this etiquette is one of the reasons maintainers burn out and desert their popular projects. You might think your complaint was valid and you meant well but it's totally irrelevant. It's really hard to truly understand this until you put sweat and blood into your own project and have a similar problem.

To sum up, if this is a productive thread further on, I'm happy. If it's “who's at fault” I'll lock it.
Thanks.

@bismark64
Copy link

@bismark64 bismark64 commented Jun 27, 2015

You're totally right @stooboo and @gaearon. I apologize if my above comments broke this etiquette, and you felt accused or I've been disrespectful to you. I know maintaining such a project involves a lot of effort and time, and you're doing great so far, so I'm grateful for that. My intention was only point out this concern.
Said that, we should pass over this and let this thread evolve as usual..

@jeffreywescott
Copy link

@jeffreywescott jeffreywescott commented Jun 27, 2015

I feel ashamed and embarrassed. I'm really sorry for my comments, @gaearon. It's no excuse, but this week has been a hard one for me, and in a moment of frustration, I lashed out. Truly sorry, and thank you so much for this amazing library.

@gaearon
Copy link
Member

@gaearon gaearon commented Jun 27, 2015

Let me also provide some context. The reason examples are not written in ES5 is because the main reason I wrote 1.0 was people having troubles using 0.x from ES6 classes: #109.

It would be silly to release 1.0 “solving” ES6 class problem with no ES6 classes in the examples. Therefore I made a decision to use ES6 further on.

If you are using React, the odds are high that you already have a build step. You need to compile JSX right? (Most people use it.) If you already have a build step, it costs you literally nothing to replace JSX build step with Babel build step. In fact that's what Facebook is going to do too.

I expected I'd have to leave this library “to hang” for a while because I knew I needed to work on my talk. Therefore, I chose to build it looking ahead, rather than behind, so it can live some time on its own without my interference.

@gaearon
Copy link
Member

@gaearon gaearon commented Jun 27, 2015

@jeffreywescott No problem, and you are welcome. Thanks for saying sorry. I really appreciate and I know it can be hard to admit being wrong.

👍

@jehoshua02
Copy link

@jehoshua02 jehoshua02 commented Jun 28, 2015

@gaearon @emergentcypher @awarberg @jeffreywescott @bismark64

I followed along with the Tutorial mostly ES5 (because I too am slow to learn ES6, but I will eventually, I'm using JSX, obviously, and destructuring): https://github.com/jehoshua02/react-dnd-experiment

@gaearon
Copy link
Member

@gaearon gaearon commented Jun 29, 2015

Please track the ES5 examples here:
https://github.com/vkbansal/react-dnd-es5-examples

Big thanks to @vkbansal.

@vkbansal
Copy link
Contributor

@vkbansal vkbansal commented Jul 2, 2015

Finally got some time to finish it: http://vkbansal.github.io/react-dnd-es5-examples/

@ghost
Copy link
Author

@ghost ghost commented Jul 3, 2015

It was not my intention to raise people's emotions, I only want to help the library become accessible and I was mostly concerned about the examples containing experimental ES7 features that, even if I'm switching to ES6, still won't be using. I do think it's important to continue pushing the dev community towards ES6 now that it's been finalized and I certainly think @Gearon made the right choice in treating ES6 code as his priority, and I apologize if I worded my original comment badly.

To comment on the build steps, my build environment does have a JSX build step, but since my build environment is not Node.js but handled in another language, it's not necessarily as simple as "plugging in" Babel instead of JSX, especially if you're working on a team where you aren't necessarily responsible for the build.

Thank you @vkbansal and thank you @gaearon for all your work in the first place.

@adamellsworth
Copy link

@adamellsworth adamellsworth commented Jul 24, 2015

  • Whereas the majority of everyone involved is barely coming into ES6,
  • Whereas transpiling from ES7 to ES5 often results in code unpleasant to decipher,
  • Whereas all ES7 functions are still considered experimental,

Please remove all utilizations of ES7

Utilizing ES7 for syntactical simplicity/succinctness only works if everyone involved is cognizant of the historical variants in syntax.

@vkbansal thanks for putting those examples together.


Example of the second item:

Clean Code:

var DragSourceDecorator = DragSource(ItemTypes.CARD, cardSource,
    function(connect, monitor) {
        return {
            connectDragSource: connect.dragSource(),
            isDragging: monitor.isDragging()
        };
});

var DropTargetDecorator = DropTarget(ItemTypes.CARD, cardTarget,
    function(connect) {
        return {
            connectDropTarget: connect.dropTarget()
        };
});

module.exports = DropTargetDecorator(DragSourceDecorator(Card));

Transpiled Output (from the example):

Card = (0, _reactDnd.DragSource)(_ItemTypes2['default'].CARD, cardSource, function (connect, monitor) {
    return {
      connectDragSource: connect.dragSource(),
      isDragging: monitor.isDragging()
    };
  })(Card) || Card;
  Card = (0, _reactDnd.DropTarget)(_ItemTypes2['default'].CARD, cardTarget, function (connect) {
    return {
      connectDropTarget: connect.dropTarget()
    };
  })(Card) || Card;
  return Card;

edit: mistakenly referenced @emergentcypher as the es5 example author.

@vkbansal
Copy link
Contributor

@vkbansal vkbansal commented Jul 25, 2015

Are you drunk?
Sorry! commented at wrong place!

@adamellsworth Nobody is forcing you to use ES7. If you do not want to use it then don't, but you have no right to tell the author to what to do.

@ghost
Copy link
Author

@ghost ghost commented Jul 27, 2015

People have every right to make comments! That's the great thing about open source. I don't think saying "please remove" is bossing the author around. If the author didn't want to receive comments and requests, then he shouldn't be publishing work on github.

@ghost
Copy link
Author

@ghost ghost commented Jul 27, 2015

Since we now have ES5 examples, I'll just close this myself :)

@ghost ghost closed this Jul 27, 2015
@vkbansal
Copy link
Contributor

@vkbansal vkbansal commented Jul 28, 2015

People have every right to make comments! That's the great thing about open source.

@emergentcypher you are right.

@gaearon is fully aware that not all the people are comfortable using ES7, that is why he took the time to put in ES6 and ES5 examples on the website.

If the author didn't want to receive comments and requests, then he shouldn't be publishing work on github.

Yes, author wants to receive comments and feedback but which are constructive.

Asking author to remove something completely just because you don't use it, is equivalent of walking up to your boss and asking him to fire one of your colleagues just because you don't like his/her face.

This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
9 participants