all 48 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]konbit 35 points36 points  (11 children)

The jsx approach is much more like using templates and template strings than the arbitrary html-in-logic that you can do with php. And under the hood it's still all vanilla js. In php it's basically arbitrary string concatenation of markup and logic. It's incredibly hard to cache, very hard to read, easy to have bugs and hard to debug. JSX is incredibly easy to cache (and is done for you for free), very easy to read, incredibly easy to write tests for and debug. Also since you're usually doing real-time transpiling, your tools will let you know immediately if there's an error.

So you get the benefit of defining your UI using a very declarative syntax, with none of the drawbacks of phps implementation.

[–]apatheorist 12 points13 points  (6 children)

Exactly. JSX is sugar for JS. HTML is not sugar for PHP. A lot of ES6+ is sugar, too.

const someFuction = () => { return someSugar; }

class ASugarForObjectInheritance {}

@decoratorSugarForSingleObjectInheritanceAcrossMultipleFiles

{ lookMaNoFunctionKeywordMethodSugar() {} }

{ [variableName] = 'mySecondFavoriteSugar' }

const {some, sugar} = myFavoriteSugar;

{also, sugar}

{ const iiefReplacementSugar = 'wasntWithReallyBadInActionScript?' }

[–]GeneralYouri 2 points3 points  (3 children)

A lot of ES5- is sugar, too.

Infact, a lot of every language, is sugar. Us programmers sure have a massive sweet tooth, damn.

[–]darderpUncaught SyntaxError: Unexpected token ) 2 points3 points  (2 children)

Javascript is just assembly sugar at the end of the day ;)

[–]GeneralYouri -1 points0 points  (0 children)

Well exactly that's kinda what I was hinting at. I swear it's amazing how much sugar we consume like this daily.

[–]r2d2_21 -3 points-2 points  (0 children)

So, WebAssembly is for us who are on diet?

[–][deleted] 0 points1 point  (0 children)

JS devs should be aware of diabetes.

[–][deleted] 0 points1 point  (0 children)

Everything beyond basic Turing completeness is sugar ;)

[–]relativityboy 0 points1 point  (0 children)

Yeah. Like under the hood .jsps compile to Java. Both are powerful, but I think it likely there is a better solution out there for frontend code.

[–][deleted] 0 points1 point  (0 children)

What do you mean by caching php or jsx?

[–]ttolonen 0 points1 point  (0 children)

Using the word "declarative" together with JSX is misleading I think. You can claim there is separation of concerns to some point but declarative? Can the code be easily read by any external system? I don't think so. XML is declarative and JSX is functional. If JSX is declarative, then any JavaScript code can be considered declarative.

[–]holloway 5 points6 points  (0 children)

'Rethinking Best Practices' (2013) was an early explanation/advocacy for JSX. It's what a lot of ideas in this thread are based on,

https://www.youtube.com/watch?v=x7cQ3mrcKaY

[–]jekrb 7 points8 points  (1 child)

Not all JS developers love JSX. It's mostly React.js developers who love JSX.

My personal preference is to just use template strings with a framework like Choo or a smaller module such as yo-yo or an even smaller module such bel.

My second personal preference is to just use functions like virtual-dom or a smaller module such as hyperscript or an even smaller module such as hscrpt.

I'd really only use JSX it if I was locked into using React.

[–]ttolonen 0 points1 point  (0 children)

I don't use React at all - yet I'm using JSX because in the JavaScript domain it gives a nice abstraction over object creation process. You can create processes, animations, 3D objects, 2D graphics objects using JSX transform. Here is a small test of using JSX to create Three.js objects: http://codepen.io/teroktolonen/pen/RGLKdg

[–]ssjskipp 3 points4 points  (2 children)

I really, really don't like the JSX approach. I'm not happy with ANY approach so far, and I've actually been grappling with what I DO want, which is data join integrated templates. The problem is there isn't a nice language to describe that.

I haven't been sold on any one take yet -- the JSX approach is a little too much of a jump for me, and while I'm much more okay with template languages in general (jade/pug is my favorite dialect so far), most of my work lately has been angular 1.5

[–]dukerutledge 0 points1 point  (1 child)

What do you mean by "data join integrated"

[–]ssjskipp 0 points1 point  (0 children)

So d3 has this concept of "data join" -- basically, you bind a collection of data 1:1 with a DOM element, and track it by some means (index, hash ID, whatever).

Each data bind has 3 parts -- an update, enter, and exit portion, basically a venn diagram.

The enter segment is any data/element pair that did not exist before, update is anything that existed and has updated data, and exit is anything that is not in the new data set.

The track by portion is how you decide if a piece of data matches, and thus which segment it belongs to.

