Farer

It seems to be almost completed. Would you like to finish it together?

We are now at the final stage. When looking for a detour in the direction blocked by the map boundary and failing to find one, the program attempts exploration on the opposite side. It's getting very close to being complete.

https://github.com/Farer/bw_path_finding

Since I recently felt the limitations of the A* algorithm in my LIVE project, I am planning to proceed with this attempt. As a result of discussing with many AIs, it was difficult to find existing cases. As far as I have reviewed extensively, I have come to the conclusion that the A* algorithm also involves a lot of unnecessary computations, so I am trying to minimize such computations themselves. Since I am continuously running the service in LIVE, I believe I will be able to thoroughly verify its performance. For reference, the current LIVE service is utilizing a Mini PC equipped with an N100 CPU. This is also an attempt to achieve performance based on minimal specifications.

It seems that the A* algorithm is not delivering the performance I was hoping for, so I am trying a new approach. Are there any existing cases, by any chance? If not, I would like to hear your thoughts on this approach.

It’s quite similar to the reason why I insist on developing with vanilla JavaScript. It’s hard to shake off the feeling that many libraries or frameworks stray away from the essence, and that’s one of the reasons. Since these are things I’ve felt through actual experience in the field, I’d like to take a look at it as well. Thanks for the good information!

Oh, so you're developing a bit differently from the current trends. Interesting. As you mentioned, when developing with vanilla JavaScript, it can become difficult to maintain as more features are added or the service grows. However, if you plan carefully, it’s not necessarily a big issue, though many might find it challenging. Do you have any ongoing projects by any chance? Perhaps a project where you're utilizing Vite and Mithril effectively?

Oh, I see. Have you used other frameworks like React or Next.js, Svelt and so on ? If so, do you think Vite has clear advantages compared to those frameworks?

Oh, I briefly looked over Vite but haven't actually used it yet. This is a good opportunity to seriously take a look at it.

Is the final HTML and JavaScript code generated clean and without unnecessary bloat? As always, minimizing the resources that a first-time visitor has to download is one of my main goals as well.

And are you using React and Next.js these days?

Not a single exception? :)

That's right. Web frontend has always been constantly changing. And that's what makes it even more fun. Because of that, I try not to focus too much on new technologies. Of course, new challenges are always meaningful, and over time, if they become well-refined, they might settle in as standards. I'm really glad to have had such a great conversation through this opportunity!

And the map UX isn’t complete yet. I also plan to finish a smooth map UX like Google Maps or the ones you mentioned. I’d appreciate it if you could keep an eye on it a bit longer.

Yes, that's exactly what I wanted to say! In the end, the browser just reads and processes the given HTML, CSS, and JavaScript. And now it feels like the discussion has shifted from whether to use vanilla JavaScript to the graphic rendering issues in my current project. Still, as we continue this conversation, I feel like I'm being reminded of new challenges to tackle. I like it!

P.S. Are you a web front-end specialist?

Since this project is just starting to implement canvas, there might not be any noticeable visual performance improvements yet. I imagine I’ll probably start using WebGL as more animals are added.

Thanks for your kindness! I will see it too.

Oh, I get it now! Currently, when dragging or zooming in and out, the ground, weeds, and rabbits are being redrawn. Of course, for the weeds, the browser is using a cache of about a minute, but due to network latency, this part might be even more noticeable to you. I personally really like Firefox as a browser, but as you mentioned, I'm quite disappointed to see that its rendering performance is relatively poor. I'm also a bit worried about whether it will continue to receive good updates. (A long time ago, I even bought a smartphone that came with Firefox OS. lol)

I'll definitely need to take a proper look at the solutions you mentioned this time. I also remember Konva being very useful in the past. Thank you for the detailed and kind response.

Okay. I think what I said might cause some misunderstandings. As I mentioned in another comment above, it seems to be because I don't like adding builds, compiles, issues, etc. that are not pure JavaScript. I also like TypeScript. It ensures stable development, right? There probably isn't anyone around you developing with vanilla JavaScript, is there?

I totally get what you mean. I'm also someone who finds compiling or building unnecessary when running JavaScript in the browser. It feels like we end up studying and dealing with issues that aren't directly related to actual development.

I really like TypeScript as well. In fact, the back-end of this project is developed with .NET 8.0, and since TypeScript gives off a similar vibe to C#, I genuinely enjoy using it.

