5 ms·

After using React, I am firmly in the #nevertemplates camp. I don't ever want to learn a template DSL again when I could be using the full power of javascript.

• Yaggo 10y ago
  So what is JSX if not DSL? (Yeah, you can use React without JSX, but still.)
  • kentor 10y ago
    You can think of it as sugar for `React.createElement()`, and some other stuff (like spread) but that's it. It's really easy to translate into javascript in your head. Why is this good? 1. Let's say I want to stick a debugger in my template or render function. How would you do it in Vue? Angular? I don't know, gotta look it up, not even sure if possible. How would you do it in React? I don't have to look anything up, I just have to think (use an iife): <div> <SomeComponent debug={(() => { this.state; debugger; })()} someProp="prop" /> </div> 2. Let's say I want to use Immutable.JS instead of plain js arrays. How would I iterate over an immutable list in Vue. In Angular? I don't know, probably have to download some third party directive. React: <ul> {immutable.toSeq().map(x => <li>x</li>)} </ul>
    • swsieber 10y ago
      You can totally use JSX with Vue.
    • nailer 10y ago
      I use ractive, which uses a virtual DOM and simple mustache templates. I'd use a ractive expression to do the debugging. People seem to think using a familiar templating language excludes using the full power of JavaScript. It doesn't.
    • deleted 10y ago
      [deleted]
    • randomnumber314 10y ago
      >How would you do it in Vue? {{ data | json }} will give you formatted json output of the data object (i.e. state/props) In reality you can put anything that's in the Vue object's scope between curly braces, pipe it through the json filter. >immutable list in Vue <li class="for-example" v-repeat="item in list">{{item}}</li>
      • masklinn 10y ago
        > {{ data | json }} So neither debugger support nor printf-debugging, you just have to hope you'll be dumping garbage in a place where it can be seen and doesn't break the page entirely? > <li class="for-example" v-repeat="item in list">{{item}}</li> Ignoring that vue changed the name of the directive a while ago[0] that doesn't even remotely work, according to its documentation v-for (née v-repeat) works on native arrays, it's not going to work in any sensible manner on immutable.js structures. [0] https://github.com/vuejs/vue/issues/1200 https://github.com/vuejs/vue/issues/1200
  • rakoo 10y ago
    JSX is a DSL for creating HTML, a "language" that has very little custom logic. Vue.js and Angular.js are DSL for creating custom logic, which will always pale in comparison of an actual language designed for custom logic like javascript
  • walterstucco 10y ago
    It's markup mixed with code. a DSL is a different thing
  • brlewis 10y ago
    Technically it's a DSL, but the experience of learning and remembering it is not the same as your typical DSL because there's so little JSX-specific syntax.
  • ufo 10y ago
    The nice thing about JSX is that it is an embedded DSL. When you use JSX you can take advantage of all of Javascript: variables, loops, conditionals, subroutines, closures, etc. The bad thing about most other template DSLs is that they recreate all of these features from scratch, often in buggy ways. For example, many template DSLs have dynamically scoped variables instead of lexically scoped ones.
  • seangrogg 10y ago
    It's a sugar over React.createElement which is just a souped up document.createElement. JSX: <div className="classy" onClick={this.handleClick} /> No JSX: React.createElement('div', { className: 'classy', onClick: this.handleClick, }); Native (note this naive implementation lacks proper scoping): var el = document.createElement('div'); el.className = 'classy'; el.onclick = handleClick; This has been available on all major browsers for quite some time, React just provides some convenience around it and a sugar for those that prefer code that looks like HTML because people tend to (fairly, imo) associate their HTML with the state of the DOM.
• ggregoire 10y ago
  Same here. In my opinion JSX is one of the best thing happened in the front-end world. Let's not forget how horrible Angular templating was: <ul ng-if="::vm.items.length"> <li ng-class="::{ 'active': item.active }" ng-repeat="item in ::vm.items | orderBy: 'id' as ordered track by item.id" ng-click="item.active = !item.active"> {{::item.name}} </li> </ul> <select ng-options="item.subItem as item.label for item in ::vm.items2 track by item.id" ng-model="selected"></select> <div ng-include="selected.template.url" />
  • syaz1 10y ago
    Wow, that looks really messy for what is essentially printing items in collection...
    • nkozyra 10y ago
      I believe that will always be the case when you have to embed logic into a relatively rigid markup language. Syntactically, JSX feels more native, but both are addressing the same problem.
  • vladimir-y 10y ago
    JSX is just a way to render data, so think like it's a templater, you can integrate it with any tool. React istelf is also just an advanced templater actually, it has no built-in data reactivity despite the name. In my opinion React is not needed in general and JSX is a back to the old fashion PHP coding (Facebook returns to its roots).
    • iotscale 10y ago
      React is not a templater, it's a differ. The only similarity between PHP and React is that you can have tags in ("around" in PHP's case) your code. Edit: After reading my comment again, I feel I must mention; even that similarity is not coming from React directly. It's JSX. Although they go like fish & chips together (Not a great analogy but I guess I'm hungry).
• EvanYou 10y ago
  Just so you know Vue 2.0 supports both templates AND JSX (or hand-written render functions): https://github.com/vuejs/babel-plugin-transform-vue-jsx https://github.com/vuejs/babel-plugin-transform-vue-jsx
  • mvindahl 10y ago
    Haven't tried Vue yet but I like the idea of having a choice. It would seem to me that for most cases one would simply a template since it gets you there easily and without any boilerplate. For the cases where one does need the full power of Javascript, JSX is the solution. I'd imagine that most components would initially be written as templates, and some would be refactored into JSX along the way, which is probably not much of a pain. Really want to play with it ...
• walterstucco 10y ago
  Jsx is horrible is mixing markup and code all over again A DSL like Elm does is much better
  • the_duke 10y ago
    Elm doesn't have a DSL, you just call functions to create dom elements. It's really much like JSX, but without the syntactic sugar of using HTML-like markup.
  • treehau5 10y ago
    JSX is simply unobtrusive javascript realized at it's logical conclusion. I don't understand why people complain about it so much. https://medium.com/@housecor/react-s-jsx-the-other-side-of-the-coin-2ace7ab62b98 https://medium.com/@housecor/react-s-jsx-the-other-side-of-t...
  • aarpmcgee 10y ago
    jsx compiles to plain old function calls, which is how you write your templates in elm as well. there's very little difference besides developer ergonomics.