Javascript – Why is JSX good, when JSP scriptlets are bad

javascriptjspreactjsreadability

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?

Best Answer

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.

Related Topic