morris / vanilla-todo

A case study on viable techniques for vanilla web development.
https://morris.github.io/vanilla-todo/
ISC License
1.17k stars 54 forks source link

Should we refactor for ES6? #6

Closed morris closed 2 years ago

sperretcraft commented 3 years ago

Would love to see a version with ES6 ! And why not with Typescript (I read your comment on HN saying you'd use it if build steps were allowed) I think your work would be even more interesting if closer to real uses of Vanilla in 2020 (with a lot of builder framework available and Typescript broadly used).

Great work anyway. Would love to see more.

P.S. I'm not fluent enough in JS to help you going forward >.<

perfectsquircle commented 3 years ago

I took a crack at it because I haven't played with native modules much and I was curious.

Here is the diff set: https://github.com/morris/vanilla-todo/compare/main...perfectsquircle:feature/es6

I started by running Lebab to take care of the boilerplate changes.

lebab --replace public/scripts --transform \
arrow,\
arrow-return,\
obj-method,\
obj-shorthand,\
for-of,\
for-each,\
let,\
template
# destruct-param <-- interesting changes, but broke some things

Then I converted everything on the global VT object into modules. It was actually very easy because everything was already scoped nicely.

My takeaway: it's interesting to note the differences, but maybe it should exist only as a fork for comparison sake? The original art is interesting because of the hard constraints.

In the readme you state

considerable duplication (most of which may be mitigated by ES6)

I'm curious what ideas you had for this.

morris commented 3 years ago

Thanks for your effort @perfectsquircle - looking good although missing some steps (convert HTML string arrays to template literals, simplify one-line functions e.g. () => { call(); } to () => call()).

I remember not being super happy with the wording

albeit verbose and with considerable duplication (most of which may be mitigated by ES6)

and I should change it; ES6 does reduce verbosity, and therefore the duplication may hurt less, but it's structurally the same duplication. That can only be solved through helpers (as far as I can tell).

In any case I agree with you, I think it made sense to hit "rock-bottom" at least once with ES5. I'm inclined to keep it as it is and let an ES6 version be a fork or a branch just for reference. I'll keep this discussion open for a while and see if there's more demand. If you want to progress on your ES6 fork, feel free, would be interesting to see exactly how much simpler it gets :) thanks again!

morris commented 2 years ago

1.5 years later... done :)