5 ms·

At my last job we did a comparison between Vue and React before rewriting a major frontend application. We did a POC in both React/Vue and ended up using Vue m

by gt5050 9y ago

At my last job we did a comparison between Vue and React before rewriting a major frontend application. We did a POC in both React/Vue and ended up using Vue mainly due to the following reasons: Single File Components Single file components (.vue files) is the best thing about Vue. I understand this might be a personal preference, but we wanted to avoid CSS-IN-JS. Our designer could churn out neat html/css, but was a beginner in Javascript. With Vue's single file components, he could also hack parallely with us while iterating on html/css. Standard / Official way of doing things This again is a personal preference but Vuejs comes with a recommended way to do a majority of things. Vuex(state management) and Vue-Router are provided/maintained by same Vue core team. React at times can be overwhelming for beginnners, just because of the amount of choice available Example: Google Search for 'React CSS style' [https://www.google.co.in/search?q=react+css+style https://www.google.co.in/search?q=react+css+style] points to a bunch of links all of which link to valid solutions, but I have to go through a few of them before I get what I am looking for. Similar search for 'Vue CSS style' [https://www.google.co.in/search?q=vue+css+style https://www.google.co.in/search?q=vue+css+style] all top links lead to official documenation on vuejs.org. Excellent documentation Also, as a team we were primarily writing Angular 1 when we decided to choose a frontend framework for newer projects. I feel this also made our transition to Vue easier vis a vis React

giantsloth 9y ago
I agree that single file components are awesome. I wish you had been introduced to styled components in react: import styled from 'styled-components' const Container = styled.div` padding: 10px; background: ${ ({ isHovered }) => isHovered ? 'green' : 'red' }; ` const H1 = styled.h1` font-size: 15px; ` const P = styled.p` font-size: 10px; ` const MyComponent = ({ isHovered }) => { return ( <Container isHovered={isHovered} > <H1> Hello <H1> <P> This is a thing </P> </Container> ) }
- untog 9y ago
  That really doesn't work well with: > Our designer could churn out neat html/css, but was a beginner in Javascript. I write JS every day, and frankly that code looks like an unholy mess to me, so I can't imagine what it looks like to a beginner. Is "styled.div``" a function call? It's not self-evident. How do you do inheritance? Is that a template string with functions inside it? Would that CSS autocomplete? That code looks very much like it sacrifices ease of writing CSS for ease of writing JSX. That isn't the correct tradeoff for everyone.
  - giantsloth 9y ago
    Interesting critique. I would highly suggest checking out template literals: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... Yeah styled.div is a function as you can check out in the mdn docs I linked, it's really cool stuff. Inheritance is done like: const List = styled.ul` li { padding: 10px; } ` const HeavyPaddedList = styled(List)` li { padding: 20px; } ` If you wanted to just change the li you'd have to: const ListItem = styled.li` padding: 10px; ` const HeavilyPaddedListItem = styled(ListItem)` padding: 20px; ` You're writing scss within the text blocks. You're correct that you need some understanding of JS. I've never worked with designers that wrote css, I'd also probably not trust them to do so (my own failings). I don't agree that it looks like an unholy mess (hyperbole may be lost on me), but I can see how it could be jarring at first look. I had a similar reaction when I looked at Relay (https://facebook.github.io/relay/ https://facebook.github.io/relay/), when they used literals for data fetching.
    - untog 9y ago
      > You're writing scss within the text blocks. So, yeah, you lose all the syntax highlighting etc. that comes with just writing normal CSS. I don't think it's unreasonable for a designer to object to that - how would you feel if you were presented with a build system that required you to write all your JavaScript inside one big string statement? Maybe it's just me, but I don't find it intuitive at all. `styled` has properties for, I assume, every HTML tag? But it can also be called as a function for inheritance purposes? And that inherited call appears to use the same tag as its parent... but what if I want to reuse styles across different tags? How could I define some shared CSS properties I'd use across different elements? Don't get me wrong, it is cool stuff. But it also feels far too much like hand-wavey magic stuff. I've literally never used Vue before, but looking at this page: https://vuejs.org/v2/guide/single-file-components.html https://vuejs.org/v2/guide/single-file-components.html I have zero confusion about how to write styles for it. And I really don't understand why styled-components would be worth the extra effort by comparison. What does it bring to the table? It's different without a compelling reason for being different.
