4 ms·

<el-form :model="user" :rules="rules" I would still rather write lintable, composable Javascript (JSX) than an embedded mini string language in HTML attributes

<el-form :model="user" :rules="rules" I would still rather write lintable, composable Javascript (JSX) than an embedded mini string language in HTML attributes. This is a strange post, it's even less information than a Vue 101 post?

warent 9y ago
It is not an embedded mini string language. It is JavaScript and interpreted as such. When an attribute is prefixed with a colon (:), then those quotations are homologous to JSX curlies. Your IDE should be able to syntax highlight and even lint it.
- Kiro 9y ago
  The comment was clearly not about colons alone. I've built a large project in Vue and I absolutely hated the template language compared to JSX. It was Angular 1 all over again.
  - sillysaurus3 9y ago
    FWIW Webstorm somewhat mitigates this. I know it feels sticky to rely on IDE tooling, but it's pretty good in my experience. People have reported some issues with the Vue tooling, but it's worth trying: brew cask install webstorm cd your-app && webstorm .
aaron-lebo 9y ago
Sometimes I get the impression that Vue is the new Angular that everyone is excited about but people will be moving on from in 3 years. It's "my first framework" kind of thing, or maybe it's a well-presented and complete package, which has obvious value. It would be interesting to see an informed comparison. What's Vue doing that a million other frameworks aren't?
- kirillseva 9y ago
  To me vue is like react but with > simpler syntax. I think single-file components is a great thing when you're getting started. While true "js ninjas" will call me out on this, they're probably employed by a large org with problems that are different from mine. > less choice. I only write frontend occasionally. How would I know which react-router to choose? What's the best redux package? What about handling CSS, what's the flavor du jour? Vue says "want something done - do this. here's vue router, vuex, etc." Overall, the two are very much similar in both how they work and what they provide, but one is developed and used by an organization that has a virtually infinite supply of engineers, and the other is being developed by one guy. Technology that makes Facebook successful may be inappropriate for a successful hackathon or a small startup
  - debaserab2 9y ago
    This is simpler syntax than JSX? Vue: <v-chip v-if="manager.department == 'Engineering'" color="primary" text-color="white" small>{{ manager.department }}</v-chip> JSX: if (manager.department == 'Engineering') { return <VChip color="primary" text-color="white" small>{manager.department}</VChip> } I dunno about you but I grok code that uses whitespace, braces, and parenthesis to identify branching logic way faster than tag attributes.
    - inopinatus 9y ago
      Comparison falls down, because a) you can write JSX in Vue components since that's your preference, and this is explicitly documented and supported: https://vuejs.org/v2/guide/render-function.html#JSX https://vuejs.org/v2/guide/render-function.html#JSX, and b) that first example violates the Vue style guide. https://vuejs.org/v2/style-guide/ https://vuejs.org/v2/style-guide/
    - djstein 9y ago
      if we want we can reduce too: return ( manager.department === 'Engineering' && <VChip color="primary" text-color="white" small>{manager.department}</VChip> )
    - 9y ago
chmln 9y ago
You can write TSX/JSX vue components in a similar way to React components. I love vue for its flexibility. https://github.com/vuejs/vue-class-component https://github.com/vuejs/vue-class-component https://github.com/wonderful-panda/vue-tsx-support https://github.com/wonderful-panda/vue-tsx-support
- baddox 9y ago
  I don’t think React is any less flexible. You can use any library or preprocessor that returns or compiles down to React.createElement function calls.
  - chmln 9y ago
    Vue is more flexible primarily via its single-file components and the ability to easily leverage existing HTML/Pug/CSS/SCSS/etc, making it an easier target to migrate to. I've personally preferred React+Redux+Typescript for new personal projects, but when facing a task of modernizing e.g. Angular apps, Vue is much more attractive.
    - debaserab2 9y ago
      > Vue is more flexible primarily via its single-file components In what way is that a demonstration of flexibility? > ability to easily leverage existing HTML/Pug/CSS/SCSS/etc, making it an easier target to migrate to. How is it any easier than React? Seems the exact same to me.
      - chmln 9y ago
        > In what way is that a demonstration of flexibility? By accommodating developers with various preferences. You can have typechecked classes with TSX like React, or self-contained components leveraging traditional HTML/CSS, which is how Angular components are structured. > How is it any easier than React? Seems the exact same to me. There are many similarities between Vue and Angular, especially regarding the DSL in templates. Whereas going from Angular to React is a significant rewrite.

