Es2015plus

[unquietwiki]

After my messy attempt to contribute some fixes ~2 weeks ago, I went back over what I had on my end. Since I'm trying to use Backbone with an ES2015+ project; and the assorted online guides about trying such date back 3+ years with mixed results; I figured I'd try to make a conversion effort. ESLint & Deep Code were particularly helpful. I figured you all could do something with this on your own time; hence the separate branch. Thanks.

[noobiek]

Hi, Is there a reason you decided to go this road and not take (and possibly improve) this https://github.com/typhonjs-backbone/backbone-es6 ?

[unquietwiki]

I didn't even see that come up in my searches on the topic before. Thanks for bringing it to my attention.

That particular effort looks moribund ATM, and I was able to spin out this effort based on reference materials & heavy code linting. I also wanted it to be as close to the original as possible: I don't have good unit testing of my own, but was able to try fixing up the testing in this batch.

On Wed, May 16, 2018, 5:08 PM noobiek notifications@github.com wrote:

Hi, Is there a reason you decided to go this road and not take (and possibly improve) this https://github.com/typhonjs-backbone/backbone-es6 ?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jashkenas/backbone/pull/4196#issuecomment-389703681, or mute the thread https://github.com/notifications/unsubscribe-auth/AA9fv033MKUmF20UgQvw8KSXexNkpM7Gks5tzL-DgaJpZM4UAqIQ .

[typhonrt]

Moribund.... Really? ;P Uh.. I don't do anything w/ it until this repo actually decides to pull the trigger on a release, so 1.3.3 compatible. If 1.4 is actually released I'd update backbone-es6. ;P Please release! ;P

[unquietwiki]

@typhonrt @noobiek I've got some personal stuff going on the next few days, so I won't have time to compare my yeoman effort here; against what you guys came up with. I'd be willing to put in some effort to help out whomever wants the help: I just want https://github.com/unquietwiki/floorplan to work right; I'm having trouble passing a Backbone.Collection from the browser into a series of ES2015+ classes. You might also want to look at what linters I set up to get this far. Thanks!

[noobiek]

So far I did not have any problems using BB in ES6 webpack builds. You could've taken something like this - https://github.com/sabarasaba/modern-backbone-starterkit Then you just - import Backbone from 'backbone' - into your components, whatever. Or did you miss that one too?

If your problems were with something else - can you be more specific where you had problems and what these problems were? While your project is very attractive and everything, I doubt anyone will rush reading through your code, 'cause most of us "got some personal stuff going on the next few days" too. So if you need help, please, be more specific.

[noobiek]

@typhonrt why not move forward, branching off BB to something else? Give BB a second life perhaps, and integrate bb.stickit into it (they are looking for maintainers, btw). I like the way bb.stickit handles views updates so much!

[ffflabs]

Hey I've heard you were discussing BB as es6 modules so I came to throw my version into the mix

https://github.com/HuasoFoundries/backbone_es6/

It's just old method extract refactoring technique, along with es6 named imports and finally rollup.js to bundle it out. I make sure my build passes the official repo tests.

[blikblum]

@amenadiel Do you tested to see if tree shaking worked?

We did the same with Marionette but tree shaking nor uglify dead code elimination worked even using ES modules. Tested with webpack 4x

I found that extending the prototype after the class constructor avoided tree shaking or dead code elimination

The only way to remove unused class from the bundle would be using ES6 class or wrapping all definition in a iif with a /#PURE/ annotation. Related: https://github.com/babel/babel/issues/5632 https://github.com/mishoo/UglifyJS2/issues/1261

[ffflabs]

@blikblum tree shaking works for some components, like View for example. (module is 11Kb vs 73Kb of the full Backbone module) In other cases, like Collection, it depends on Model, so you can't really import collection by itself.

[unquietwiki]

Hey everyone. Sorry for the belated followup: got married, and also been recovering from a cold.

(ponders)

@typhonrt Your attempt at this is a lot in line with what I was trying to do. However, I'm unclear how to actually try to use it; let alone help clean that up. I have attached the linting rules I used for mine; as for building, the process needs refinement. eslintrc.txt

