In my opinion JSX is usable, and gets the job done. I have used it, and enjoyed it. However, my personal preference to write html is one that I think looks beau

In my opinion JSX is usable, and gets the job done. I have used it, and enjoyed it. However, my personal preference to write html is one that I think looks beautiful in comparison to template engines. Nicely enhanced by syntax highlighting, and perfectly pure in its structure. And with the most known syntax. It is the most simple and productive. It is: writing html in html itself. (I am describing my personal favorite, not saying that it should be the right way for everyone). I prefer frameworks that let me structure the html views of my projects, using declarative html. In the same line, breaking things into components is best achieved, in my opinion, using web components. The syntax is a little muddy, due to all the html legacy cruft. But I find it better than the alternatives, for example react components. With web components, the great thing is that any styles and javascript functionality is scoped to the component. That allows for better separation of concerns in separated components. This is specially useful when you have components with functional styles: animations, transitions, etc. After componetization is solved by web components, the problems with html in html boils down to mostly two things: generating multiple elements from some data, or setting data in elements based on some other data. For these things I prefer the syntax style of data binding and "repeaters". My favorite is polymer(https://www.polymer-project.org/1.0/ https://www.polymer-project.org/1.0/). Example: <el-container id="listbox"> <el-list-items itemsdata="{{model.itemlist}}"></el-list-items> </el-container> And the concern of repeating multiple elements is trapped in a component. In the example above, in <el-list-items>. In general, when using this technique, data binding must not be abused, or the view becomes a mess.