3 ms·

> The key reason web frameworks dominate these days is that it's very hard to keep the UI in sync with state. I think that's it. I wonder how far we could go

by jraph 4y ago

> The key reason web frameworks dominate these days is that it's very hard to keep the UI in sync with state. I think that's it. I wonder how far we could go with vanilla js + a dead simple central store implementation that would help update the UI at different places when a value changes. You might end up re-inventing Svelte by attempting this though.

CraigJPerry 4y ago
Someone posted this here a while back: https://github.com/1Marc/todomvc-vanillajs-2022/tree/main/js https://github.com/1Marc/todomvc-vanillajs-2022/tree/main/js - i bookmarked it because i thought it was well done
- jraph 4y ago
  Very interesting indeed. That's some food for thought. Though I should note that if this code has a "store.js" file, this is not the kind of store that I had in mind. More like the Svelte store [1], or Redux (which I find awfully complex). I didn't know the "storage" event on Window [2] (which, for the record, triggers when localStorage is modified from another page. Does not trigger when modified from the same page, which makes localStorage not sufficient as-is to build the kind of store I'm referring to). [1] https://svelte.dev/tutorial/writable-stores https://svelte.dev/tutorial/writable-stores [2] https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event https://developer.mozilla.org/en-US/docs/Web/API/Window/stor...
  - CraigJPerry 4y ago
    >> Does not trigger when modified from the same page I'm thinking that's the purpose of https://github.com/1Marc/todomvc-vanillajs-2022/blob/main/js/store.js#L25 https://github.com/1Marc/todomvc-vanillajs-2022/blob/main/js... - without dispatching that custom save event, there wouldn't be a way to react at any other locations on the same page to the store updating.
numtel 4y ago
In a recent project, I wrote my own template class that works kind of like Lithtml but without any kind of magic reactivity. It just rerenders when properties are updated through the "set()" method. https://github.com/numtel/democratic-capital/blob/master/src/utils/Template.js https://github.com/numtel/democratic-capital/blob/master/src... An example template: https://github.com/numtel/democratic-capital/blob/master/src/components/Overview.js https://github.com/numtel/democratic-capital/blob/master/src...
mmcnl 4y ago
Indeed you will re-invent React/Vue/Svelte.
- gremlinsinc 4y ago
  That's how it starts... React/Vue/Svelte are too big/bloated for what I want to accomplish... 1000 hours later and 200k lines of code... I just built the next React/Vue/Svelte, now there's even more options to choose from, with same amount of bloat,just different because 'my way' is better than 'their way' - maybe.
ak39 4y ago
And Svelte is a “reinvention” of Knockout, just requiring a precompile. (Not complaining at all, thank goodness we have such choices.)
fknorangesite 4y ago
> You might end up re-inventing Svelte by attempting this though And then in the next breath make some joke about the proliferation of so many different js frameworks.

by jraph 4y ago

CraigJPerry 4y ago

Someone posted this here a while back: https://github.com/1Marc/todomvc-vanillajs-2022/tree/main/js https://github.com/1Marc/todomvc-vanillajs-2022/tree/main/js - i bookmarked it because i thought it was well done

jraph 4y ago
Very interesting indeed. That's some food for thought. Though I should note that if this code has a "store.js" file, this is not the kind of store that I had in mind. More like the Svelte store [1], or Redux (which I find awfully complex). I didn't know the "storage" event on Window [2] (which, for the record, triggers when localStorage is modified from another page. Does not trigger when modified from the same page, which makes localStorage not sufficient as-is to build the kind of store I'm referring to). [1] https://svelte.dev/tutorial/writable-stores https://svelte.dev/tutorial/writable-stores [2] https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event https://developer.mozilla.org/en-US/docs/Web/API/Window/stor...
- CraigJPerry 4y ago
  >> Does not trigger when modified from the same page I'm thinking that's the purpose of https://github.com/1Marc/todomvc-vanillajs-2022/blob/main/js/store.js#L25 https://github.com/1Marc/todomvc-vanillajs-2022/blob/main/js... - without dispatching that custom save event, there wouldn't be a way to react at any other locations on the same page to the store updating.

numtel 4y ago

In a recent project, I wrote my own template class that works kind of like Lithtml but without any kind of magic reactivity. It just rerenders when properties are updated through the "set()" method. https://github.com/numtel/democratic-capital/blob/master/src/utils/Template.js https://github.com/numtel/democratic-capital/blob/master/src... An example template: https://github.com/numtel/democratic-capital/blob/master/src/components/Overview.js https://github.com/numtel/democratic-capital/blob/master/src...

mmcnl 4y ago

Indeed you will re-invent React/Vue/Svelte.

gremlinsinc 4y ago
That's how it starts... React/Vue/Svelte are too big/bloated for what I want to accomplish... 1000 hours later and 200k lines of code... I just built the next React/Vue/Svelte, now there's even more options to choose from, with same amount of bloat,just different because 'my way' is better than 'their way' - maybe.

ak39 4y ago

And Svelte is a “reinvention” of Knockout, just requiring a precompile. (Not complaining at all, thank goodness we have such choices.)

fknorangesite 4y ago

> You might end up re-inventing Svelte by attempting this though And then in the next breath make some joke about the proliferation of so many different js frameworks.