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.

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.

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 :)))

wawu, so if this is FsProClient what about the server?

Thank you Jesus! <3