20

React.js provides JSX as an XHTML-like syntax for constructing a tree of components and elements. JSX compiles to Javascript, and instead of providing loops or conditionals in JSX proper, you use Javascript directly:

<ul>
  {list.map((item) =>
    <li>{item}</li>
  )}
</ul>

What I haven't been able to explain yet is, why is this considered good if analogous constructs are considered bad in JSP?

Something like this in JSP

<ul>
   <% for (item in list) { %>
     <li>${item}</li>
   <% } %>
</ul>

is considered a readability problem to be solved with tags like <c:forEach>. The reasoning behind JSTL tags also seem like they could apply to JSX:

  • it's a little easier to read when you aren't toggling between XHTML-like syntax (angle brackets, nesting) and Java/Javascript (curlies, commas, parens)
  • when you have the full language and platform available for use inside the rendering function, there's less to discourage you from putting logic in that doesn't belong there.

The only reasons I can think of why JSX is different is:

  • in Java, you had an incentive to do the wrong thing - JSP would be hot-reloaded, so it was tempting to put code in JSPs to avoid a rebuild/restart cycle. Maintainability was sacrificed for immediate productivity. Banishing scriptlets and limiting to a fixed set of template constructs was effectively a way of enforcing maintainability. No such distortion exists in the JS world.

  • JSP and Java syntax is clunky with the extra <% ... %> to distinguish Java code from element generation, and with Java's native syntax lacking a foreach concept or first-class functions (until recently). The syntax penalty of using native Javascript for loops and conditionals in JSX is non-zero (in my opinion) but not as bad as JSP, and arguably not bad enough to warrant introducing JSX-specific elements for loops and conditionals.

Is there something else I'm missing?

  • 1
    I don't think it's bad to have loops in your JSP per se, the problem is with embedding code in scriptlet tags. If you banish these and use JSTL then you will be forced to simplify your JSPs. Also, as you point out, an added bonus is that the JSTL syntax is a little less jarring than the scriptlet syntax. While I'm not familiar with JSX, my guess is that you could probably abuse the JSX fragments with lots of convoluted logic which would not be recommended but which it won't prevent. – PhilDin Jul 13 '16 at 16:04
11

Primarily, the people who created JSX disagreed with the people who disliked JSP. See their discussion here: Why did we build React? as well as Displaying Data

Templates is based on the idea of creating a division between the logic and presentation of a page. On this theory your javascript (or java) code shouldn't be concerned with what markup gets displayed, and your markup shouldn't be concerned with any of the logic involved. This division is essentially why people criticize the various template languages that readily allowed mixing code in with your template (PHP/JSP/ASP).

React is based on components. The authors of react argue that the logic and presentation of a component are tightly connected, and attempting to divide them doesn't make any sense. Instead, a page should be broken by logical pieces. So you might break out the header bar, comments, post, related questions, etc into seperate components. But it doesn't make sense to try and divide the logic for the related questions from the presentation.

The primary difference between something like JSX and something like JSP is that JSP is a template language that includes a bit of java for the logic. JSX is javascript with a syntax extension to make it easy to construct fragments of html. The emphasis is different. Since JSX embraces this approach, it ends up producing a nicer, cleaner approach then done by JSP or friends.

But ultimately, it comes down to the fact that the people who made react didn't like templates. They think they are a bad idea, and that you should put your markup and presentation logic in the same place.

  • I'm not complaining about encapsulating the render function in the same place as other component logic. I'm strictly concerned with the readability of mixing element generation with other kinds of code. – wrschneider Jul 13 '16 at 15:16
  • @wrschneider, how is a react render function different in the types of code being mixed then your typical template language? – Winston Ewert Jul 13 '16 at 15:50
3

As an outsider to React, I viewed JSX as being yet another "framework smell" in the very crowded zoo of framework stinks. I'm still not convinced that this isn't the case.

I think a workable definition of "useful" is that a library/framework/pattern solves more problems than it causes.I'm not yet convinced that JSX fits that definition. It's the proverbial "squeezing the balloon"...you squish a problem here, it pops out over there. To me, JSX isn't solving any particular problem...it's only just "different."

The notion of introducing a compilable semantics that needs a formalized build process is useful in some circumstances: for example, LESS compilation of .css files provides some very-much-needed structure around css, which is a hierarchal structure with imports and overrides, thus being very prone to "spaghetti solutions." But Javascript pre-compilers...not so much.

  • "A workable definition of useful is ..." that is great point. And yes JSX solves more problems then we think. React view component is more simple and expressive with JSX . it can be unit testable with shallow rendering. If you say smell JSP has may smells and it is has more chance of errors. And I'm not agnest jsp. – Sagar May 22 '17 at 14:34
  • Sorry, but I don't see how this answers the question. – sleske Dec 15 '17 at 12:07
  • Sleske, literary criticism devotees would call it an "inside reading" of the question. The question on the surface asks for a comparison, but on the inside it's asking about frameworks. My answer addresses the concept of "frameworks solving more problems than they cause." The OP could then take my comment, apply that credo to his particular, unique situation, and decide if JSX is a help or a hindrance. One could say that your statement begs the question whether there's a deficiency in the answer or a deficiency in your understanding, as either problem could cause your exact result – dwoz Dec 16 '17 at 18:22
1

In short:

  • Front-end developers are expected to know scripting and templating
  • JSX and JSP are both templating languages
  • JavaScript is a scripting language
  • Java is not a scripting language

References

0

While I don't use JSX, based on your description, the job of the JSX fragment is to present the data, that is, it's a view component in the MVC parlance. The JSX fragment presumably doesn't know or care where the data came from which is what you want.

A well structured JSP page will just contain JSTL directives like you mention. JSTL directives just simplify your JSPs so they're not cluttered with fetching from scope, checking for null etc. It's surprising how much clutter this removes and it also encourages you to keep it decluttered.

Just like the JSX fragment; the only job of the JSP should be to figure out how to present the data it has received without worrying about where it came from.

In summary, whether your view is JSX or JSP, if you're doing it properly then your view will just present data.

As to why you might shift the presentation to the client instead of doing it on the server, this gives you more flexibilty. Your web site can get its data via web services (ReST for example) and be just another client. If you later decide that you want a native Android or iOS app, they can consume the same set of web services as your web site.

  • Note that JSX can be used client-side or server-side. The fancy way to use JSX is to render the initial controls on the server and then perform DOM updates (in response to service calls) client-side. Anyhow, you are correct that React is the view layer (quoting Facebook: "Lots of people use React as the V in MVC"). – Brian Nov 18 '15 at 19:13
  • The specific question is why React/JSX considers it a good thing to use native Javascript syntax for loops/conditionals while JSP eliminated native Java syntax (scriptlets). – wrschneider Nov 18 '15 at 20:08
  • Sorry, I missed that point. I started to compose an answer but then realised it was simply a case of "your guess is as good as mine". A nice presentation layer syntax for JSX might be useful, I can only surmise that this was important to the Java designers and not to the JSX designers. – PhilDin Nov 19 '15 at 21:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.