WEB WORKERS made my code over 100x faster (almost ZERO blocking time)

[@JoshuaMorony]

I also have another video covering this stuff (and more) from a game dev perspective on my other channel if you'd like to check it out: kzbin.info/www/bejne/bXO7p6OLl7OFpNE

[@aheendwhz1]

I almost didn't click on this video, because KZbin shit-translated title and description

[@gigachad8091]

For me it said Web Employees 😂

[@NoName-1337]

@@gigachad8091 true, "Web-Worker" -> "Web-Mitarbeiter". It makes no sense.

[@NoName-1337]

Uff, yt translates everything into my native language. Horrible.

[@kawaiisota]

Web-Mitarbeiter

[@adriatomas4972]

hahahah pensé lo mismo xD

[@nhkeers]

Would be interesting to see the effect of WASM for the generation code too, you could write the wave function collapse code in Go or Rust or similar and load the WASM, maybe even load it in the worker too

[@Simon-yf7fo]

KZbin funily translated the title to Web-Mitarbeiter in german which means web coworker.

[@FloKorp86]

I like the way you think!

[@karamuto1565]

I also used web workers in our companies project as a request intercepter to a 3rd party application. This also provided the benefit of a cheap caching mechanism.

[@ralusek]

Sounds like a service worker

[@karamuto1565]

@ralusek oh you got me. I totally mistake them for each other all the time

[@shaylevinzon540]

Gaming with angular? That really caught my attention. How? Also what if you'd want to run your game in a node environment and not through browser? any alternatives?

[@adriatomas4972]

this kind of workers can be used for example to create a chat?

[@plastikbeau3695]

Why do you use DOM elements for terrain display in Phaser, doesn't it all happen in canvas?

[@JoshuaMorony]

A canvas is still a DOM element, and even using Phaser's WebGL renderer (which I am doing) still requires accessing the WebGL rendering context via the canvas element, so at least as far as I understand there isn't a way to avoid the DOM entirely for actually rendering the game visibly to the screen.

[@plastikbeau3695]

@@JoshuaMorony sure, you need a reference to the canvas to access it's APIs, but what do you need Angular for? Most Phaser configurations I saw used just a parent container selector - no frontend frameworks required. I think you could just pass around (client-server-client) the data for the terrain generation and leave rendering, as well as creating canvas element and maintaining context availability to Phaser. Am I missing something?

[@JoshuaMorony]

​@@plastikbeau3695 yes you can absolutely build with just Phaser, my primary motivator for including Angular is to have Angular handle the UI because I just don't like managing UIs in Phaser. So basically the canvas sits behind everything, and Angular can overlay a UI on top. But then there are also some other convenient things about using Angular, like I'm using Injectable services to manage events/data and it's nice to be able to use things like the web worker generator.

[@plastikbeau3695]

@@JoshuaMorony I see, so it comes down to you being comfortable with Angular and forcing it into the workflow. All of the things you've mentioned are doable in Vanilla JS. I wouldn't take this route but you do you, might be educational for some.

[@AbegazNap]

ever the excellent teacher

[@geekybruce4819]

does receiving message from worker triggers Change detection ?

[@judgewest2000]

Thjis is beautiful. Here's a question, with the sheer advances in GPU-native web browser support bluring the lines between a native mobile app or a PWA (or wrapped, don't really mind), web workers, and a TON of native support for other things - other than very few people targeting millions, is there really a benefit anymore to still doing native? This is mainly a mobile question

[@JoshuaMorony]

For a game I think there are definitely strong benefits to going with a lower level/non-browser language, but as for general mobile apps/PWAs I've been of the opinion for a while that JS via something like Ionic/Capacitor is good for the majority of use cases

[@judgewest2000]

​@@JoshuaMorony Appreciate the opinion thank you very much. I have built a ton of Ionic stuff for firms with < 1000 users (usually employees, e.g. sales order lookup etc with some offline but not much) and started with Cordova, then Capacitor, but since then I have moved them to pure PWA for one reason. I HATE the app stores!

[@tmbarral664]

Joshua, I'd like to know if an OffscreenCanvas could have been helpful here ?

[@JoshuaMorony]

I haven't experimented with it and don't know much about it, so not sure, but potentially

[@moroccan1976]

Hey Josh, fantastic content as always. I second other commenters, please disable translations... it aggressively translates the technical terms, making me clueless. Plus, your voice and tone are recognizable, while the translations voices destroy your video content, to say the least.

[@JoshuaMorony]

Thanks, and you can switch to the original audio track in the settings for the video (I assume you can probably set this KZbin wide if you want to apply it to all videos by default too). It would be good if I could have the original audio track set by default but still have the audio dubs available for people who want them though.

[@delta4v]

Web worker + Shared Array Buffer + wasm = maximum performance

[@JoshuaMorony]

I haven't had the chance to use SharedArrayBuffer yet, but I have a fire spreading/heat transfer simulation mechanic in this game which is causing me some grief with performance still, I'm thinking there might be the potential here to utilise a worker/SharedArrayBuffer to improve this

[@aheendwhz1]

I almost did not click on this video, because KZbin shit-translated title and description

[@zlatanonkovic2424]

The German translation for this video is "Web Coworkers". Just don't. Please. I know it's well meant but we're all software engineers. We speak English. If the title is translated, I won't click on the video. I won't watch the video.

[@JoshuaMorony]

It's a new feature that's enabled by default, I'm not sure if I have any control over it. I can control the audio dubs, but I haven't been able to find any settings for title translations, I think this might be a user side setting.

[@Barrybario]

It's a shame the interface for working with web workers is so basic

[@diadetediotedio6918]

5s in JS are 5ms in lower level languages, just saying

[@JoshuaMorony]

I mostly went with JS with this because I'm good with it, I can leverage Angular, and I figured it would be a good way to also learn more about perf optimisation in JS/browser. But yes, this path is going to make some things harder and hopefully I don't end up regretting it. At least I'll learn something.

[@diadetediotedio6918]

@@JoshuaMorony Well, I'm not personally opposed to it, I just felt that WFC would benefit from a more performant language. I think you can even leverage wasm to do the heavy lifting and use JS for the core game logic, it is an interesting idea, don't you think? Also, talking about web frameworks, I'm personally curious, what is your opinion on solid-js, have you used it before? I recently used it and I felt it resonates with me more than angular, so I think your personal view on the enjoyability of it would be interesting

[@typedpixels]

​@@diadetediotedio6918 yes I absolutely agree, but also these are the sorts of awkward situations I kind of wanted to get myself into to see how I could solve it with JS (and yes wasm is absolutely something I want to look into) I've never used SolidJS, but I have followed its development somewhat, and if I were to pick a framework solely based on how closely it aligns to how I think about coding/app dev it would probably end up being either SolidJS or CycleJS

[@inlandish]

That's not entirely true. Look at benchmarks and you will see JS is quite performant.

[@diadetediotedio6918]

​@@inlandish Benchmarks are always half of the story in this sense, but I never denied JS is performant (it is not performant). The question for me is that JS is not performant in tasks that don't involve allocating huge amounts of wasted memory and in compute heavy algorithms like WFC, most benchmarks in which JS is performant against other languages really just show that JS is running on a very good JIT and GC and the other languages are not. And in most of those benchmarks JavaScript is usually from 5-30x times slower than lower level languages most of the time consistently when we talk about compute-heavy algorithms.