@amenadiel I like that yours is on NPM, and has a bit more current documentation on it. However, when you say you can't use classes with it; that would seem to defeat what Typhon and I want to do?

@noobiek Aside from what we've posted here thus far, I also found https://github.com/maratfakhreev/backbone-es6-promise from @maratfakhreev , and https://github.com/lukasolson/backbone-super from @lukasolson . It would seem from what I wanted to do; and what everyone else has tried to do already; it seems like there has to be some kind of solution here? The stumbling blocks I am aware of overall include proper super/this inheritance, proper use of arguments, and seeing if any of this works in the latest browsers without being Babelized (which would help determine how to make that work).

Some related reading material I found trying to understand this stuff.

• https://zendev.com/2018/05/09/understanding-spread-operator-in-javascript.html
• https://medium.freecodecamp.org/here-are-examples-of-everything-new-in-ecmascript-2016-2017-and-2018-d52fa3b5a70e

[unquietwiki]

https://github.com/unquietwiki/floorplan I have my latest code updated for the project I'm working on; did set it to use backbone_es6 from @amenadiel . My Backbone classes in the browser still can't properly consume collections for some reason. :-/

[typhonrt]

For backbone-es6 there is a dist/ directory w/ a bunch of different bundles and a global version.

Some basic TODO demos here though the Parse ones no longer work: https://github.com/typhonjs-demos

See backbone-es6-localstorage-todos for ES6 usage via JSPM.

See backbone-es6-localstorage-todos-global-es5 for older global in browser ES5 usage.

This is described in the backbone-es6 readme. I don't have it available on NPM, etc. as this is an unofficial first and not exactly continually maintained attempt at updating BB due to the mainline stall. You can only pull the repo from github in directly via JSPM otherwise you need to grab the dist/ modules and reference locally which is not ideal.

typhonjs-backbone-esnext is the home for any potential official release taking what was learned from backbone-es6. Right now I just have extended events functionality up which is also published on NPM which works with a plugin manager typhonjs-plugin-manager I use for a couple of large / modular Node projects. If I do go forward and make any full backbone-esnext release effort I'll fully modularize all the components of BB into separate repos / modules which connect via typhonjs-plugin-manager for 1st and 3rd party plugins. The hard coded internal references found in mainline BB between components will be handled by events over a backbone eventbus behind the scene.

[ffflabs]

@unquietwiki currently the common way is to do

var messageModel = Backbone.Model.extend({
   ...
});

So... you'd like to be able to do

class MyModel extends Backbone.Model {
  ...
}

It doesn't sound like a big deal. If we rewrite Model, View, Controller to become classes, then extending them would be transparent.

However, to keep the compatibility with current projects, extend should be kept as a static method with takes me to the bottomline: I have yet to learn to implement a static method capable to perform prototypical inheritance from a class to a plain object.

[unquietwiki]

https://github.com/unquietwiki/floorplan/blob/master/references.md Check there: I dug up a number of updated JS references that might help.

On Tue, Jun 5, 2018, 8:30 PM Felipe Figueroa notifications@github.com wrote:

@unquietwiki https://github.com/unquietwiki currently the common way is to do

var messageModel = Backbone.Model.extend({ ... });

So... you'd like to be able to do

class MyModel extends Backbone.Model { ... }

It doesn't sound like a big deal. If we rewrite Model, View, Controller to become classes, then extending them would be transparent.

However, to keep the compatibility with current projects, extend should be kept as a static method with takes me to the bottomline: I have yet to learn to implement a static method capable to perform prototypical inheritance from a class to a plain object.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jashkenas/backbone/pull/4196#issuecomment-394928864, or mute the thread https://github.com/notifications/unsubscribe-auth/AA9fv2t8kDA5Xg7huUrQ_NgKc05aFupUks5t50zFgaJpZM4UAqIQ .

[typhonrt]

How the classical extend is handled in my effort which is separated out in: https://github.com/typhonjs-backbone/backbone-es6/blob/master/src/extend.js

and the module runtime entry point: https://github.com/typhonjs-backbone/backbone-es6/blob/master/src/ModuleRuntime.js#L36-L37