In all seriousness I typically work with a lot of designers; asking them to update markup in JSX versus HTML is simply not possible. It's not because they can't figure it out but it makes it more difficult for them to quickly test and they typically break JavaScript in many, unexpected ways. While I'm fine with the UI and business logic separation where UI can contain markup _and_ scripting, I don't think the answer is this awkward solution of shoving HTML into the scripting.
This is what worries me. We are using Angular, and my non-technical co-founder knows just enough HTML and CSS that she makes a very useful contribution to our front-end development. Sometimes the contribution is in the form of HTML mockups produced outside of our app that are easy for me to port over, and sometimes it's direct contributions to the codebase. I worry that if I went the React JSX route that it would be much harder for her, or pure designers that we might hire, to meaningfully pitch in.
My understanding was that forgoing JSX would make the situation worse by falling back to imperatively manipulating the (virtual) DOM within your component. If there is a way to have an external, declarative HTML document using React I would be very interested.
This is why I've implemented a prototyping framework at Catalyze that's built with Angular, the same framework we use on the production front-end.
The flow typically looks like this:
1. Create conceptual wireframes
2. Build static UI components (typically in sketch)
- This step helps us define the look and feel of the product before jumping into code. However these are not full page mockups. It's more like an internal UI kit, and for the most part, it's fairly standard across products. So we don't have to update it often.
3. Build the styleguide from the UI kit in Sass (within the framework)
- Again, this is fairly standard so it's mostly templatized. We have an internal UI styleguide that's built already. So most of the changes per product are minimal (they're mostly small tweaks to give each product more character).
4. Build the prototype (within the framework)
- Since we use a template for each new prototype things like routing and more complex Angular concepts are already set up. Because of this designers aren't forced to approach the steep part of the hockey stick. They can stick to the view layer.
In all seriousness I typically work with a lot of designers; asking them to update markup in JSX versus HTML is simply not possible. It's not because they can't figure it out but it makes it more difficult for them to quickly test and they typically break JavaScript in many, unexpected ways. While I'm fine with the UI and business logic separation where UI can contain markup _and_ scripting, I don't think the answer is this awkward solution of shoving HTML into the scripting.