JavaScript Browser Game

I work as a Product Owner since January 2022. Daily programming is no longer my focus. Instead, I spend my time with software architecture, discussions with stakeholders and my team and organising a lot of smaller tasks. And after one year I was wondering how much I already forgot from my old programming skills :-)

Some time ago I found a nice game named Babs is You: simple, creative, retro, fascinating. A little side project seems be a good idea to test my programming skills and recreate the basics of the game. To make it challenging, I choose JavaScript and Svelte as programming languages. I had only a basic understanding of JavaScript (I could not tell the difference between "==" and "==="). And I knew nothing about Svelte at all except the name.

Let's get started

The development tools that I chose are:

• Github Desktop
• Visual Studio Code
• JetBrains Rider
• Brave browser
• Jest as test environment

The Svelte homepage provides a lot of examples. I downloaded one of them as a starting point. I also wanted to use TDD (test driven development) and installed jest. I spent about 2 hours to understand its philosophy and get comfortable with it. Jest is easy to integrate in a development process. It can watch my sources and run the tests automatically if changes were saved.

I had a basic idea of the implementation in mind and started with the obvious: creating a game board and Baba, put him on the board, move him around and make sure that he does not fall off the edges. Everything in small iterations, tests first and then the implementation until all tests run successfully.

In the beginning, two major rewrites of the implementation where necessary. One because of my lack of knowledge about JavaScript and one because my initial design of internal data structures did not work out well. But I could do the rewrites without changing a large number of my tests.

The UI and Svelte came last. With a lot of help from the internet, I finally figured it out and created an interactive web app similar to the original game. My version allows Baba to move, get blocked by walls, push boxes around for fun and modify the environment. Try it out and use the browswer's back button to come back here.

What I learned in about 40 hours

• Better understanding of JavaScript
• Basics of Svelte
• Development environment for web applications
• To used TDD, you need to understand and solve the problem first, then it can be implemented
• TDD reveals missing requirements early
• TDD creates good APIs
• TDD leads to good test coverage (over 90% in my case) but other testing is of course still necessary
• Have the logic implemented before you create the UI. The UI distracts me from writing tests

Final Thoughts

Now I know better what I can expect from my team when it comes to web app development.