- sametmax 9y ago
  God this is horrible. It's ugly. Hard to read. Things are scattered all over the code. And where is my sass ?
  - giantsloth 9y ago
    It doesn't support sass, but it does support scss.
    - allover 9y ago
      To all intents and purposes, when people say Sass, they mean Scss.
  - mottomotto 9y ago
    I much prefer putting the styles in a separate {componentName}.scss file, import'ing that into the component and using the Webpack Extract Text Plugin: https://github.com/webpack-contrib/extract-text-webpack-plugin https://github.com/webpack-contrib/extract-text-webpack-plug... I guess now you have two files per component but to me, it's well worth it.
    - onenite 9y ago
      You can work with two files per component if you must truly put the styling in another file. One of the boons of react is that you can create a set of reusable base components that can be built upon throughout your app. If you can code-split the app, lazy-loading components as needed, and if you can cache all of the static app anyway, why does it matter if the presentation is tied to the logic? The same can be said for vue.js. :) The two languages have many merits and they both make their own sacrifices. But they are ultimately two peas of a pod. Like Thor and Loki. But who is Thor and who is Loki? ;)
- jrobn 9y ago
  Code like parent comment is why I use Intercooler.js [1]. [1] http://intercoolerjs.org http://intercoolerjs.org
  - NumberCruncher 9y ago
    It is a good example for solving problems without overengineering them.
  - agumonkey 9y ago
    Cute ideas in there. Much appreciated
- kimjongman 9y ago
  ugly piece of code
- snarkyturtle 9y ago
  There is the Vue equivalent though: https://github.com/styled-components/vue-styled-components https://github.com/styled-components/vue-styled-components
  - nikcub 9y ago
    Why do packages like this need to be ported or re-implemented for Vue rather than referenced? That package hasn't been updated since August while the root styled-components library has ~700 closed issues and 11,300 watchers I've seen it with other stacks as well with almost complete re-implementations, a lot of duplicated effort and it feels like it goes against the packaging philosophy for javascript
sametmax 9y ago
Same. That and the fact it took me an afternoon to get an hello world with react and understand it. And 20 minutes with Vue.
- giantsloth 9y ago
  I implore you to checkout create-react-app to get a hello world really quick: https://github.com/facebookincubator/create-react-app https://github.com/facebookincubator/create-react-app npm install -g create-react-app create-react-app my-app cd my-app/ npm start Your sentiment is correct that tooling around these pieces of technology needs to always be first class. React failed miserably, and Vue did an AMAZING job. I'm probably starting to sound like a shill for React. I've used both and love both. I do like that React is "just javascript", which I think is why I use it.
  - Fifer82 9y ago
    React is the new JQuery, I really don't see Vue and Angular being in the same world as React.
    - irrational 9y ago
      So, pretty soon we should see youdonotneedreact.com websites popping up?
      - Griffinsauce 9y ago
        Well... there is a good chance that you don't.
      - gramstrong 9y ago
        Once web components become standardized. So...2030.
        spankalee 9y ago
        They're standardized now: https://html.spec.whatwg.org/multipage/scripting.html#custom-elements https://html.spec.whatwg.org/multipage/scripting.html#custom... https://dom.spec.whatwg.org/#shadow-trees https://dom.spec.whatwg.org/#shadow-trees
delhanty 9y ago
Evaluating Vue and React at the moment: Another issue with CSS-IN-JS seems to be security - as it opens up another vector for cross-sight scripting attacks - see here for example. [1] If I end up going with React, I'll probably avoid CSS-in-JS outside of React Native. >You can’t use CSS in react-native apps. But you can use CSS-in-JS with styled-components. [2] Disclaimer: met James K Nelson of reactarmory.com at #hntokyo on Thursday - otherwise unaffiliated. [1] https://reactarmory.com/answers/how-can-i-use-css-in-js-securely https://reactarmory.com/answers/how-can-i-use-css-in-js-secu... [2] https://reactarmory.com/answers/should-i-use-css-in-js https://reactarmory.com/answers/should-i-use-css-in-js
delhanty 9y ago
Evaluating Vue and React at the moment: From the Vue documentation [1]: >Even if you don’t like the idea of Single-File Components, you can still leverage its hot-reloading and pre-compilation features by separating your JavaScript and CSS into separate files:  <template> <div>This will be pre-compiled</div> </template> <script src="./my-component.js"></script> <style src="./my-component.css"></style> If I end up going with Vue, I'd probably do that. It looks like a lot of boilerplate though ... Is there any tool from the Node ecosystem designed to reduce that boilerplate? Thanks for any insights! [1] https://vuejs.org/v2/guide/single-file-components.html#What-About-Separation-of-Concerns https://vuejs.org/v2/guide/single-file-components.html#What-...
- petepete 9y ago
  I started off hating the idea of single page components; I'd have much rather had a component reside within a directory (with template.html, style.sass and script.es6.js files or whatever) but in reality, so long as you keep your templates light and do any heavy lifting elsewhere, it's quite manageable. Newer JavaScript functionality makes that work nicely. Almost all of my components fit on one screen.
