ECMA6 Classes?

[Texas]

So, I've been out of the "programming" world for a time. I've stayed marginally involved but was more doing maintenance on old code rather than writing my own. As a result, I'm kind of behind on the whole ECMA6 thing.

That being said, I was looking into writing a new plugin, and I'd like to use the new standard. Unfortunately, my experiences with classes are limited, so I'm unsure exactly how using the new syntax will effect things as far as plugins are concerned. So, I've thought up a few questions that, if answered, will hopefully clear things up for me. I'd appreciate any input.

1) I noticed that global name-spacing is depreciated. With that in mind, how would plugins like Yootil work? I'm assuming the answer lies in importing and exporting, which leads to my next question.

2) How would one import classes from another plugin? As far as I can tell, the plugins are assigned randomized characters as file names when they are hosted, and it seems that a file name is required for an import function?

Thanks in advance.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Apr 17, 2016 9:23:18 GMT -8 Texas said:

So, I've been out of the "programming" world for a time. I've stayed marginally involved but was more doing maintenance on old code rather than writing my own. As a result, I'm kind of behind on the whole ECMA6 thing.

That being said, I was looking into writing a new plugin, and I'd like to use the new standard. Unfortunately, my experiences with classes are limited, so I'm unsure exactly how using the new syntax will effect things as far as plugins are concerned. So, I've thought up a few questions that, if answered, will hopefully clear things up for me. I'd appreciate any input.

1) I noticed that global name-spacing is depreciated. With that in mind, how would plugins like Yootil work? I'm assuming the answer lies in importing and exporting, which leads to my next question.

2) How would one import classes from another plugin? As far as I can tell, the plugins are assigned randomized characters as file names when they are hosted, and it seems that a file name is required for an import function?

Thanks in advance.

Peter has vision for these new standards. I wouldnt mind reading myself. Im going to have to bug him later anyway.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Apr 17, 2016 9:23:18 GMT -8 Texas said:

So, I've been out of the "programming" world for a time. I've stayed marginally involved but was more doing maintenance on old code rather than writing my own. As a result, I'm kind of behind on the whole ECMA6 thing.

That being said, I was looking into writing a new plugin, and I'd like to use the new standard. Unfortunately, my experiences with classes are limited, so I'm unsure exactly how using the new syntax will effect things as far as plugins are concerned. So, I've thought up a few questions that, if answered, will hopefully clear things up for me. I'd appreciate any input.

1) I noticed that global name-spacing is depreciated. With that in mind, how would plugins like Yootil work? I'm assuming the answer lies in importing and exporting, which leads to my next question.

2) How would one import classes from another plugin? As far as I can tell, the plugins are assigned randomized characters as file names when they are hosted, and it seems that a file name is required for an import function?

Thanks in advance.

Also im pretty sure you can import a class as long as its found on the current page.

[Quozzo]

The global scope hasnt changed using var, but using let or const wont allow you to overwrite a default method/object, such as Math. This would be great with plugins because another plugin using the same name would throw an error instead of destroying the previouse plugin.

What i have not tried (yet) is that it might be possible to create a plugin within the global scope using an object of named functions, as per usual, but then also assign those functions to be exported too. It creates a fallback and a way forward.

It is true that exprting functions requires the file name which is currently random. Hopefully they could assign each plugin a specific ID (along with the ID of the JS module should anyone use more than one) which would make it possible to import/export plugins. The only problem would be caching, just incase someone decides to fix a bug and update their plugin.

I would like to hear off PB since they specifically mentioned ES6 compatibility and how they would address the issue.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Apr 18, 2016 9:36:41 GMT -8 Quozzo said:

The global scope hasnt changed using var, but using let or const wont allow you to overwrite a default method/object, such as Math. This would be great with plugins because another plugin using the same name would throw an error instead of destroying the previouse plugin.

What i have not tried (yet) is that it might be possible to create a plugin within the global scope using an object of named functions, as per usual, but then also assign those functions to be exported too. It creates a fallback and a way forward.

It is true that exprting functions requires the file name which is currently random. Hopefully they could assign each plugin a specific ID (along with the ID of the JS module should anyone use more than one) which would make it possible to import/export plugins. The only problem would be caching, just incase someone decides to fix a bug and update their plugin.

I would like to hear off PB since they specifically mentioned ES6 compatibility and how they would address the issue.

They are always added to a page. Example:

<script type="text/javascript" src="http://storage.proboards.com/5500350/j/uZK8ckNVssssOH4Awkxg.js" data-plugin="63" data-component="231"></script>
So getElementsByTagName('js')
And then try and import the class.

[Quozzo]

Apr 18, 2016 10:14:24 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Apr 18, 2016 9:36:41 GMT -8 Quozzo said:

