2019-08-21T21:28:28.056Z
A Tale of Rewrites: FsProClient
What is Fs-Pro sef?
FS-Pro stands for Football Simulator Pro. Pro doesn’t have a particular meaning yet. At first it was ‘professional’ but that sounded too serious. And it implied that there was an ‘unprofessional’ version of the game??? So No.
FsPro is a football manager simulation game kini. I and my brother have this football game we play with our created teams and players, but it’s only a simulation. We use dice to produce results and record them with pen and paper, with league tables and all. One Friday February 22nd, 2:17pm I decided to automate it. What started out as a simple js file to randomize match results has turned into this really-awesome-coding-exprience!. For those few weeks when it was called ‘Football-Simulator’ I never wrote so much javascript in my life (I haven’t been writing js for that long anyways: <br a year), I stretched my knowledge of CSS, HTML and Javascript, I loved EVERYTHING. It was rough and gritty but it worked.
Early days when everything was on one page
I created an Express server to serve the index.html
page with one javascript file and connected it to a MongoDB database, we played our three leagues and everything was fine.



Until we wanted to add more functionality.
We wanted to make it realer. This meant:
- Increasing the number of players from 7 to 11
- Adding functionality to buy, sell and trade players i.e create a Transfer Hub
- Add web sockets for real time communication between managers (us)
Each part of our app was a separate html file so it meant I would have to register sockets for each page? tough. Then there was the Transfer Hub. Where you can buy and sell players. As I began working on it I noticed more and more parts of the app needed to be dynamic and I was repeating A LOT of things. I was stuck tbh. I started making the transfer hub April 20th. Didn’t do anything till May 23rd. Then on May 25th, I couldn’t continue.
File structure of the Express app
Transfer Hub right about when I got stuck =(
I decided to rewrite it in Vue.
(╯°□°)╯︵ ┻━┻
Here it became ‘FsPro’
So Vue innit?
I chose Vue because I liked it. Using a framework meant I wouldn’t have to repeat code and it’s easier to make some things dynamic but I missed writing my vanilla JavaScript.
Other pros were:
- Better routing
- Faster development
- Babel. Meaning I could run it on the old iPad I used for testing
My setup was Vue + TypeScript (because I wanted share code ,like classes and interfaces, with the server).
Things were going alright until I was adding more views. I didn’t know how to structure my codebase in the form of ‘modules’ so I could separate concerns and all. That bothered me for a while. So…
I decided to rewrite it in Angular hohohoho
┻━┻ ︵╰(°□°)╯︵ ┻━┻
I knowwww.
Beht why tho?
The first framework I used was Angular. I started learning Vue after I got frustrated with Angular and its complexity. But for a few months now I have been working on a team whose main frontend stack is Angular. So obviously I had to use it then. During that time, I began to appreciate the framework even more. We were building a large scale enterprise app so I got to see Angular being used in that capacity. It was during that time that I decided to move it to Angular.
The pros of choosing Angular:
- It’s modular architecture is perfect for FsPro. It’s easier for me to understand
- Supports TypeScript out of the box. Awesome!
- It feels more ‘solid’ :3
While searching for a UI framework for FsProClient I ‘discovered’ this Angular Admin UI framework called Nebular based on Bootstrap 4. A Godsend really, I was giving up on writing frontend code :#, but thank God. It’s easy to use and flexible like Bootsrap Vue or something similar and has cool Angular components like Angular Material (but not enough, Material is a whole ‘nother beast)
So that’s the setup now. Angular 8 + Nebular UI system. I made the repo public from the beginning because I need epp.
Find it here.
I am so proud of what FsPro is turning out to be, it has great potential. I don’t even know what it really is yet.
From February 22nd when I made the first commit in Football Simulator to August 14th when I initialized FsProClient, I think we have tried.
Hopefully no more rewrites :)))
I would write a post about it soon ─=≡Σ((( つ◕ل͜◕)つwawu, so if this is FsProClient what about the server?
Thank you Jesus! <3