One of the first things I had to do as a newly minted web developer was make elements on the page reactive beyond what I could do with my months of study of JavaScript and jQuery. I was introduced to Knockout and Vue at around that time, and I’ve tinkered a little with React.
Vue has been by far easier for me than React, mainly because the setup for Vue is much
like other JS libraries (Slick, for
instance) that I’m used to including on a project. That is, you download a file or folder
and include it in a script tag on your web page, before your main script. Vue
even looks a little bit like Slick with how it requires calling a function that just takes
an object with properties to define your configuration. No ES6 classes, no npm or Webpack
build processes to figure out, if you don’t want to mess with all that. Vue also can be
easily used with the HTML you already have; no need to learn JSX.
The part about not having to compile code is the part I really like. I have been working on an app idea recently that requires a lot of compiling, and I’m just kind of sick and tired of it. Whenever I can, I try to go back to the good old days of my first web design training, when I could just write some files and be done, like magic.
For this reason, for the past week and a half, I’ve wondered away from my side project to do a funner side side project. That’s what reactive libraries were made for anyway, right?
The side side project is titled simply “Matt Watson’s Games,” and my idea was to push Vue components with string templates as far as I could without resorting to an npm build situation. I decided to give up .vue component files or any kind of URL routing or store state management, apart from whatever I might be able to write without using an npm package. (Not even any scss, so the new CSS variables ended up being super handy.) There’s just something I like about being able to code static files with plain old css, js and html, upload those few files to a server, and call it a day.
There is a live version running at mattwatson.org/games, and the repo is here. I’m in the middle of coding Mancala right now. All the games are purely frontend and meant to be played by two people on the same device. Data-persisting multiplayer games are completely another kind of project I won’t be doing any time soon, although I did just get a copy of the 447-page book HTML5 Games: Novice to Ninja by Earle Castledine. We’ll see…
I plan to come back to this project occasionally and keep adding games… until I don’t anymore. For every game, I make a new file containing the necessary Vue string template components. Not a very pretty system, but not bad considering there is no build system. And it’s a lot of fun to work on.