Live data from Hacker News

JSX is no longer my friend

medium.com

101–110 of 144 posts

Re: JSX is no longer my friend

#102
post #72
post #64

Earlier quoted context omitted.

I'll know the answer to your question in a couple weeks. I'm working with web content developers who are very good with HTML and CSS but less familiar with JavaScript. We have a project using Mithril (architecturally like React) where we started out without MSX (exactly like JSX) but they think they're going to prefer MSX syntax so we've begun switching over.

I've worked with designers with limited JS knowledge on a JSX-free react code. There may have been a short learning curve, but it didn't seem to slow them down much at all, even really early on, certainly not after a week (at that point our codebase was coffeescript, so JSX wasn't a great option). It may have helped that we converted an existing code base (so there was a lot of html-as-JS example material to see), an…

That cuts both ways, though, since that easy “copy and paste” turns into “copy and paste and find everything which conflicts”. That's annoying and in some cases even a source of confusing bugs.

Re: JSX is no longer my friend

#103
post #85

Earlier quoted context omitted.

If you omit the {} you can then also omit the return. https://developer.mozilla.org/en/docs/Web/JavaScript/Referen...

True but irrelevant, the GP is talking about the top level function, not the fat arrow one.

Guess I was also in a hurry!

Re: JSX is no longer my friend

#104
post #98

Earlier quoted context omitted.

Or even more beautiful - purescript-thermite. But just as js people are scared of Clojure, Clojure people are scared of Haskell :) (it's a joke)

I've been a Clojure dev full time for a few years, and last year I looked into Haskell quite a bit [1]. But ultimately the fact that Clojure can do live-programming is what really kept me preferring Clojure. And I'm not even talking about that figwheel stuff. I mean just being able to mess around inside the JVM live from an Emacs buffer via Cider, and reloading parts of my code while my app is still running during de…

This is one part of the CLJS story that I think prevented it from becoming more widespread - it lacked a good REPL/compile story for a long time because of closure compiler. I would almost characterize that decision as a premature optimization - they focused on producing small output from the start, IMO larger JS size wouldn't matter that much in majority of use cases (you won't use CLJS to write websites, and webapps can tolerate few hundred k or even a MB of JS that's easy to cache), but they gave up one of the signature strong points for CLJ/Lisp so it wasn't as attractive even to CLJ devs.

Re: JSX is no longer my friend

#105
post #87

So I'm the guy who wrote the post in question. As the view counter started to exceed my expectations I thought there would be a fair amount of negative feedback. I was surprised that there wasn't much. Turns out that it's all here on HN! :P First off, I can't believe all of you actually read that. You have both my sympathy and thanks. Even more thanks for commenting on it. I want to address a few of the points brough…

I started reading with skepticism and you hadn't convinced me by the end that you were any more or less "correct" than my own approach. That being said, I never for a second thought you were wrong and needed correcting either. Your tone never implied to me that the you thought anything similar about the reader either. Your responses in the comments on Medium basically confirmed in my mind that you were just talking to the void about what has worked for you and your team.

1| Don't let anyone bother you about headlines that attract readers and healthy conversation. Despite the romantic notions we may harbor about writing, it is an attention game for most who do it. Good headlines are a part of that game.

Kudos on handling the unexpected attention well :).

Re: JSX is no longer my friend

#106
Honestly, if I thought JSX was too complicated (it lints very well with ESlint, so even if it was problematic, you can just let the tool figure it out for you), all I'd do is use destructuring with the React.DOM built in element factories and call it a day. They're fairly simple to use, and then it really is just javascript.

But I've never seen anyone, not even the most junior, backend-only developer touching React for the first time, have any issues with it for more than 4-5 minutes. ESLint catches any mistake they make.

The only real argument, and it is a valid one, is that Babel does not use shorthands in the output, so it's a trainwreck to read. If that was the primary argument, I could get it. Though then IMO the solution would just be a better Babel plugin for development.