lightblade 9y ago
> Standard / Official way of doing things If you like that, why not go with Ember?
lenkite 9y ago
Well, this approach of single file components (.vue) containing separately scoped HTML, CSS and JS is what the Google Polymer team were recommending all the way for the last several years, but it seems no one was listening to them.

by gt5050 9y ago

giantsloth 9y ago

I agree that single file components are awesome. I wish you had been introduced to styled components in react: import styled from 'styled-components' const Container = styled.div` padding: 10px; background: ${ ({ isHovered }) => isHovered ? 'green' : 'red' }; ` const H1 = styled.h1` font-size: 15px; ` const P = styled.p` font-size: 10px; ` const MyComponent = ({ isHovered }) => { return ( <Container isHovered={isHovered} > <H1> Hello <H1> <P> This is a thing </P> </Container> ) }

untog 9y ago
That really doesn't work well with: > Our designer could churn out neat html/css, but was a beginner in Javascript. I write JS every day, and frankly that code looks like an unholy mess to me, so I can't imagine what it looks like to a beginner. Is "styled.div``" a function call? It's not self-evident. How do you do inheritance? Is that a template string with functions inside it? Would that CSS autocomplete? That code looks very much like it sacrifices ease of writing CSS for ease of writing JSX. That isn't the correct tradeoff for everyone.
- giantsloth 9y ago
  Interesting critique. I would highly suggest checking out template literals: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... Yeah styled.div is a function as you can check out in the mdn docs I linked, it's really cool stuff. Inheritance is done like: const List = styled.ul` li { padding: 10px; } ` const HeavyPaddedList = styled(List)` li { padding: 20px; } ` If you wanted to just change the li you'd have to: const ListItem = styled.li` padding: 10px; ` const HeavilyPaddedListItem = styled(ListItem)` padding: 20px; ` You're writing scss within the text blocks. You're correct that you need some understanding of JS. I've never worked with designers that wrote css, I'd also probably not trust them to do so (my own failings). I don't agree that it looks like an unholy mess (hyperbole may be lost on me), but I can see how it could be jarring at first look. I had a similar reaction when I looked at Relay (https://facebook.github.io/relay/ https://facebook.github.io/relay/), when they used literals for data fetching.
  - untog 9y ago
    > You're writing scss within the text blocks. So, yeah, you lose all the syntax highlighting etc. that comes with just writing normal CSS. I don't think it's unreasonable for a designer to object to that - how would you feel if you were presented with a build system that required you to write all your JavaScript inside one big string statement? Maybe it's just me, but I don't find it intuitive at all. `styled` has properties for, I assume, every HTML tag? But it can also be called as a function for inheritance purposes? And that inherited call appears to use the same tag as its parent... but what if I want to reuse styles across different tags? How could I define some shared CSS properties I'd use across different elements? Don't get me wrong, it is cool stuff. But it also feels far too much like hand-wavey magic stuff. I've literally never used Vue before, but looking at this page: https://vuejs.org/v2/guide/single-file-components.html https://vuejs.org/v2/guide/single-file-components.html I have zero confusion about how to write styles for it. And I really don't understand why styled-components would be worth the extra effort by comparison. What does it bring to the table? It's different without a compelling reason for being different.
sametmax 9y ago
God this is horrible. It's ugly. Hard to read. Things are scattered all over the code. And where is my sass ?
- giantsloth 9y ago
  It doesn't support sass, but it does support scss.
  - allover 9y ago
    To all intents and purposes, when people say Sass, they mean Scss.
- mottomotto 9y ago
  I much prefer putting the styles in a separate {componentName}.scss file, import'ing that into the component and using the Webpack Extract Text Plugin: https://github.com/webpack-contrib/extract-text-webpack-plugin https://github.com/webpack-contrib/extract-text-webpack-plug... I guess now you have two files per component but to me, it's well worth it.
  - onenite 9y ago
    You can work with two files per component if you must truly put the styling in another file. One of the boons of react is that you can create a set of reusable base components that can be built upon throughout your app. If you can code-split the app, lazy-loading components as needed, and if you can cache all of the static app anyway, why does it matter if the presentation is tied to the logic? The same can be said for vue.js. :) The two languages have many merits and they both make their own sacrifices. But they are ultimately two peas of a pod. Like Thor and Loki. But who is Thor and who is Loki? ;)
