msx

Yes, it's definitely worthwhile moving past jQuery, but no you don't have to do everything described in this article. There's a lightweight framework called Mithril that when used with MSX will give you the feel of React, i.e. the state of your app flows in a straightforward way from the state of your objects, rather than from a series of imperative jQuery operations. Just start with this example and customize to what you want to do: https://github.com/insin/msx/blob/master/demo/index.html

That actually already exists: https://github.com/insin/msx

Well, you could fork it: https://github.com/insin/msx

"I'm still yet to be convinced that JSX is a good idea, why break existing tooling and significantly complicate parsers for what appears to only be a minor convenience at the surface level?" Because the template is already so coupled with the view logic that you might as well put them in the same place. And when we've reached that point, it make sense to make the template as legible as possible. Hence JSX. Also, no one is forcing you to have the JSX and views in the same file. You could have them be separate, with a different file prefix (.jsx) for the template and not break any existing tooling. And lastly, https://github.com/insin/msx (Mithril + JSX) is also a thing.

You mean how the DOM is constructed via JS functions? There's this project to fix it: https://github.com/insin/msx

I tweaked React's JSX transformer to output Mithril-compatible code, so you don't have to deal with this sort of syntax: https://github.com/insin/msx Having done DOM building with nested function calls/arrays/objects for years prior to it, I can't go back to the necessary syntax-wrangling after having used JSX.

I did a quick tweak of React's JSX transpiler to output mithril-compatible code [1], as the above was the sort of syntax I was using JSX to get away from! return <html> <body> <input> <button>Add</button> <table> <tbody> <tr> <td><input type="checkbox"/></td> <td>task description</td> </tr> </tbody> </table> </body> </html> [1] https://github.com/insin/msx/

> but nested or complex HTML must get ugly fast That's the problem JSX solves - nesting tags and attributes is less syntactically onerous than managing a tree of function calls or nested object structures, with their attendant braces and commas. Here's the Mithril getting started example [1] done using JSX [2], for comparison (some of the other code has changed since I did this, but the rendering part looks the same) [1] http://lhorie.github.io/mithril/getting-started.html#summary [2] https://github.com/insin/msx/blob/master/test/jsx/example.js...

I put a performance comparison for React on the homepage yesterday (the link takes you to the actual test page so you can run it yourself). It simply measures running js time for initial rendering, which is the ugly, unavoidable cost of frameworks that authors don't like to talk about. The numbers are mostly averages, but should give a reasonable idea of what is faster than what. I also do go more in depth here ( http://lhorie.github.io/mithril/comparison.html ). TL;DR: The main differences is that Mithril is a lightweight MVC, whereas React is a powerhouse at doing only the "V" part. There's actually a project that uses React to enable HTML-y Mithril templates here ( https://github.com/insin/msx ), so the two can certainly coexist. Mithril's light weight is mostly a result of picking a very small set of tools that are simple but useful o