vanilla javascript to make component-based UI
I'm working on a side project at the moment, which is a boardgame.
I already implemented the complete game to be usable via CLI but now I want to make a web-interface as well.
I was wondering whether it'd be feasible to make that component-based without any of the big frameworks (angular/react/vue/svelte) as long as i combine it with RxJS to handle the events and DOM manipulation.
And if feasible, how you would approach building these components (e.g. regular HTML files scattered all over the place, ...)
20 Replies
The answer to, "can [X] be done without any of the big frameworks" is always "of course!". All the big frameworks, at the end of the day, hang common functionality on methods and a unified API to tie it all together…but it's still just JS under the hood. So if a big framework can do it with JS and added bloat, then JS alone can work, too!
You won't even need RxJS if you don't want to. Again, it's just JS with helper methods. You can easily enough make your own reactive data containers.
As for building the components, without more info about your game it'd be hard to tell. With what little info you've give so far, I'd say use
canvas and draw everything so you don't need more than one HTML file, a bunch of images (or one large sprite sheet) and some JS files to make it all work.oh no, i definitely don't want to use Canvas.
I'd go with a combination of HTML elements and some fancy CSS to make everything nice and similar to the actual boardgame, other stuff like art material for cards, I'd do with images
interesting you say it can be done without RxJS as well
haven't given that some thought yet
Why not use canvas? Game is kinda what it’s great at. Best tool for the job, IMO
because then I'd have to calculate everything regarding positiong as well, where as i really have designated areas for different game parts (e.g. board, player resources, ...)
also, it's a board game, i really can make it decent enough with some fancy gradients and animations in pure CSS where i can have the browser do that heavy lifting of calculations
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
I'm most conflicted on how to combine the web interface with the code I have already available like model and game logic for the terminal interface
It's not gonna be easy as GUI and terminal are vastly different
nobody said it had to be easy 😅
i was thinking about a conversational design for web GUI anyway
much like the implementation on BoardGameArena.com
I'm learning that I was approaching things the wrong way and just wanted a confirmation here again, if possible @cvanilla13eck @ellis8555 (tagging, because i don't know if the subject will come back without mentioning)
I already implemented the complete game including a Node CLI front-end
I was thinking to add another TS file to have an entry point for a web/ui front-end as well, but I feel it's more complex than that.
Currently i'm looking into webpack so I can split things up into multiple modules being
* the game on it's own (without any interface)
* a CLI front-end
* a web front-end
Eventually I can run those both front-ends separately from each other because they both include the files needed for the game through imports and so I don't need to copy those in both other modules/repositories
Is this the way to go? Or am I still overlooking things?
At this point I don't believe your project is complex enough to require webpack. You can split it up into different modules without WP using the built-in
import/export syntax.I thought I needed it because of something with exports and import not known in the browser and that webpack would fix those problems by bundling differently
The browser knows of imports/exports. You need to tell the browser you're using modules. You do this by either using the
.mjs extension (instead of .js) or using type="module" in your script tagOh, TIL
In that case I probably don't need WP indeed
Just in case it's of any use at all - Will Sentence just did a FEM on vanilla js UI, and I've attended a couple in the past on his platform on the subject (although I had to leave before he got to diffing, which was annoying).
His FEM course hasn't been edited yet so it's a bit length rn, but thought it was worth mentioning
can't seem to find it, do you have a link?
what about
require then?
typescript seems to compile those imports into require statementsrequire is a Node.js thing and not a JS thingyes, my CLI is running through Node
but I want that same thing to run in a browser as well
is that impossible?
Forgot to mention it's paid, but they got an article for free on vanillajs:
https://frontendmasters.com/blog/vanilla-javascript-todomvc/
and it might be worth the 1 month sub when they edit down and release the other vanilla-ish course (that's my plan):
https://frontendmasters.com/workshops/hard-parts-ui/ (not edited yet)
https://frontendmasters.com/workshops/pure-javascript/ (out in a couple of days)
Writing a TodoMVC App With Modern Vanilla JavaScript
Click here to see how I turned ~170 lines of code in moder vanilla JavaScript in TodoMVC.
The Hard Parts of UI Development — Exclusive Workshop
Spend A Full Day Immersed in The Hard Parts of UI Development with Will Sentance
You Don't Need that Library — Exclusive Workshop
Spend a full day rediscovering Vanilla JavaScript and DOM manipulation for modern web developers
or maybe that's the problem with it still being in the same folder (and thus with the same
tcsonfig.json and package.json files whereas requirements are different for Node projects than they are for Web UI projectsalso worth mentioning Stephen Grider's typescript course - he makes a (broken) framework in typescript. it's class based though (and broken), but it shows it's quality that I'm still willing to recommend it 😆
i'm probably struggling because i'm making both front-ends in the same project
so i think i should refactor it first to have the Node CLI in a different project, then have everything from the model separate in a module or something and then yet another project to build the vanilla JS Web UI