{"action":"created","issue":{"url":"https://api.github.com/repos/mrdoob/three.js/issues/14654","repository_url":"https://api.github.com/repos/mrdoob/three.js","labels_url":"https://api.github.com/repos/mrdoob/three.js/issues/14654/labels{/name}","comments_url":"https://api.github.com/repos/mrdoob/three.js/issues/14654/comments","events_url":"https://api.github.com/repos/mrdoob/three.js/issues/14654/events","html_url":"https://github.com/mrdoob/three.js/pull/14654","id":348112289,"node_id":"MDExOlB1bGxSZXF1ZXN0MjA2NTQwMzcw","number":14654,"title":"Convert to ES2015 classes, for a smaller/faster bundle","user":{"login":"Rich-Harris","id":1162160,"node_id":"MDQ6VXNlcjExNjIxNjA=","avatar_url":"https://avatars3.githubusercontent.com/u/1162160?v=4","gravatar_id":"","url":"https://api.github.com/users/Rich-Harris","html_url":"https://github.com/Rich-Harris","followers_url":"https://api.github.com/users/Rich-Harris/followers","following_url":"https://api.github.com/users/Rich-Harris/following{/other_user}","gists_url":"https://api.github.com/users/Rich-Harris/gists{/gist_id}","starred_url":"https://api.github.com/users/Rich-Harris/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Rich-Harris/subscriptions","organizations_url":"https://api.github.com/users/Rich-Harris/orgs","repos_url":"https://api.github.com/users/Rich-Harris/repos","events_url":"https://api.github.com/users/Rich-Harris/events{/privacy}","received_events_url":"https://api.github.com/users/Rich-Harris/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-08-06T23:14:17Z","updated_at":"2018-08-07T08:53:53Z","closed_at":null,"author_association":"CONTRIBUTOR","pull_request":{"url":"https://api.github.com/repos/mrdoob/three.js/pulls/14654","html_url":"https://github.com/mrdoob/three.js/pull/14654","diff_url":"https://github.com/mrdoob/three.js/pull/14654.diff","patch_url":"https://github.com/mrdoob/three.js/pull/14654.patch"},"body":"Hi there! Please forgive the size of this PR; I'm opening it more to start a discussion than anything, and I chose this over opening an issue (or adding to one of the existing ones) because it felt like it would be beneficial to a) be able to show exactly what I'm talking about, and b) prove that it's actually possible.\r\n\r\n## tl;dr\r\n\r\nWe can make Three.js smaller and faster to load — and hopefully pave the way for future improvements like treeshakeability — by switching from functions to ES2015 classes. This PR was generated with [convert-threejs-to-classes](https://github.com/Rich-Harris/convert-threejs-to-classes), which provides some more information.\r\n\r\n## Background\r\n\r\nThere have been a couple of issues in the past suggesting migrating to ES2015 classes — e.g. https://github.com/mrdoob/three.js/issues/11552 and https://github.com/mrdoob/three.js/issues/6419 — but at the time those issues were raised it was more of an encumbrance than anything, since browsers didn't yet support the `class` keyword.\r\n\r\nNow, though, all browsers support classes, and performance is excellent. No transpilation is needed to use them. As of this PR, `build/three.min.js` is 5% smaller than the current build, and startup time is quicker.\r\n\r\n## Does everything work?\r\n\r\nAll the unit tests pass. Most of the examples still work, but a few need updating because **switching to classes introduces a breaking change** — you can no longer do this...\r\n\r\n```js\r\nfunction MySubclass() {\r\n  MySuperclass.call(this); // this call is illegal!\r\n}\r\n```\r\n\r\n...but must instead do this:\r\n\r\n```js\r\nclass Mysubclass extends MySuperclass {}\r\n```\r\n\r\nSome of the examples may be tricky to update automatically; these could be addressed in a follow-up PR if it turns out to be prohibitively difficult.\r\n\r\n## Is it really worth it?\r\n\r\nThat's for the maintainers to decide. But I believe this would be the best decision for the project — classes are easier to reason about, easier to statically analyse (which raises the tantalising possibility of proper tree-shakeability!), and are the 'officially sanctioned' and modern way to write this sort of code.\r\n\r\nThe downside is the breaking change outlined above, but it's one that is very easily addressed in app codebases. May as well rip the bandaid off now!\r\n\r\n## Follow-up work\r\n\r\nAside from fixing the examples mentioned above, there are some further tweaks to the codebase that could be applied manually in a second PR — [see details here](https://github.com/Rich-Harris/convert-threejs-to-classes#follow-up-work).\r\n\r\n---\r\n\r\nLet me know if this is something you'd be interested in doing. Thank you! 🍻 "},"comment":{"url":"https://api.github.com/repos/mrdoob/three.js/issues/comments/410984504","html_url":"https://github.com/mrdoob/three.js/pull/14654#issuecomment-410984504","issue_url":"https://api.github.com/repos/mrdoob/three.js/issues/14654","id":410984504,"node_id":"MDEyOklzc3VlQ29tbWVudDQxMDk4NDUwNA==","user":{"login":"IvanSanchez","id":1125786,"node_id":"MDQ6VXNlcjExMjU3ODY=","avatar_url":"https://avatars0.githubusercontent.com/u/1125786?v=4","gravatar_id":"","url":"https://api.github.com/users/IvanSanchez","html_url":"https://github.com/IvanSanchez","followers_url":"https://api.github.com/users/IvanSanchez/followers","following_url":"https://api.github.com/users/IvanSanchez/following{/other_user}","gists_url":"https://api.github.com/users/IvanSanchez/gists{/gist_id}","starred_url":"https://api.github.com/users/IvanSanchez/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/IvanSanchez/subscriptions","organizations_url":"https://api.github.com/users/IvanSanchez/orgs","repos_url":"https://api.github.com/users/IvanSanchez/repos","events_url":"https://api.github.com/users/IvanSanchez/events{/privacy}","received_events_url":"https://api.github.com/users/IvanSanchez/received_events","type":"User","site_admin":false},"created_at":"2018-08-07T08:53:53Z","updated_at":"2018-08-07T08:53:53Z","author_association":"NONE","body":"> What would be the official recommendations for people who have to support IE11 (which is far from being dead)?\r\n\r\nTranspile your code so it looks like a UMD package. See e.g. https://github.com/Leaflet/Leaflet/pull/6021/files - the Leaflet codebase is ES2015 modules, but the UMD bundle supports down to IE8.\r\n\r\n[The `rollup.config.js` file here also creates a UMD bundle](https://github.com/mrdoob/three.js/blob/6201c9ac8c8a384ebc475e5bdb7c6ee0d75885f7/rollup.config.js#L34), so I don't foresee any major obstacles regarding browser support."}}
{"actor":{"display_login":"IvanSanchez"}}