19 ms·

Vue is the only one of the most popular 3 frameworks that can easily be used on a minimal basis to sort of "spruce up" old applications by selectively adding it

• goodoldneon 6y ago
  Why can't React do the same?
  • RNCTX 6y ago
    I suppose it could, but there are annoyances with JSX defaults. For instance, Vue provides a method to explicitly declare your template variable delimiter syntax. Last time I looked this was requested of React, but not implemented, someone correct me if I'm wrong on that and it has come along in the last year or two. So.. lets say you wanna put some modern Javascript in some Django templates to make them look spiffy. With Vue you can just declare your delimiter to be `[[` instead of `{{`, (because `{{` conflicts with Django's template variable syntax) with a one-liner setting. I'm sure you could do this in React with a custom parser function (or maybe there's a third party library?) but it's a lot easier when the framework just gives such things to you out of the box. If I do this all over the place and some other guy comes along years from now with no documentation on what he's getting into, he doesn't need to know too much to figure out what's going on and work on it. Right away he'll see "delimiter = [[" at the top of the script block in a template and can grep double brackets in the whole project to get an overview of what's being done.
    • shados 6y ago
      React doesn't have templates, so that's a non-issue. JSX is sugar on JavaScript, but it's not a string. So template delimiters don't matter (that is, if you didn't use a build step, then it would be straight javascript functions calls)
      • earthboundkid 6y ago
        That’s the whole point of the discussion: Vue makes it easier to have Django spit out <tr @click=doThing>My data here</tr> and then Vue notices and adds the event listeners. In React, it is very difficult if React has to start with foreign template output because it wants to own the (V)DOM.
        • shados 6y ago
          For sure! I was just pointing out that discussing how easy Vue made it to change the delimiter ala Mustache isn't exactly a benefit vs React, since the whole concept doesn't reall exist there at all.
  • pricecomstock 6y ago
    I'm not sure about React's capability with this, but Vue can very easily run with no build stage. You can load Vue from a CDN and use a couple lines of JS to point it at a DOM element in your app. Then you can write a plain JS Vue object (what goes inside the <script> tags in a .vue file), and all this logic will apply inside the element you pointed it at. You can also write components, although that gets a little clunky without a build stage. This has allowed me to do things like create Vue-based tools in a locked-down corporate environment where I was not able to install Nodejs on my machine.
    • bdcravens 6y ago
      React can, but less ergonomically than most developers are used to.
      • HonshinM 6y ago
        Could you comment more on how it's done?
        • pier25 6y ago
          Modern React uses JSX which is then transformed at build time into function calls. You can write those function calls yourself, but it would be a tremendous PITA.
          • lhnz 6y ago
            In this case, you could use `htm`: https://github.com/developit/htm#usage https://github.com/developit/htm#usage
            • pier25 6y ago
              Yeah totally. Or even use Preact by the same author which is smaller and faster than React.
            • jonquest 6y ago
  • _jjkk 6y ago
    Please someone correct me if I'm wrong. It seems like you can only implement React using the full "modern JS stack", i.e. Node/Webpack/... So if you want to use it on one page, it's a hard sell to set up all that infrastructure (and document it for the team) On some sites I've used Vue.js by simply adding a <script> tag with vue.min.js. On sites already using Gulp or similar, it's pretty simple to incorporate the Vue bundle and use it on one or a few pages.
    • jdavis703 6y ago
      There is no need to run NodeJS in production with React. In fact, React doesn’t even require a fancy build system (though for anything more than a toy app you’re tempting fate.)
    • manigandham 6y ago
      React can also be used with just script tags. It uses a compiler to turn JSX into a render function (the same as Vue which accepts JSX or HTML) and these compilers are written in JS and can run in the browser. Also modern browsers are much better at supporting JS modules which makes it easier to include other libraries.
    • RNCTX 6y ago
      Apparently this is possible: https://shinglyu.com/web/2018/02/08/minimal-react-js-without-a-build-step-updated.html https://shinglyu.com/web/2018/02/08/minimal-react-js-without...
    • acemarke 6y ago
      React can be added to a page with just a script tag in the same way as Vue: https://reactjs.org/docs/add-react-to-a-website.html https://reactjs.org/docs/add-react-to-a-website.html Having said that, React is normally used with JSX syntax, which requires a compile step. You _can_ use it with "raw" `React.createElement()` calls, but that's generally unwieldy and almost no one does that. However, there's a very neat library called https://github.com/developit/htm https://github.com/developit/htm , which is an almost-JSX-compatible syntax that uses JS template literal strings, and requires no compile step.
    • 6y ago
  • manigandham 6y ago
    React and Vue can both be used directly with script tags, however the biggest difference is that React uses JSX while Vue uses HTML templates (but also supports JSX). 99% of the time, HTML is easier and faster to write, with the built-in directives providing all the functionality you need. More importantly though, HTML can be generated by every single server-side framework, and this makes it very easy to have server-side code from any language stack that becomes interactive using a Vue client-side layer.
    • mythrwy 6y ago
      That's exactly right and this is a much underrated capability and I think it's the point being missed by those saying "well if you do XXX you can include React with a script tag too!"
• crescentfresh 6y ago
  Agree with this sentiment. I was in web dev since pre-jQuery/Backbone, but left during the rise of the js-framework wars. I then returned to this area as I needed to add functionality/"spruce up" a web app within my organization and randomly chose Vue for the task. It went smoothly and didn't require re-writing anything. Meanwhile the web development team are still fighting with the flagship "all-or-nothing" angular app, still stuck on 1.7 because anything else is an entire rewrite.
• diob 6y ago
  You can do the same thing with React though, you can arbitrarily render a React root anywhere, and an arbitrary number of times on the same page. For instance, I work on an app that was originally written in Backbone / Marionette, but I was able to write generic connectors to allow us to drop in React at any point in the tree. Similarly, we can go back to Marionette / Backbone at any point in the tree. It's made gradually migration towards React possible. Claiming React can't do the same sort of sprucing up as Vue is just a lack of imagination. Show me an old app, and I'll show you how to do it.
  • deleted 6y ago
    [deleted]
  • lhorie 6y ago
    React is a quite bit more all-in than Vue though. For example, an old app I'm aware of has HTML generated by JSP with its own convoluted maven build process and uses a mix of AngularJS and jQuery to hydrate client-side functionality on top of it. The development workflow is a draconian exercise in acrobatics through remote desktops and VPNs in really old laptops (because "security" and unions). Vue has similar hydration capabilities as Angular, but with React, you are pretty much forced to describe the view from scratch in JSX. To make things more fun, many islands need to be aware of each other, something that is not super idiomatic in React land. Just some food for thought.
    • jhall1468 6y ago
      I don't know if "from scratch" is really a fair statement. React accepts HTML in the render function, so the only thing you'd need to do is modify the variables to match JSX's variable syntax, which is exactly what you'd have to do with Vue. I think it's all pretty much the same deal. You might argue Vue's template syntax is closer to HTML than JSX is, but that doesn't really feel like the major issue when slowly refactoring a large application.
      • lhorie 6y ago
        I'm not talking syntax. I'm saying that vue can be added on top of a third party DOM that may have server-rendered data embedded in it. You cannot hydrate React on top of dynamic HTML that was generated with JSP/PHP/.NET/etc unless you a) give up JSX (a big departure from idiomatic React) and b) interpolate server variables into your JS (a no-no in pretty much every non-SPA framework) For example, take a rails app, then do the equivalent of $('#foo').toggle() based on some condition. In React, AFAIK you can't unless React knows what the markup being toggled is somehow. Vue can do it without knowing anything about the markup inside, and more importantly, the code will look idiomatic.