warent 9y ago

It is not an embedded mini string language. It is JavaScript and interpreted as such. When an attribute is prefixed with a colon (:), then those quotations are homologous to JSX curlies. Your IDE should be able to syntax highlight and even lint it.

Kiro 9y ago
The comment was clearly not about colons alone. I've built a large project in Vue and I absolutely hated the template language compared to JSX. It was Angular 1 all over again.
- sillysaurus3 9y ago
  FWIW Webstorm somewhat mitigates this. I know it feels sticky to rely on IDE tooling, but it's pretty good in my experience. People have reported some issues with the Vue tooling, but it's worth trying: brew cask install webstorm cd your-app && webstorm .

aaron-lebo 9y ago

Sometimes I get the impression that Vue is the new Angular that everyone is excited about but people will be moving on from in 3 years. It's "my first framework" kind of thing, or maybe it's a well-presented and complete package, which has obvious value. It would be interesting to see an informed comparison. What's Vue doing that a million other frameworks aren't?

kirillseva 9y ago
To me vue is like react but with > simpler syntax. I think single-file components is a great thing when you're getting started. While true "js ninjas" will call me out on this, they're probably employed by a large org with problems that are different from mine. > less choice. I only write frontend occasionally. How would I know which react-router to choose? What's the best redux package? What about handling CSS, what's the flavor du jour? Vue says "want something done - do this. here's vue router, vuex, etc." Overall, the two are very much similar in both how they work and what they provide, but one is developed and used by an organization that has a virtually infinite supply of engineers, and the other is being developed by one guy. Technology that makes Facebook successful may be inappropriate for a successful hackathon or a small startup
- debaserab2 9y ago
  This is simpler syntax than JSX? Vue: <v-chip v-if="manager.department == 'Engineering'" color="primary" text-color="white" small>{{ manager.department }}</v-chip> JSX: if (manager.department == 'Engineering') { return <VChip color="primary" text-color="white" small>{manager.department}</VChip> } I dunno about you but I grok code that uses whitespace, braces, and parenthesis to identify branching logic way faster than tag attributes.
  - inopinatus 9y ago
    Comparison falls down, because a) you can write JSX in Vue components since that's your preference, and this is explicitly documented and supported: https://vuejs.org/v2/guide/render-function.html#JSX https://vuejs.org/v2/guide/render-function.html#JSX, and b) that first example violates the Vue style guide. https://vuejs.org/v2/style-guide/ https://vuejs.org/v2/style-guide/
  - djstein 9y ago
    if we want we can reduce too: return ( manager.department === 'Engineering' && <VChip color="primary" text-color="white" small>{manager.department}</VChip> )
  - 9y ago

chmln 9y ago

You can write TSX/JSX vue components in a similar way to React components. I love vue for its flexibility. https://github.com/vuejs/vue-class-component https://github.com/vuejs/vue-class-component https://github.com/wonderful-panda/vue-tsx-support https://github.com/wonderful-panda/vue-tsx-support

baddox 9y ago
I don’t think React is any less flexible. You can use any library or preprocessor that returns or compiles down to React.createElement function calls.
- chmln 9y ago
  Vue is more flexible primarily via its single-file components and the ability to easily leverage existing HTML/Pug/CSS/SCSS/etc, making it an easier target to migrate to. I've personally preferred React+Redux+Typescript for new personal projects, but when facing a task of modernizing e.g. Angular apps, Vue is much more attractive.
  - debaserab2 9y ago
    > Vue is more flexible primarily via its single-file components In what way is that a demonstration of flexibility? > ability to easily leverage existing HTML/Pug/CSS/SCSS/etc, making it an easier target to migrate to. How is it any easier than React? Seems the exact same to me.
    - chmln 9y ago
      > In what way is that a demonstration of flexibility? By accommodating developers with various preferences. You can have typechecked classes with TSX like React, or self-contained components leveraging traditional HTML/CSS, which is how Angular components are structured. > How is it any easier than React? Seems the exact same to me. There are many similarities between Vue and Angular, especially regarding the DSL in templates. Whereas going from Angular to React is a significant rewrite.