jrobn 9y ago
Code like parent comment is why I use Intercooler.js [1]. [1] http://intercoolerjs.org http://intercoolerjs.org
- NumberCruncher 9y ago
  It is a good example for solving problems without overengineering them.
- agumonkey 9y ago
  Cute ideas in there. Much appreciated
kimjongman 9y ago
ugly piece of code
snarkyturtle 9y ago
There is the Vue equivalent though: https://github.com/styled-components/vue-styled-components https://github.com/styled-components/vue-styled-components
- nikcub 9y ago
  Why do packages like this need to be ported or re-implemented for Vue rather than referenced? That package hasn't been updated since August while the root styled-components library has ~700 closed issues and 11,300 watchers I've seen it with other stacks as well with almost complete re-implementations, a lot of duplicated effort and it feels like it goes against the packaging philosophy for javascript

sametmax 9y ago

Same. That and the fact it took me an afternoon to get an hello world with react and understand it. And 20 minutes with Vue.

giantsloth 9y ago
I implore you to checkout create-react-app to get a hello world really quick: https://github.com/facebookincubator/create-react-app https://github.com/facebookincubator/create-react-app npm install -g create-react-app create-react-app my-app cd my-app/ npm start Your sentiment is correct that tooling around these pieces of technology needs to always be first class. React failed miserably, and Vue did an AMAZING job. I'm probably starting to sound like a shill for React. I've used both and love both. I do like that React is "just javascript", which I think is why I use it.
- Fifer82 9y ago
  React is the new JQuery, I really don't see Vue and Angular being in the same world as React.
  - irrational 9y ago
    So, pretty soon we should see youdonotneedreact.com websites popping up?
    - Griffinsauce 9y ago
      Well... there is a good chance that you don't.
    - gramstrong 9y ago
      Once web components become standardized. So...2030.
      - spankalee 9y ago
        They're standardized now: https://html.spec.whatwg.org/multipage/scripting.html#custom-elements https://html.spec.whatwg.org/multipage/scripting.html#custom... https://dom.spec.whatwg.org/#shadow-trees https://dom.spec.whatwg.org/#shadow-trees

delhanty 9y ago

Evaluating Vue and React at the moment: Another issue with CSS-IN-JS seems to be security - as it opens up another vector for cross-sight scripting attacks - see here for example. [1] If I end up going with React, I'll probably avoid CSS-in-JS outside of React Native. >You can’t use CSS in react-native apps. But you can use CSS-in-JS with styled-components. [2] Disclaimer: met James K Nelson of reactarmory.com at #hntokyo on Thursday - otherwise unaffiliated. [1] https://reactarmory.com/answers/how-can-i-use-css-in-js-securely https://reactarmory.com/answers/how-can-i-use-css-in-js-secu... [2] https://reactarmory.com/answers/should-i-use-css-in-js https://reactarmory.com/answers/should-i-use-css-in-js

delhanty 9y ago

Evaluating Vue and React at the moment: From the Vue documentation [1]: >Even if you don’t like the idea of Single-File Components, you can still leverage its hot-reloading and pre-compilation features by separating your JavaScript and CSS into separate files:  <template> <div>This will be pre-compiled</div> </template> <script src="./my-component.js"></script> <style src="./my-component.css"></style> If I end up going with Vue, I'd probably do that. It looks like a lot of boilerplate though ... Is there any tool from the Node ecosystem designed to reduce that boilerplate? Thanks for any insights! [1] https://vuejs.org/v2/guide/single-file-components.html#What-About-Separation-of-Concerns https://vuejs.org/v2/guide/single-file-components.html#What-...

petepete 9y ago
I started off hating the idea of single page components; I'd have much rather had a component reside within a directory (with template.html, style.sass and script.es6.js files or whatever) but in reality, so long as you keep your templates light and do any heavy lifting elsewhere, it's quite manageable. Newer JavaScript functionality makes that work nicely. Almost all of my components fit on one screen.

lightblade 9y ago

> Standard / Official way of doing things If you like that, why not go with Ember?

lenkite 9y ago

Well, this approach of single file components (.vue) containing separately scoped HTML, CSS and JS is what the Google Polymer team were recommending all the way for the last several years, but it seems no one was listening to them.