The global scope hasnt changed using var, but using let or const wont allow you to overwrite a default method/object, such as Math. This would be great with plugins because another plugin using the same name would throw an error instead of destroying the previouse plugin.

What i have not tried (yet) is that it might be possible to create a plugin within the global scope using an object of named functions, as per usual, but then also assign those functions to be exported too. It creates a fallback and a way forward.

It is true that exprting functions requires the file name which is currently random. Hopefully they could assign each plugin a specific ID (along with the ID of the JS module should anyone use more than one) which would make it possible to import/export plugins. The only problem would be caching, just incase someone decides to fix a bug and update their plugin.

I would like to hear off PB since they specifically mentioned ES6 compatibility and how they would address the issue.

They are always added to a page. Example:

<script type="text/javascript" src="http://storage.proboards.com/5500350/j/uZK8ckNVssssOH4Awkxg.js" data-plugin="63" data-component="231"></script>
So getElementsByTagName('js')
And then try and import the class.

It's not possible though, as importing modules to a variable are defined as though const was used, meaning iterating through all the of the files and seeing which one contains a method (or propery of the plugin with it's name) would throw an error.

$('script').each(function(){
    import * as myPlugin from $(this).attr('src');
    if(myPlugin.name === "quozzos"){
        myPlugin.doStuff();
    }
});


I'm not sure if modules can be imported inside of a function. I know modules can only be exported if they are on the top level scope, I don't know if that is true for import though.

You might get away with appending an integer on the end of the variable used when importing a module, effectively creating a new variable. Could cause memory issues though, as every plugin would be calling every plugin just to get the relevant one, and that is if all of the above is possible. Seems a step backward to me.

[Peter]

I think you guys have forgotten something, that being transpilation.

ES6 -> ES5

[Quozzo]

I don't know what the converters will do with the import/export options (possibly retrieve them via AJAX?), but if we don't know the URL then I'm guessing it won't be able to convert it successfully. PB have stated that it will support ES6 so needing to use a transpiler shouldn't be an option.

[Peter]

Apr 19, 2016 16:09:34 GMT -8 Quozzo said:

PB have stated that it will support ES6 so needing to use a transpiler shouldn't be an option.

That's exactly my point.  You will end up with ES5 at the end of the day.

[Texas]

Apr 19, 2016 16:09:34 GMT -8 Quozzo said:

I don't know what the converters will do with the import/export options (possibly retrieve them via AJAX?), but if we don't know the URL then I'm guessing it won't be able to convert it successfully. PB have stated that it will support ES6 so needing to use a transpiler shouldn't be an option.

Patrick said they would be using a transpiler: support.proboards.com/post/6597577/thread

The problem is that ES6 is only marginally supported in most browsers at this point in time. So, for very far into the forseable future, anything written in ES6 will *have* to be transpiled into ES5 in order to be comparable with all browsers. i.e. import functions/let/const and stuff like that will all be reduced to syntactical sugar back-end. (let/const become "var". Classes become structured functions)

[Quozzo]

Apr 19, 2016 17:16:07 GMT -8 Texas said:

Apr 19, 2016 16:09:34 GMT -8 Quozzo said:

I don't know what the converters will do with the import/export options (possibly retrieve them via AJAX?), but if we don't know the URL then I'm guessing it won't be able to convert it successfully. PB have stated that it will support ES6 so needing to use a transpiler shouldn't be an option.

Patrick said they would be using a transpiler: support.proboards.com/post/6597577/thread

The problem is that ES6 is only marginally supported in most browsers at this point in time. So, for very far into the forseable future, anything written in ES6 will *have* to be transpiled into ES5 in order to be comparable with all browsers. i.e. import functions/let/const and stuff like that will all be reduced to syntactical sugar back-end. (let/const become "var". Classes become structured functions)

I see now. But it still doesn't solve the issue that you raised. Using import/export still needs a URL.

[Texas]

Quozzo: Well, sort of, but the point is that you won't actually need to import/export. You'll be able to access any classes you create automatically because they're globally scoped when trans-piled to ES5.

[Quozzo]

Apr 19, 2016 17:26:52 GMT -8 Texas said:

Quozzo : Well, sort of, but the point is that you won't actually need to import/export. You'll be able to access any classes you create automatically because they're globally scoped when trans-piled to ES5.

If you're going down that route then you don't need anything from ES6. Prototypal inheritance and promises are available in ES5, although the latter is not native but through libraries such as jQuery.

If they're going to support ES6 then we need the tools and the ability to build plugins in ES6, not just the parts that don't inconvenient them.

I don't want to spend time attempting to debug something, only to find out it wasn't working because it differs vastly from the spec. I would rather cut out the ambiguity of not knowing and stick with ES5.