The use of comments alongside the HTML was the result of a very long (and honestly very public) discussion, ultimately, it boils down to those reasons:

- Comments exist to define a block boundary.

- JSON inside a comment exists to load up user preferences for things that can't be easily parsed from the HTML.

- HTML has to be the final result and representations, and it has to be the source of truth.

- The outcome has to be portable to any other platform or system, you can't move the website tomorrow and get a bunch `[xyz_shortcode]`.

I encourage you to read this post by one of the senior engineers who worked on the project since its inception:

https://lamda.blog/2018/04/22/the-language-of-gutenberg/

The documentation is in itself very expansive and throughout, you should give it a read:

https://developer.wordpress.org/block-editor/explanations/ar...

Gutenberg in itself is a very versatile tool and isn't locked to WordPress btw, you can build your own editor if you want (all JS, no PHP):

https://wordpress.org/gutenberg-framework/