23 ms·
Switching From React To Vue.js
- yunyu 9y agoThe major problem with this tutorial is that it doesn't cover single file components (https://vuejs.org/v2/guide/single-file-components.html https://vuejs.org/v2/guide/single-file-components.html) at all, which are superior to (and preferred to) implementing string based render functions (which rely on a runtime template compiler). Indeed, the Vue NPM package doesn't even provide the runtime template compiler by default. Stuff like what the article promotes are great for development if you just want to include a <script> file, but are clunkier than the way that you're actually supposed to do things.
- yunyu 9y agoTurns out it's mentioned lower down, but the focus of the article is still on Vue.component, which really shouldn't be the case.
- city41 9y agoI've never used Vue, and in many ways am the target audience of this post. From my perspective, I think he took the right approach. Starting right off with a .vue file would be pretty alien to newcomers.
- deskamess 9y ago> The major problem I did not see it as a problem. I appreciated the light weight approach being shown first. In fact, for my use case, I prefer not to bring in the ecosystem. That could change, and the article introduces the heavier approach. > the way that you're actually supposed to do things The one message that comes out of the Vue camp and happy users is that Vue can fit many project types - small to large. Not having to always use single file components is the pragmatic part of that inclusionary message.
- yunyu 9y agoThat approach is actually heavier - the template compiler needs to be distributed (extra 15kb gzipped) and templates need to be rendered at runtime.
- msmm 9y agoWhy would anybody do that? Maybe only when you charge by hour it makes sense because making something more complicated than Todo list is a struggle.
- waibelp 9y agoWhy?
- grabcocque 9y agoIt's been eighteen months guys, time to rewrite all our front end code from scratch!
- a-guest 9y agoSo true! And now you need to do a re-write with each of the top 250 frameworks of 2017. https://twitter.com/HackerNewsOnion/status/868197801531908096 https://twitter.com/HackerNewsOnion/status/86819780153190809...
- TekMol 9y agoWhat are good examples of popular websites (not behind a login) that make use of Vue or React? I ask because I keep reading about it, all programmers seem to use it, but I just don't come across websites that use it. Is it only used for backend dashboards? Or do all Vue/React sites fail to gain traction for some reason?
- madeofpalk 9y agoMobile Twitter uses React. https://mobile.twitter.com/facebook https://mobile.twitter.com/facebook Airbnb uses React https://www.airbnb.com.au/rooms/432044 https://www.airbnb.com.au/rooms/432044 Facebook, Facebook Messenger, Instagram, Netflix, Reddit Mobile, new Reddit Profile pages are all high profile sites using React that aren't just 'backend dashboards'.
- TekMol 9y agoInteresting. The ones not behind a login (Twitter,AirBnB,Reddit Mobile) are sites that feel laggy and clunky to me. With slow loading content, loading animations, laggy scrolling, too much stuff opening in new tabs, confusing interfaces. I wonder if React causes/incentivises this or if it's design decisions by the coders/designers/managers. In contrast, pages like Reddit Desktop, Google and Amazon work much better for me.
- andrewfong 9y ago> I wonder if React causes/incentivises this or if it's design decisions by the coders/designers/managers. Both. React makes it easier to write complex JavaScript web apps. Complex JavaScript means you have a lot of rope with which to hang yourself.
- patrickaljord 9y agoActually the new Twitter Mobile called Twitter Lite is super fast, did you try the latest version? It's a full progressive web app that works offline, has notifications and super fast scrolling. It was designed to work on low end Android device, give it a try: https://mobile.twitter.com https://mobile.twitter.com
- Blixs 9y agoI have (some) experience with both React and Vue 2 and definitely prefer the later. Vue is very minimalistic but unlike React provides a lot of functionality out of the box. Stuff like the router, the computed properties, automatic change detection, HTML templates, scoped css, animations, ... . But what's more important is the fact it does all these things in an extremely elegant and unobtrusive way. The computed properties are an often overlooked but good example of this. You simply declare an object property that is dependent upon other properties and voila, that's it. It's there in your component together with the rest of your data for you to use in your template. It gets memoized, it gets change detection, it just works (TM). No need for Redux, Reselect, selector functions or any of those things. I love the simplicity of this approach. And this is just an example, but this very minimalistic approach applies to everything that Vue offers.
- danmaz74 9y ago> unlike React provides a lot of functionality out of the box. Stuff like the router, the computed properties, automatic change detection, I never studied Vue, but the article starts saying "Both have separate, but commonly used, router and state management libraries". This doesn't look like "out of the box" to me.
- mcintyre1994 9y agohttps://vuejs.org/v2/guide/routing.html https://vuejs.org/v2/guide/routing.html For most Single Page Applications, it’s recommended to use the officially-supported vue-router library. For more details, see vue-router’s documentation. https://github.com/vuejs/vue-router https://github.com/vuejs/vue-router -- https://vuejs.org/v2/guide/state-management.html https://vuejs.org/v2/guide/state-management.html Vue offers vuex: our own Elm-inspired state management library. https://github.com/vuejs/vuex https://github.com/vuejs/vuex -- Out of the box or not, they're part of the same github org, they're officially supported and they're documented in the official docs. I think this is just splitting hairs.
- danmaz74 9y ago
- fnayr 9y agoI'm currently making a mobile f2p game in Unity. I previously had created a Cocoa app for the game item creation/ db management. Since we changed the architecture of the game pretty heavily, I needed to rewrite the tool. I chose Electron + Vue over Cocoa. Despite having very little web dev/JS experience, I was able to make a fully functioning app in under 3 months that syncs with a server and has multi user editing. Huge fan of Vue. Haven't had the pleasure/displeasure of React so can't really compare.
- kimjongman 9y agoOur company migrated to vue.js, 4 months ago. Our complex app is messy with JSX, router, and new dev can't keep up with code. Now we start every new app with Vue.js. The gap between junior dev and senior dev comes closer. They can collaborate with less bugs, less problems and less time to develop.
- nip 9y agoIs it because of the technology or because of the team? Rhetorical question - I am by no means attacking you or your team, I just clicked on your "is messy with JSX, router" sentence and decided to put my reply under yours. I see many people tackling React but not developing in a 'React' way. For example I recently saw on HN some user complaining that he had to create N functions to handle N items on a form, while computed properties would have done the trick with only one. I have no experience with Vue but extensive with React, having developed both small and bigger apps and the only real issue for bigger apps was that it was hard for new users to grok the project initially because of the component-based approach of React. I do agree that the learning curve for React is pretty steep, but you reap the benefits later on as React 'scales' extremely well in my opinion.
- k__ 9y agoI think the flux-wars made many codebases messy.
- haukur 9y agoIn case anyone reads this and is left wondering, there's no need to have n functions to handle n inputs - you only need one. A simple example would be to set the state based on `event.target.name`.
- sheeshkebab 9y agorouter and redux make it messy (or rather lack of standard of routing and global state management in react makes every one create their own half assed implementations)... also transitioning web developers from writing giant HTML pages to thinking about smaller components is a difficult, without dedicated react designer. All these make non trivial react apps a graveyard of crappy jsx and messy untyped tangles of JavaScript code.
- louisgeo 9y agoAt our company we built single-page apps using Vuejs. It's very simple to pick up and easy to merge with existing templates and code (as it looks and feels a lot like standard HTML). it takes less than a day for a dev to be up and running with Vuejs, where React is a bit more tedious to get started with.
- danmaz74 9y ago> ... If message is passed as a prop to any child components, Vue knows that they depend on this will be automatically re-rendered as well. That’s why there’s no need for a shouldComponentUpdate method on Vue components. I think that React does the same? If a component's props and state don't change, shouldComponentUpdate doesn't get called at all IIRC. shouldComponentUpdate, instead, is useful when a state or prop was changed, but it's possible to quickly detect that the change won't require a DOM update anyway.
- jefffan241 9y agoThere's a default shouldComponentUpdate implementation in the React.Component. It does a shallow compare of state and props. When you define shouldComponentUpdate you are just overriding that implementation. So it's always called, its just you don't need to always define it.
- haukur 9y agoThe shallow check is on React.PureComponent. shouldComponentUpdate just returns true by default in React.Component components. See here for details: https://facebook.github.io/react/docs/react-api.html#react.purecomponent https://facebook.github.io/react/docs/react-api.html#react.p...
- deleted 9y ago[deleted]
- danmaz74 9y agoFrom the React website: "When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one." My point is that if a component doesn't receive a setState or new props it just doesn't start the rendering cycle at all (AFAIK), so shouldComponentUpdate doesn't get called at all.
- mpolichette 9y agoDo people like Vue because it's more declarative than react? Is it mostly angular devs switching and getting the best of react but still having directives? I like the control react gives me without the black box 'compiler' which seems like it makes a bunch more choices for you. I'm probably biased, someone cmv?
- cormacrelf 9y agoI hate directives. There is nothing you can do with them you can't do with just plain callbacks or putting React components inside another that renders its children. HTML templating directives are stupid too, I find myself looking up syntax references for angular even though I've used it for ages. (Think semicolons and magic variables like `$event` or `index` in *ngFor bindings – you don't need these unfortunate and necessary syntactic choices if you just use JSX.) So yeah, Vue is probably slightly more declarative than react, at the usual cost of having to learn all the declarations. When I first looked at it, I saw the 'v-' prefix on HTML attributes and just stopped.
- yunyu 9y agoIt's fairly straightforward to use JSX with Vue, FWIW. Everything gets compiled down to a render function like React.
- moonforeshot 9y ago+1 debugging angular directive was a nightmare... but things might be different with typescript checking on angular-directives... (but ironically, react-typescript got props checking faster...)
- deckar01 9y agoI recently started forking the github package for atom which is built with react. I found it very confusing that render methods pass scope variables to controllers using directives. The number of times a variable gets passed back and forth from a JavaScript class to a template directive is just silly.
- dejv 9y ago
- k__ 9y agoThings you're sacrificing when going away from React: 1. Stability. FB uses it for their main product, which is probably the biggest web app of them all, they pay many devs to work fulltime on it. People coming from Angular, who had to migrate all those breaking changes over the years know the struggle. 2. Options like React-Native, React-VR and co. React enables your devs to acquire a whole new range of possibilities. It isn't just a web framework.
- thejosh 9y agoIts what they use right now, who knows what is coming down the pipeline?
- k__ 9y agoI honestly don't know, but using it 1. for their main product 2. for many different products in general and 3. rewriting most it (v16) to be more future proof without public API changes sounds like a pretty save bet.
- coldtea 9y agoNobody. But the fact that they use it now makes it less likely to be abandoned by them that something they don't use (which, while they can't abandon, they haven't adopted either). Besides in 10 years the whole of IT changes. Don't look for "50 year frameworks".
- thibaut_barrere 9y agoI don't consider the fact that a large company uses something for their main product is enough to actually make it future-proof. Previous instances of that pattern: - three20 (used in FB ios app https://en.wikipedia.org/wiki/Three20 https://en.wikipedia.org/wiki/Three20) - GWT - Angular is actually a similar instance of that problem, to some extent If "large company" switches their goal at some point, then you're still alone. Currently I'm kind of more confident (in some way) to the future stability of Vue, than of React (just a gut feeling, time will tell!).
- 9y ago
- twii 9y agoWorking with React for almost 3 years now. Came from Angular, Bootstrap, jQuery, etc.. Done small and very large projects with it. It scales better than anything I've used before. It's amazingly reliable and robust. Looking at Vue I cannot think of 1 single benefit I gain by switching. It doesn't even come close to what React is capable of imao. I really have no clue why people are pushing this at all.. Are there any examples of large projects that switched from React to Vue without suffering a loss?
- jazoom 9y agoI switched a reasonably large project and there were many gains with no loss. They've all been said before by me and other people, including in this thread. If you don't see them it's because you don't want to.
- deleted 9y ago[deleted]
- intellectable 9y agoVue has electrolytes and it is gluten free. Seriously though I think Vue is the latest shiny example of everything that is wrong with the javascript community. Javascripts huge problem is the lack of a standard library or better yet a standard way of doing anything. To fill that void alone came NPM. With a million tiny fragmented micro libraries. Then it became a common to start reinventing the wheel and selling your idea to build up your community by claiming the trivial syntax changes make it so much easier to use. I like you have no clue why people are getting so excited about rewriting their apps all the time. I think of Vue like attempting to reinvent the calculus of react with a clever syntax and more simplified form but results in a Riemann approximation. I think Vue is more frontend focused where react is achieving far more like react fiber. I do not doubt the power of js community to keep cloning things into forms they are more familiar with and claim a smaller payload is best metric of success. Who would have thought so much open source collaboration would lead to so much fragmentation? I wonder what machine learning algos will come up with when they design their own programming language, because I think programming languages are being held back by discussing what syntax makes me feel good to type out.
- jorgec 9y agoI don't get it. Lets say that you have a well formed team, then you have a designer. A designer is who does the UI but know or care so little about programming. With React, the UI is practically JSX that very few people know (in comparison with html) and what we will get instead?, the result is the same html that it tries to avoid.
- bcyn 9y agoNot sure what your concern is, JSX is extremely simple to pick up with a cursory knowledge of HTML and Javascript.
- Bahamut 9y agoI actually was thinking it was a non-issue until I saw a designer actually struggle with working with JSX for doing some animation (I had to help him out), and the designer had some knowledge of JS.
- __ddd__ 9y agoJSX is very close to HTML. Maybe the issue is expecting designers who have zero dev skills to build front ends in a time of responsive design and rich JS interfaces. You wouldn't hire a print designer with no Photoshop experience to design a site, and you shouldn't hire a graphic designer with no web dev skills to build front ends. If you're team is really well formed, you might have an experienced graphic designer, a UX expert, and a front end developer who does the actual building as well as making day-to-day design decisions. The design/interface experts would work at a higher level of creating an overarching design language and UX guidelines.
- gustojs 9y agoOnly in the first world clients pay enough for such a team to make a living. Not a case for other countries.
- tyrw 9y ago"Lets say that you have a well formed team" Aaaand you've just just 90% of projects...
- __BrianDGLS__ 9y agoI have built applications using React and most recently Vue2. Both are very very similar and if you are familiar with one you will be able to pick up the other quite easily. In regards to webpages both are capable of doing the same things and fit the same uses cases. That said however if I was to start a greenfield application today, I would choose React. The reason for this is that react is better known, it is easier to find solutions for, and it has more mature guidelines for things like project structure and best practices. Vue is good competition for React and it will certainly help keep it on it's toes. However in regards to longevity, I feel React will be around a lot longer than Vue. React has the full support of facebook and is being used by other major vendors. Vue is also used by some big sites, however it has no official backing that I know of and is maintained by a "Benevolent dictator for life". In a year or two I predict that I will see another article with a title along the lines of "Switching From React To <insert new hotness here>". It is very unlikely in my opinion that I will see a "Switching From Vue To <insert new hotness here>" article.
- amauta 9y agoVue is backed by one of the biggest companies in China. You need to do more research. Vue is more popular in China than React. I would say I would rather start a new an app using Vue because of the learning curve is a lot faster to pick up than React.
- subpixel 9y agoA non-trivial amount of info and discussion around Vue (esp. third-party packages) is in Chinese. Whether that's a plus or a minus depends on whether you understand the language.
- agnivade 9y agoI have started to use museUI. A material UI library based on vuejs. It is also mostly in Chinese. I was reluctant initially but made the jump. Then one day I had an issue. Posted it. Interestingly some other guy posted a PR to solve that. And it got merged the next day. So it ended well for me. But can't say that for other repos. Just my experience.
- elnygren 9y agoVue and React both seem a little too heavy in boilerplate. It's also interesting that Vue seems to think that mutable state is a good thing (well, vanilla React does have mutable state too...). For the boilerplate (and large bundle size!) problem we have http://markojs.com http://markojs.com that looks very interesting. However, I think what we really might want is something closer to ClojureScript's re-frame (https://github.com/Day8/re-frame https://github.com/Day8/re-frame) and Reagent. However, Clojure and it's tools aren't really that great for beginners/juniors and/or people with little experience in FP and lisps. Maybe in the near future we'll see a little bit more FP style JS solutions pop up?
- kimjongman 9y agomarko looks good
- theprotocol 9y agoAt the risk of sounding like a shill (I bring up Riot a lot), check out Riot.js. It's a bit rough around the edges in terms of docs/presentation, but it's by far the most minimalistic and most productive "react-like" ui lib I've used. It's all very very expedient and you can pick it up in a day and be churning out advanced applications with very little mental load. It also supports in-browser compilation so you can get up and running instantly without having to set up Webpack/Browserify/Whatever, which is great for testing it out. Later on you can easily transition to using its offline compiler + whatever packager you want. The main downside is the community is small. But it's very close to Vanilla JS so I've practically never encountered an issue where I needed riot-specific help.
- elnygren 9y agoI've done some work on Riot actually! If you like them, check out RE:DOM - the author of that one did some work on Riot too. RE:DOM might be even more minimalistic and lightweight than Riot.
- forgottenacc57 9y agoThe things touted as benefits sound like disadvantages.
- moonforeshot 9y agoyou can use mobx to make react 'vue-like'
- fareesh 9y agoWhat is the state of isomorphic / server side rendering for Vue and React? Is it a straightforward thing to setup?
- CharlesW 9y agoI haven't done this with Vue yet, but it looks pretty easy to do both prerendering and server-side rendering[1]. A more complete solution, Nuxt.js[2], appears to be gaining in popularity as well. [1] https://ssr.vuejs.org/en/ https://ssr.vuejs.org/en/ [2] https://nuxtjs.org/guide https://nuxtjs.org/guide
- benweatherman 9y agoFor vuejs, https://nuxtjs.org https://nuxtjs.org is straightforward and easy to get started with isomorphic apps.
- codazoda 9y agoI stopped reading at "both are fast and light weight" because I don't find react to be "light weight". React is 275K (nearly a quarter of a meg) when it is minified and gzipped. 750K when it is not minified/gziped. We're talking about a web page UI here. It should be tiny for users with slow connections. React seems big to me and I can't justify it except in very large applications. As such, I struggle to find the reason React is so popular. Perhaps I'm a bit old school. People say it's easy to reason about, but I don't find that to be true in real world large applications with a lot of developers working on them. Still, I'm trying to like react, but these things are a struggle for me.
- SimeVidas 9y ago> As such, I struggle to find the reason React is so popular. Uhm, React websites run great in Chrome on a MacBook Pro. You seem to think that most web developers care about users on slow connections.
- codazoda 9y agoI am assuming that, yes. Websites with mass appeal should probably think about this. Yeah, I develop on a MacBook Pro with Chrome on a massive network connection, but I do an awful lot of web browsing on my phone from resteraunts and offices where there is somewhat crappy data coverage.
- sciolistse 9y agoWhile I agree that React (with ReactDOM) is heavier than it probably should be, a production build is around 140k minified, 45k min+gzipped. I personally find React applications to be fairly easy to navigate compared to other JS projects, but my use of it has primarily been porting applications from Angular, Knockout or Asp.net Webforms to React.. and I find it a lot easier to work with than those personally. Haven't tried Vue though.
- fonybalony 9y ago> React is 275K (nearly a quarter of a meg) when it is minified and gzipped. 750K when it is not minified/gziped. That statement is completely false. react@15.5.4: react.min.js is 21335 bytes uncompressed, 7353 bytes gzipped.
- Kiro 9y agoThe far biggest problem with Vue for me is the template language. Once you've used JSX you just don't go back to Angular style templates.
- CharlesW 9y agoA couple notes: (1) You can use JSX with Vue. https://vuejs.org/v2/guide/render-function.html#JSX https://vuejs.org/v2/guide/render-function.html#JSX (2) By "Angular style templates" do you mean Vue's Single File Components? Because from my POV they're glorious, and the primary reason I'd be reluctant to use React instead of Vue.
- p49k 9y agoRe #1: for both React and Vue, if you don't stick to the most common and standard methods for implementing functionality, you're going to cause yourself a lot of unnecessary pain. Everything around those ecosystems (documentation, debugging tools, libraries, etc) is designed for streamlining development for people who don't stray from the mainstream.
- Kiro 9y agoThanks. I mean "v-" etc in HTML, which is like "ng-" in NG1.
- dannytatom 9y agoActually the opposite for me, and the original reason I went with Vue (tho after using it more I like a lot about it). I just do not get the appeal of JSX. Directives are meh, but I still prefer it to JSX.
- buchanaf 9y agoDo you think that your preference is just from your previous experience? JSX feels like uninhibited templating to me, which is great when it is done right (and a little crazy when done poorly). I also feel like it gives cleaner error messages.
- SimeVidas 9y agoI dunno. I wouldn’t call React lightweight.
- jaequery 9y agoThere is a bit of React kool-aid in here, makes me really wonder if any of them have actually tried using Vue because the benefits and improvements you will see with Vue are immediately noticed. To be frank, the OP actually did a poor job of presenting Vue here because it only mentioned the similarities, which doesn't do any good for Vue. It did not get into areas where Vue is better than React, which is what most would be interested in hearing. If you ever put React and Vue.js side by side and compare, it is almost a no brainer to switch. How it handles bindings, the way they got Redux done right, and the single file component style, are all improvements over React IMO. I'd jokingly say if React were to keep improving and evolving for the next couple years, it may possibly look like Vue.js as of today.
- speg 9y agoInteresting. I hadn't touched React in months and recently spent a week with Vue. I had trouble getting up and running and was soon longing for React, or at least what I remembered of it.
- jaequery 9y agoLook up nuxt.js. It is like react starter kit for Vue, comes with SSR and webpack configured, etc.
- Etheryte 9y agoWhile Vue is awesome, Nuxt is quite horrible. Nuxt's developers have made some very weird design choices that you can't opt out of if you want to use it. For example, you have to define your routes by defining a directory structure[1], which means you have nonsense tree structures, no aliasing, etc. While they've provided an easy to start SSR solution, the rest of it is simply bad. [1] https://nuxtjs.org/guide/routing/ https://nuxtjs.org/guide/routing/
- hashkb 9y agoI'd love to see you elaborate. Your post is just Vue Kool aid.
- steve_taylor 9y agoI remember a couple of years ago when people were posting about switching from Angular to React. Now it's React to Vue. I'm going to be honest and concede that Vue may well be better than React. But having used React productively for a couple of years now, I don't really see much point in throwing out something that works well in favour of something else that also works well. Back when it was "why we switched from Angular to React", it was easy to understand because Angular 1 is awful. But React isn't awful at all and I don't really see what I'm going to gain by switching to Vue.
- nomnombunty 9y agoWhen I switched from Ember to react what I missed the most was the two ways binding, the computed properties and the router. From dabbling in Vue.js it seems to have incorporated the best of both worlds. I read over some of the technical implementation and it seems pretty sane. It seems too good to be true and I am honestly wondering what is the catch. Everything I have read about vue has been very positive so far. I am curious what are some of the cons of using vue
- chrislgrigg 9y agoI think it's important for any comment or post touting the superiority of Vue to also provide insight into the author's experience with and feeings about React. You very rarely hear from devs who were loving React, tried Vue anyway, and came away believers. This leads me to wonder whether it's not so much that Vue is "better," it's more that it operates in paradigms that are intuitive to some individuals and teams in ways that React might not be. I don't see that as a hit against it or anyone but as a very satisfied React, it does make me take every glowing Vue writeup with a grain of salt.
- tyrw 9y agoThey are pretty similar, though one thing this article lightly touches on is the standalone .vue file, which works absolutely beautifully. JSX feels like a hack to me, and the ability to write HTML, JS, and CSS as such in a single file greatly simplifies everything. You can even use different flavors of each (ES6, Sass, etc) no problem. I would be shocked if this feature doesn't find it's way into react, angular, and others.
- otto_ortega 9y agoI have no doubt VueJS will be the most popular framework in a couple of years, right now the adoption rate is not as fast as it could be because people have already invested in React/Angular so switching so soon looks like a downside, but people just getting started and that have zero investment in any of the 3 frameworks will go for VueJS without a doubt, because is much more easy to learn and equally or even more powerful. That was my case, I spent several years sticking to jQuery and waiting for the wave of "a new JS framework out every x months" was over, and after researching which framework to learn, VueJS was a clear winner. The syntax is way more simple and elegant, and as soon as Weex is stable it will be able to power mobile apps too!
- geordee 9y agoI've always felt that React is a constantly churning ecosystem. The patterns keep changing too fast for me to settle down or catch up. That way Vue.js has done an amazing job. Sort of reminded me of Rails. Today I'm happy with Vue.js for my small to medium applications. Keeps things simple and beautiful.
- theSpaceOctopus 9y agoI'm curious as to why some people refer to Vue as "the new hotness". I understand the concept but Vue was realeased in February 2014, which seems pretty ancient in JavaScript years. Wasn't React released only a year prior? Well, it's been around since 2011 but it was open sourced in 2013. Either way, Vue has been around and in use for a little while now.