Review my programming stack for a web-based asynchronous auto-battler RPG

Started by
3 comments, last by Brian Sandberg 2 months, 2 weeks ago

Hello folks !

About me: I studied computer science ~15 years ago. Did not code much afterward. I did a small game prototype in html + js (& jQuery) around 2014, before ES6. I’m now working more seriously on the same game but with a client/server architecture.

The game will be web-based and similar to gacha games like “AFK Arena”, “Summoner Wars” or “Epic 7” in terms of mechanisms / tech requirements. So, an RPG auto-battler with asynchronous indirect player interactions. Most interactions are effects players will have on the world ; leaderboards ; debuffs they can send each other. Nothing instant and a small delay (hundreds ms to a sec) in propagating the info to other players is fine. It will be mostly menu and text-based with little to no graphisms. No sound.

I want an authoritative server to avoid cheating and keep a somewhat competitive PvE environment.

I’d love to get your input on my technical stack as many of these topics are brand new to me and I’d welcome some fresh pair of eyes to guide me a bit. My goal is to keep it as simple as possible to create a MVP that can evolve and scale into a full game if things

I’ll be using:

  • Confluence as my game design wiki and tech doc wiki.
  • VS Code as my text/code editors with a few plugins along the road
  • GitHub for version control
  • DigitalOcean platform app hosting (5$ plan) for a simple server deployment directly from my GitHub repo (I lack the linux skills for a droplet setup and want to keep things “simple”)
  • Node.js for the main server runtime environment
  • Express.js to ease the server/http request process
  • Socket.io for WebSockets & server <-> client communication. It feels like a safer route compared to HTTP Rest API since I will need server->client communication in many different places in my game.
  • EJS for the back-end html template file generation
  • Google OAth2 for authentication, with passeport
  • HTML / JS for the front-end browser display and client logic
  • jQuery for the client-side DOM manipulation
  • MongoDB Atlas (free plan) for my database with Mongoose (haven’t research much this one yet but it seems like a helpful tool to model object into the db) & compass for db visualization
  • Vue.js for UI (I hesitated between vue / react / angular but it seems like vue have a gentler learning curve)
  • Stripe (later) for payment processing.

This is what I’ve come up with so far after doing a fair bit of research. Maybe a bit generic but what is your opinion of it ? Am I missing things ? Are some of the above not necessary ? Any tips / advice / criticism will be appreciated 🙂

I’d be happy to answer questions and/or clarify any point if needed.

Cheers !

Advertisement

jQuery became irrelevant during the last 15 years, not least when people switched to using Vue and similar UI libraries. Personally I'd recommend React over Vue, but either is fine. If you're writing this as a modern PWA single-page application (and you should), then you don't have much need for generating html on the server either.

You might consider using TypeScript instead of plain JavaScript on both the frontend and backend.

MongoDB will be fine, but there is rarely any reason to pick anything other than PostgreSQL.

Your list didn't include any bundler, which is an essential component in any tech stack that involves JavaScript. There's the old workhorse Webpack which will do fine, and a bunch of newer alternatives with various improvements.

Good luck with the project, and do remember to post the occasional blogpost / screenshot here when you make progress!

Thanks a lot for the feedback Brian !

UI libraries is a topic I clearly haven't researched enough at the moment (it's on my task list for a little bit down the road). There are so much technology changes that happened in the last ~10 years plus the fact that I'm tackling some areas that I'm not familiar with… it's not easy to start piecing all of it together. Especially since most pieces feel interconnected 🙂

Might I ask why you'd recommend React over Vue ?

I did a bit more research and it seems that you are spot on and these libraries should likely replace my need of jQuery altogether (yay, one less worry !).

I've looked briefly into TypeScript and I think I'll pass for now. I get the appeal of having strict variable typing in my code to avoid the error of using the wrong one at the wrong place but I think that for now, the added overhead & added complexity might not be worth it for my personal sanity !

In the world of databases, I'm a newcomer. I grasp the concept but it is very hard for me to get a clear idea of what is going to be easier/better between noSQL and PostgreSQL for me. It seems that the complexity of my queries should impact my choice but I'm unsure of the extent of my future queries' complexity at this point in my development process. That's why I chose a noSQL one as it felt like the simpler option here.

You just made me discover a new word: “bundler” 🙂 I'm adding that to the list of things I need to explore (probably a bit later as it doesn't feel essential right now from the little I read about it).

Feel free to correct me if / where I'm wrong… and thank you again for all the suggestions.

There's a lot to catch up on after a decade, so ask away :)

You're unlikely to get around using a bundler. If you want to split your project into multiple files, for each class or service or component, at least on the frontend, the bundler is the part of the build pipeline that combines them into a single file for the browser to download. But don't worry, most tutorials for getting started with a modern UI library will show you how to set that up.

TypeScript isn't only about avoiding the error of using the wrong type (which is irrelevant for tiny projects but become increasingly necessary the larger the project is or the more people work on it), but just as much about providing autocompletion and easy documentation for your code. For example, if you are creating an object, and you defined a type for it, your editor will remind you which fields it has etc. (Under the right circumstances you can also have much of this with plain JavaScript but its not as elegant.) TypeScript is also an opt-in superset of JavaScript, so you can add types where they are convenient, and skip them elsewhere.

The thing I like about React is that it's extremely simple, and all the logic you need to build and control your UI is expressed with regular code, so there's nothing special to remember and you can use all your usual techniques. Whereas libraries such as Vue and Angular have a bunch of built-in components/directives that you need to memorize for even the simplest things. For example, do you want to control whether an element is added or removed from the DOM? In Vue you do it with some Vue-specific directive added to the element, whereas in React you simply have a JavaScript expression that either returns the element or null/undefined.

As for Mongo, noSQL just means an ad-hoc Mongo-specific query language instead of SQL. You get the freedom to ignore structure, at the cost of having to actually deal with unstructured data if you make use of it. PostgreSQL offers both, and has excellent JSON capabilities, and is essentially also a better Mongo than Mongo. But both will work fine for you.

This topic is closed to new replies.

Advertisement