• swyx 6y ago
  i'm afraid this is pretty much plain wrong. react and svelte also support incremental adoption, and i dont know angular but i'd hazard there's a way to do it too if you bothered to ask angular devs. what you're responding to is marketing, which Vue has done an effective job of. thats fine, but it is unfair of you to conclude "Gradual adoption is a feature / selling point not many web development frameworks can claim."
  • gavinray 6y ago
    I think the original commenter might have intended to mean without additional build tooling? While it isn't pretty, you can drop Vue in a <script> tag on a page and define components with template strings. In React, you can technically do this, but you need to either: A. Use React.createElement() calls B. Use something like "htm" also included via a <script> tag, with template literal tags to wrap your component renders You can technically include Babel in a <script> tag to use JSX, but it only works with <script> blocks that have been tagged as "JSX", not within regular ".js" files you can import using "src=" Jason Miller a-la Preact is the person I see most consistently working on and pushing this sort of React/Preact no-build setup. I definitely get the appeal, for this exact usecase -- you have a simple, mostly-static website (or something old and built with jQuery) and you want to incrementally modernize it/add functionality without rewriting the whole thing. https://twitter.com/_developit/status/1220102334048624643 https://twitter.com/_developit/status/1220102334048624643
  • hobby-coder-guy 6y ago
    Svelte. Popular.
  • SPascareli13 6y ago
    I can tell you that not only he is right, but I've used Vue for exactly that purpose before and works like a charm. You can go pretty far using Vue with a <script> tag before you start needing build tooling.
    • andrewflnr 6y ago
      That's not where they were wrong.