I've already made the web front-end open source: https://github.com/Farer/breathingworld_client_web

Even though I’m using Vanilla JavaScript for personal preference and to minimize performance issues, I’ve also been concerned about potential challenges when collaborating with others in the future. I’m currently looking for collaborators, but it hasn’t been easy. Honestly, I might be going against the trend, but that’s a possibility I’m aware of.

Yeah, I know this saying well: "Don't reinvent the wheel." I completely agree with it, too. I mean, I’m not building a browser engine from scratch here, right? lol

But when it comes to web front-end development, I often feel that frameworks and libraries shift too much focus away from actual development, making you worry about things that aren’t really necessary. After all, JavaScript in browsers isn’t compiled like other languages. The main thing that reduces loading times is using cache, right?

Got it. I just want to clarify that I'm not someone who thinks all my ideas are always right, so I hope there’s no misunderstanding. Also, could you provide links to the libraries you mentioned? Of course, I’m always eager to study more about areas I’m not familiar with. This project is primarily focused on performance, after all, so I’d appreciate it if you could share them.

I also agree that optimizing the canvas for GPU usage is something that definitely requires more research. Since I plan to add more plants and animals, it will be crucial moving forward.

Thanks again for your valuable input!

Okay, thanks. I have one question. What exactly do you mean by something disappearing and reappearing when panning? Could you explain the phenomenon in a bit more detail?

Actually, when zooming in or out quickly, there’s a momentary effect where what was previously rendered lingers for a bit. I don't see this as a major issue, considering it aligns with the concept of eventual consistency.

Also, what exactly is the large-scale solution you mentioned? Regarding the movement of the rabbits’ coordinates, it might not appear smooth when zoomed in significantly. This isn't necessarily a performance issue but rather something related to how the animals' coordinates are processed. I plan to improve that part in the future.

Anyway, thanks for your interest. I'll definitely consider your feedback!

Oh, and the source code is already made public, so if it's okay with you, could you take a look at it? If you could point out any parts I might have missed, it would be a huge help.

https://github.com/Farer/breathingworld_client_web

As I mentioned in my previous reply, I've been using nearly every major JavaScript library and framework for almost 20 years. After all that, I ultimately came to the conclusion that Vanilla JavaScript is the best. Especially when it comes to the build processes involved in updating modern web front-end source code, I've found the experience quite unsatisfactory.

On the server side, you can compensate with better server specifications and resources, but with web front-end development, it's essential to ensure compatibility across various browsers while using minimal resources. This is how you can provide the best possible experience to the largest number of people.

Of course, if you want to avoid relying on other solutions, it's true that you need to be very familiar and experienced with Vanilla JavaScript.

I've worked with various frameworks and libraries in the past, like Prototype, jQuery, AngularJS, React, and Next.js, but I think I've ultimately come to trust Vanilla JavaScript the most. Compared to developing with Vanilla, I noticed that using these tools often results in unnecessary code in the final product.

As a side note, I was never really fond of jQuery, even when it first came out, and it ended up becoming almost obsolete. Lately, I'm also not entirely happy with the direction React and Next.js are heading. It could just be because I've grown so accustomed to Vanilla JavaScript.

Ah, the reason you feel it's slow is because the server is located in Seoul, Korea. You're probably not in Korea, which is causing some network latency. If you try adjusting the map to a single spot and wait for a moment without moving it around, you'll notice it runs more smoothly.

I also want to mention that the map size is 245,760 x 138,240, which is exactly 128 times 1920 x 1080. I’ve managed to make that enormous map, along with the data for hundreds of thousands of weeds and countless rabbits, run smoothly without issues. It even works perfectly on mobile phones.

If I get the chance, I'll integrate Kafka and set up servers abroad.

Of course, type safety is great, I understand that. But I want to know the detailed reason why. Why do you think it's so important?

I’m looking for developers interested in collaborating on the development of the web front-end for this project. If you're into real-time systems or dynamic web environments, I’d love to work with you!

You can find the client-side source code here on GitHub: https://github.com/Farer/breathingworld_client_web

Feel free to reach out, share feedback, or ask questions. Let’s build something exciting together!

ok. I will show you a kind of prototype soon! Please wait.

oh really? You are an web developer now ? I will develop this project as web service.

Interesting story. What did you major in ?