Wait... learning web dev by writing games? Is that even possible?
It was one of the questions I asked myself after being hired as the Pixi.JS developer. It was surprising because I applied as a Node.JS developer and had never written games besides accomplishing my curriculum at University. Before the job, my experience was purely connected with web development. Nevertheless, I was interested in how it could go, so I've accepted the offer. It was the right decision.
All things considered, this is my list of why I think writing games using the technologies mentioned above is an excellent path to learn web development.
Writing games involves every field of web development - from backend to frontend. The best part of it is putting everything together. Talking about the backend, depending on your needs for communication, you can choose WebSockets or RestAPI. Inside your game, you will need to handle different code scenarios, parsing server responses into the game's object, etc.
Pixi.js v5 uses types for its codebase, and it's highly recommended to write games in Typescript. Most elements are written in ES6 classes. It is a lot easier to write and maintain code. What is more, as writing games introduce many problems to solve, developers can use tools provided by Typescript - custom typings, type guards, interfaces, generic classes, and so on. Why is it important? Typescript is a great language that is widely used, especially in web development. Learning its secrets surely will enrich the developer's portfolio.
Depending on your use case, Pixi.js could be used in various situations. For example, you might need to build a reusable codebase for similar games to speed up the process of delivering products. This is the situation when design patterns come in.
IoC is great when different effects are needed in one scene, such as animating splash effects with other materials (elements with different movement physics). If you would like to test your game, you might consider mocking communication with the server to cover test scenarios.
Just interface simple as that allows a developer to replace objects, which implement given interface. For example, when the user switches from mobile-portrait mode to mobile-landscape, UI should be changed in order to satisfy UX.
The LandscapeButtons object's responsibility is to choose proper graphics and alignment for its children.
when you develop characters’ abilities, a builder pattern makes it easier and cleaner. Reuse code to create amazing game scenes.
Considering object-oriented programming, some game components will be made using many smaller ones. To ensure code readability, it might become helpful to create objects factories. As a result logic of creating a complex component is moved into a single function.
Below is a simple mechanism based on Promises + async/await from ES2017. The main component waits for its children to finish some action in order to proceed. The resolver could be invoked from another place inside the children's class. This use case might be particular but shows how one could learn asynchronicity during writing web games.
Since Pixi.Js is made to create digital content rendered by WebGL, it could be a good idea to separate some of the elements of the game, such as the game’s settings. It could be done by integrating React Framework into the project. Creating UX elements e.g. sliders or checkboxes might be easier in HTML+JS+CSS combo. Moreover, many third-party node modules could be used to accomplish some clients’ requirements.
Writing games is very comprehensive and will guide you through different areas of computer science. Knowledge of Pixi.js surely extends your CV. After reading this text, I hope that you'll be willing to try it.