Re: JSX is no longer my friend

#107

Perhaps not the best avenue for this, but I thought I'd take advantage of eyes on this discussion. How might I go about using JSX outside of React or creating something similar? I basically want to turn custom code into JavaScript that instantiates custom classes that have nothing to do with the DOM. I'd like to do this via a babel plugin as well. If you can't tell, I enjoy JSX tremendously and I'd like to use it or…

It's pretty straight forward to use JSX outside of React. If you're using Babel you can simply add

    /** @jsx ExampleDOM */
As the first line in your Javascript source file. This indicates to the transpiler to convert statements of the form

    
        
        
    

into

    ExampleDOM('example', { name: 'Wesley', age: 15 },
        ExampleDOM(Message, { text: 'hello'}),
        ExampleDOM(Message, { text: 'world })
    )
where you implement ExampleDom as

    function ExampleDOM(element_or_component, attributes, ...children) {


    }
Note that because 'example' starts with a lowercase character, it is transpiled into a string first-argument to the ExampleDOM function. If it starts with an Uppercase letter (i.e. 'Message' above) it is interpreted as an in-scope Javascript variable.

We've had really good results using JSX outside of the core react library. For example, we've built a "React.js for Excel" that lets us easily create rich Excel workbooks:

      
        
          
          
        
      
Which looks a lot like React.js and behaves almost exactly the same, but it's targeting the Excel COM Object model rather than the HTML DOM.

Re: JSX is no longer my friend

#108
post #98

Earlier quoted context omitted.

Or even more beautiful - purescript-thermite. But just as js people are scared of Clojure, Clojure people are scared of Haskell :) (it's a joke)

I've been a Clojure dev full time for a few years, and last year I looked into Haskell quite a bit [1]. But ultimately the fact that Clojure can do live-programming is what really kept me preferring Clojure. And I'm not even talking about that figwheel stuff. I mean just being able to mess around inside the JVM live from an Emacs buffer via Cider, and reloading parts of my code while my app is still running during de…

Live coding with ClojureScript/Reagent/Re-frame/Figwheel/REPL is a holy-grail-kind of dev experience for me (and React really does feel like it was ported to JS from a better place), but one has to admit the potential maintainability/refactorability issues when projects grow beyond a certain size (as compared to something like Haskell or PureScript).

Plumatic Schema [1] goes a long way towards narrowing that gap though and I cannot recommend it enough. Whether it goes far enough in terms of safety is certainly a matter of project type/size and personal preference, but to me, for my kind of work so far it does and they'll take away my ClojureScript when they pry it from my cold, dead hands. :)

Also (and slightly off-topic) the combination of clairvoyant + re-frame-tracer [2][3] (+[4] for some minor, so far mostly React Native-relevant additions) should be way more popular than it seems to be. It's definitely one of the most important tools in my toolbox and completely changed the way I approach debugging.

[1]: https://github.com/plumatic/schema [2]: https://clojars.org/day8/re-frame-tracer [3]: https://clojars.org/gnl/re-frame-tracer [4]: https://clojars.org/gnl/clairvoyant

Re: JSX is no longer my friend

#109

Perhaps not the best avenue for this, but I thought I'd take advantage of eyes on this discussion. How might I go about using JSX outside of React or creating something similar? I basically want to turn custom code into JavaScript that instantiates custom classes that have nothing to do with the DOM. I'd like to do this via a babel plugin as well. If you can't tell, I enjoy JSX tremendously and I'd like to use it or…

It's pretty straight forward to use JSX outside of React. If you're using Babel you can simply add /** @jsx ExampleDOM */ As the first line in your Javascript source file. This indicates to the transpiler to convert statements of the form into ExampleDOM('example', { name: 'Wesley', age: 15 }, ExampleDOM(Message, { text: 'hello'}), ExampleDOM(Message, { text: 'world }) ) where you implement ExampleDom as function Exa…

Fantastic. Thank you for the detailed response and examples.
Post reply on HN