Our great sponsors
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
PixiJS
The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
-
This is not a step by step tutorial, I wanted to keep this article more conceptual and code-light. You should be able to follow my Spaghetti code in the project repo.
rapier.rs - modern physics library written in Rust. It looks good and performant, at a first glance dev experience is a lot better than box2d. Documentation gives me hope!
I decided against using any framework to avoid unnecessary complexity. For my bundler I decided to use Vite since I was familiar with it and the provided vanilla Typescript template. It provides an easy way to import webworkers and their dependencies even from Typescript files.
Pixi.js is a fairly easy to use WebGL renderer. It will show what we're doing on screen. Everything I'm doing can be replicated by copying one of the examples. All you need is to:
box2dwasm - an old, still maintained C++ library compiled to WASM. The documentation is lacking and developer experience seems poor.
I can imagine that communication with vanilla webworkers could get very complex. Comlink is something that's been on my list for a while and I'd like to try it out.
Related posts
- Setup React Typescript with Vite & ESLint
- Use CSS Variables to style react components on demand
- Ask HN: How do we include JavaScript scripts in a browser these days?
- Deploy a react projects that are inside a subdirectories to GitHub Pages using GitHub Actions (CI/CD)
- CSS Hooks and the state of CSS-in-JS