munificent / ui-as-code

Design work on improving Dart's syntax for UI code
BSD 3-Clause "New" or "Revised" License
121 stars 11 forks source link

Comments on JSX.md #4

Open yjbanov opened 6 years ago

yjbanov commented 6 years ago

Great document overall! Here's a couple of comments:

Closing tags make it easier to read a long list of end delimiters.

I think this only matters when reading code with the intention to edit it, not when simply reading it. When reading code without any intention to edit it, you generally assume that all braces are properly closed, and so you skip them. However, it is true that when editing code, a closing tag can help find the block of code you want to move or delete, provided it is unique enough (</div></div></div> doesn't help much). There are editing disadvantages too, however. For example, I want to change Theme to AnimatedTheme, I have to edit in two places.

Syntax is familiar to people who know HTML or XML.

I'd like to disagree on this point. I think familiarity plays a minor role here. Web developers are quite familiar with JS syntax too, as well as CSS. I think the biggest reason JSX syntax works on the Web is because it maps directly to HTML. Consider this JSX snippet <h1>{greet(user)}</h1>. You run the app, open Chrome Dev tools and you see exactly that: <h1>Hi, Bob!</h1>. That's also the language your server-rendered pages speak. You'd have to do mental translation if you changed that to h1(greet(user));.