• brlewis 6y ago
  > Vue is the only one of the most popular 3 frameworks that can I don't know if you intended it this way, but the start of this comment makes it automatically flamebait. Discussion around release announcements can quickly turn into a flame war. Please use caution.
  • hobby-coder-guy 6y ago
    What do you mean?
    • hombre_fatal 6y ago
      For one, it's not the only one. And instead of just talking earnestly about a cool feature of Vue in a Vue thread, to say nothing of other frameworks, you've now anchored the convo to framework comparison with your incorrect premise.
  • punnerud 6y ago
    And a flame war, aka lot of comments compared to votes on HN, result in less time on the front page. So there is not the biggest benefit to oversell.
  • RNCTX 6y ago
    The "easily" in that sentence is an important word...
• winrid 6y ago
  You can do this with Angular. Just create a component, insert the compiled script tag, and then you can reference it in the html like: <my-component />
• lmiller1990 6y ago
  Yep, this is my favorite thing about Vue. People will respond saying you "can do this with React, too". But in practice it's not nearly as nice to do as with Vue. You need React and React DOM AND JSX to really make it practical; writing React render functions is not really what you want to do when you are adding some simple functionality to an existing web app (like form validation).
  • deleted 6y ago
    [deleted]
  • yupnoop 6y ago
    > simple functionality to an existing web app (like form validation) If all you are doing is adding a simple form validation to an existing web app, then you only need few lines of plain JS. You don't have to use vue either.
• aabbcc1241 6y ago
  Stencil, Elm and React can also be be gradually adopted as they can produce individual component, which can be mounted to a part of webpage
• k__ 6y ago
  As far as I know, what you are talking about was the main reason React was created in the first place. All this FUD spread by the Vue fans is getting ridiculous...
  • lhorie 6y ago
    Not trying to hurt any feelings here, but as far as I can see as an unbiased person who's looked at far too many frameworks for their own good, the FUD is coming from the React fans. I'm seeing a bunch of commenters getting defensive and saying "well technically" while conveniently ignoring the difference in effort required to do islands in each framework. You can't say dropping JSX is at all comparable to plopping in v-clicks on existing HTML. You can certainly adopt react "incrementally", in the sense that you can implement an entire new self-contained feature and plop it into an existing app if it already uses REST APIs, but react is decidedly not as trivial to sprinkle into a non-SPA where data comes mixed with HTML rendered on the server.
    • k__ 6y ago
      Saying React can do it is a fact. So React devs are not spreading any FUD whatsoever. Saying React can't do it, to paraphrase you, because "technically it's harder than with Vue" is like saying nobody can drive a stick shift because you have to shift gears manually. Yes, you have to do it manually, no it doesn't make the car undrivable. That's what I call FUD.
      • mstipetic 6y ago
        The problem is that somebody gave a compliment to vue, and immediately a bunch of react people came with their "well actually" React wasn't even mentioned, don't know why so defensive, who cares
        • detaro 6y ago
          I very much doubt the original comment mentioning "the most popular 3 frameworks" didn't have React in mind as one of those, even if they didn't spell it out, so that complaint IMHO makes little sense.
• lmarcos 6y ago
  I wouldn't say this is the main selling point of Vue. For me Vue is superior exactly in the opposite scenario: when one has to build a complex SPA. State management, routing, and the like is all well integrated in the Vue ecosystem whereas, for example, in the React world it's a pita. I like React's simplicity, but I cannot deal with any of its complementary libraries for state management.
• thepratt 6y ago
  You may want to look at projects like preact-habitat, stimulus, and web components (a la polymer). Vue isn't the only game in town for this functionality.
• zeandcode 6y ago
  Couldn't be more excited how Vue 3 would become the basis of the next amazing project