7 ms·
This is a neat syntax, but it doesn’t seem at all typesafe (typesafety was the main benefit of JSX over the various string templates that came before it).
by bcherny 8y ago
This is a neat syntax, but it doesn’t seem at all typesafe (typesafety was the main benefit of JSX over the various string templates that came before it).
- ricardobeat 8y ago> typesafety was the main benefit of JSX Do you have a source for that?
- pspeter3 8y agoI don't know if there is a primary source but it is one of the main benefits for me.
- bcherny 8y agoMy opinion, not a fact. Before JSX came out, there were tons of templating systems that let you embed HTMLish things in JS: Handlebars, Mustache, EJS, Pug, Angular templates. JSX’s big innovation was taking the way XHP promoted HTML to first class syntax and applying it to JS. The big difference between that and the template systems that came before it is JSX is statically analyzable (by your type checker, or by other tools), which means you can scale it to FB scale.
- ricardobeat 8y agoWhat I was thinking is that you're backdating your impressions. JSX came out in 2013, when TypeScript was at it's infancy, and also predates flow; support for JSX in the TS compiler was only added in late 2015. You're right that when it came out it's main innovation was separation of concerns and composability, but types or static analysis were not part of the value proposition at the time.
- bcherny 8y agoYou know, I think that’s a really fair way to look at it. I would be surprised, though, if down the line type safety wasn’t a design goal. It did come from the same company that built XHP around 2010, and the same dude that built the first React prototypes in OCaml. I can ask around after the holidays and see if anyone remembers :)
- spion 8y agoWhat kind of source do you have in mind? The arguments types that are valid will vary based on the content of the template string, and no type system (well a dependently typed language such as Idris could do it) for JS (flow, typescript) supports that. On the other hand, both TypeScript and Flow support type checking for JSX attributes (and child elements to some extent)
- wild_preference 8y agoWhy would you need an external source for a personal opinion?
- spankalee 8y agoJSX is only type-checked because someone wrote a type-checker for it. It's completely possible to write a type-checker for HTML templates like lit-html. In TypeScript we even have access to third-party extensible interfaces for all the elements with the HTMLElementTagNameMap, so we can check buildings to properties. We'll be working on a lit-html type-checker for TypeScript early next year.
- dmitriid 8y agoWell, you can skip JSX, and write functions only, and you'll have full support. https://reactjs.org/docs/react-without-jsx.html https://reactjs.org/docs/react-without-jsx.html It's functions all the way down, after all. How do you write a type checker for something that is a string (HTM, lit-html)?
- deleted 8y ago[deleted]
- spankalee 8y agoYou parse the string literal, just like you parse the string that is the contents of a JavaScript file.
- dmitriid 8y agoYeah, I'll let Javascript engines parse and convert my Javascript to bytecode for me. It's definitely not the same as manually parsing strings at runtime. And equating the two is disingenuous at best
- spankalee 8y agoType-checking happens at compile time, and even the JS is parsed by a user-land library and not the JS engine. At runtime these templates are parsed by the browser's built-in HTML parser.
- 8y ago