3 ms·
Related - I'm working on a hobby hearthstone-like card game using Vue and although it's not two-way, I have a system that's reactive all the way down from the s
by udbhavs 5y ago
Related - I'm working on a hobby hearthstone-like card game using Vue and although it's not two-way, I have a system that's reactive all the way down from the server to the dom rendering of the game board.
I have a deep Proxy that wraps the game state and watches for any changes on the server. It then sends a diff of the current state with the previous synced one using fast-json-patch (https://www.npmjs.com/package/fast-json-patch https://www.npmjs.com/package/fast-json-patch) to the client which also uses the same library to reconcile the state within a Vue reactive({}) object, which then updates the DOM. Since it's only a card game, it's all event based and there's no game loop or polling needed and there's only a few websocket messages per minute. It was fun to design and is pretty efficient too.
- protoduction 5y agoSounds really interesting! Is this open source somewhere? Or perhaps you could share some gist to learn from?
- ahefner 5y agoIs the state so large that it's worth the effort sending diffs rather than the whole state? Being a bit of contrarian, and not a front end person, I'm inclined to believe that you could do the DOM manipulations pretty easily in plain JS without a framework. Anyway, sounds like a fun project.