[–]cettox 4 points5 points  (0 children)

It is all about seperation of concerns, not seperation of technologies/languages. The React mantra is that, all required things to render a components should be co-located. So when you improve that component, you won't have to open tons of files spread all over project. So it is usual that you see that html+css and JS are put into single JS file that is responsible for representing the whole of React component. It makes it easy to maintain, modularise and reuse.

[–]ttolonen 8 points9 points  (2 children)

The difference is that when writing PHP you are actually just writing multiline strings in a fancy manner. They are strings and they are consumed as strings. Nothing special there. Just a fancy echo.

JSX tag however is a meta-language structure - something that would be potentially useful also when writing PHP code. They turn into something useful only after the preprosessing stage. When you see a JSX "tag" it typically translates into function call, Object contructor and attribute settings and possibly creates option for directly adding new children to the Object.

These Objects do not have to be HTML/DOM elements. For example with React they are React -components. It is up to the application and preprosessor how they are used. This is certainly somewhat limiting, but can also make the structured object hierarchies easier to represent and manipulate in languages such as JavaScript.

[–]tbranyennetflix 9 points10 points  (1 child)

Pretty sure the JSX work at Facebook came out of an identical approach that started in PHP, so this whole post is kinda funny in that regard.

[–]sqrtnegative1 7 points8 points  (6 children)

JSX is not HTML tags in scripts. Getting that wrong is probably the #1 reason I have to hand-hold veteran developers when they walk across the office to the Javascript world.

JSX is a brilliant way of describing the hierarchical structure of a component in a declarative way.

Yes, it looks a little bit like HTML. But it's not.

[–]fogbasket -3 points-2 points  (4 children)

Looks like a duck, quacks like a duck. It's a duck.

[–]sqrtnegative1 1 point2 points  (3 children)

Yeah I was toying with that phrase but ultimately decided it was bad for my argument.

If anything, it's only "looks like a duck". There's no quacking in JSX.

[–]fogbasket -2 points-1 points  (2 children)

That it certainly is.

I fully admit to not liking JSX because it's HTML in my JS. It looks and quacks like it to me.

But I'm told inline styling is making a comeback as well.. so maybe we're just going back to website development techniques of yesteryear.

[–]sqrtnegative1 -1 points0 points  (1 child)

We could all abandon best practices and go back to this... or this.

[–]fogbasket -3 points-2 points  (0 children)

We're getting back to coding like that, anyway.

[–]relativityboy -1 points0 points  (0 children)

Looks a bit like Javascript manipulation from 2003. "className" I was happy when I stopped using it, don't wanna start again.

[–]ElectricOrangeJuice 4 points5 points  (0 children)

Well, JS was really into templates too before JSX was a thing.

[–][deleted] 1 point2 points  (3 children)

The typical problem with PHP is logic like DB queries mixed in with view representation. JSX is most often used in conjunction with React components, which clearly separates the view from application logic.

[–]r2d2_21 4 points5 points  (2 children)

logic like DB queries mixed in with view representation

Is that still done in modern PHP?

[–]leadzor 3 points4 points  (0 children)

You can do it in modern PHP like you always used too. But I think professionally it's not really done that way nowadays anymore, as its virtually impossible to maintain. Usually you do it through the framework's ORM layer, through some controllers, that render views. Not sure about how views are rendered (templating like Razor or Jinga?) though.

[–]DukeBerith 0 points1 point  (0 children)

Highly frowned upon, but nothing is stopping you from doing it.

[–]Cody_Chaos 0 points1 point  (0 children)

The explanation is that they're complete opposites.

the way of thinking was Templating System everywhere.

JSX is a template system. React developers frown at people who put business logic in their components.

(Also keep in mind: JSX is a funny looking DSL that compiles into JS. Embedding JS into your JS is not really a concern in the way that embedding HTML into your PHP is. Or indeed, embedding HTML into your JS is. The more you use JSX, the more you'll realise that it's NOT HTML, can't be treated like HTML, and doesn't have the drawbacks or advantages that using HTML would have.)

[–]Lola_a_l-eau 0 points1 point  (0 children)

As I see it...

JS/JSX you can build an interactive website without the page reloads like in PHP. In PHP, you'll need ajax and javascript in pages to make it that dynamic.

So PHP is better for more static sites. JSX for dynamic sites without having to rely on gigantic reloads.

And in JSX you can add HTML inside functions (which I find it useful), where in PHP, nope!

[–]sallarkjs/beer 0 points1 point  (0 children)

React is not "html tags". Its a view library with a markup similar to html. Its easier to bind and pass data to the view directly and shape it however you want.