Live data from Hacker News

Vue.js vs. React

vuejs.org

391–400 of 486 posts

Re: Vue.js vs. React

#391

Earlier quoted context omitted.

When you make it so that (which is how everyone is writing Vue anyway) Button It gets really, really clear that anything not in {{ }}, or attribute not prefixed by @ or : is HTML.

What's the difference between :disabled and the regular HTML disabled? Same for ID, etc. How do strings differ from variable names? The only way I see that as being more "intuitive" is if you're familiar with other templating languages. JSX is far clearer: Button All you really need to know is everything between braces is plain JavaScript, and property names are camelCased.

[deleted]

Re: Vue.js vs. React

#392
post #222
post #132

We moved away from React to Vue about 8 months ago and everyone on the team is a lot happier. First reason is we hate JSX. It forces you to write loops, conditionals, etc, outside of the markup you are currently writing/reading. It's like writing shitty PHP code without templates. It also forces you to use a lot of boilerplate like bind(), Object.keys(), etc. Another problem with React is that it only really solves o…

What makes Marko better then all others in your opinion? Apart from speed which is the only thing I could gather on the Google. And why are there no interest? Because it is from Ebay? I mean look at the reply and no one even want to touch on it.

I've been using marko for ~1yr now and don't work for eBay.

1) It's a templating language, not JS, not ternary operators, etc. Where this really makes sense is the following (probably valid marko). I _dare_ you to rewrite this simple search-results component in your FE framework or programming language of choice. Note how "state" is transferred in to a component

.../components/my-component/index.marko ``` 0 )> ${ r } no results Loading... Timed Out! Errored Out! ```

.../component/other-component/index.marko ``` ```

2) It's like PHP (mostly the good parts) ... there's only one negative I currently have with marko and that's the deprecation of "" or "", as with "really large templates" (already an anti-pattern), the lack of scope can cause variable shadowing.

3) you can break out into "just javascript" at any point ... `$ var xyz = 1 + 2 * component.functionAbc( 123 )` and then use ${ xyz } right after. I personally prefer having `scope...` in my arsenal so I don't accidentally re-use `var xyz` but it's really rare if you make small components and keep an eye on your refactoring.

4) It is _designed_ for both "virtual dom" + "HTML streaming" ... virtual dom is what helps diff trees efficiently (client side), but HTML streaming is the real genius. Given a relatively declarative template (which is what marko deals with), marko will actually take your "foo.marko" and literally compiles it into: "make_a_tree(...)" or "make_a_string(...)" which runs on client or server respectively.

Seriously.

``` $ mkdir foo && cd foo $ marko create xyz $ cd xyz $ npm start $ open http://127.0.0.1:8080/ ```

Follow along with the docs / tutorial and then humor me and run the following:

``` $ npm start $ curl -s http://127.0.0.1:8080 | wc -c 5388

$ NODE_ENV=production npm start $ curl -s http://127.0.0.1:8080 | wc -c 1678 ```

I've used angular 1.x, ember 1.x, a touch of react, and I'm most hopeful for marko, as I really see a way for an SPA to start up using the smallest-possible-html-bootstrap, marko to download after first paint, attach handlers, etc. and be "as active" but "as quickly as possible" ... harkening back to the "good old days" of PHP and JSP where the content rendered quickly ... mixed in with the "good days of today" where subsequent page renders don't just blank out the browser, but instead, efficiently load up only the changed portions (ie: the SPA / single page app / progressive experience).

It's easy to do a "progressive" experience requires a 1MB download of JS before first paint. It's actually really cool to be able to render a 100kb page in only 100kb of network traffic, but also to have all your handlers / regular JS working from the remaining 900kb ready to work automatically _enhancing_ your page, but not to have to make any tradeoffs or think about it in order to do it.

Re: Vue.js vs. React

#393
post #324

Earlier quoted context omitted.

Those names have nothing to do with JSX or React, they're the actual properties you're setting. JS properties don't map 1:1 to HTML attributes: while for example the "src" attribute is controlled using the "src" property, the "for" attribute is controlled using the "htmlFor" property, and the "class" attribute with the "className" property. All React is doing is setting the properties you tell it to. (The reason for…

I agree. Those examples have nothing to do with learning a new template syntax, it's simply the API of React.Component. Granted, there is still some syntax you need to learn for JSX, but it's very little. If you already know HTML's syntax, the only new things I can think of are the curly braces for using JS expressions as prop values (you also need to know what a JS expression is, lest you try to use an if statement)…

I think you misunderstand. The names are unrelated to React as well, they are native. Defined by the same standards bodies that define JavaScript itself, implemented by the browsers themselves. On a blank HTML page that includes neither React nor anything else, the line `document.body.className = "foo";` sets the body's class to "foo". (And `document.body.class = "foo";` does not.)

All JSX is doing is transforming `` into `[create div element]; div.className = "foo";`. If you wrote ``, JSX would faithfully transform it into `[create div element]; div.class = "foo";` - which doesn't work.

Re: Vue.js vs. React

#394
post #393

Earlier quoted context omitted.

I agree. Those examples have nothing to do with learning a new template syntax, it's simply the API of React.Component. Granted, there is still some syntax you need to learn for JSX, but it's very little. If you already know HTML's syntax, the only new things I can think of are the curly braces for using JS expressions as prop values (you also need to know what a JS expression is, lest you try to use an if statement)…

I think you misunderstand. The names are unrelated to React as well, they are native. Defined by the same standards bodies that define JavaScript itself, implemented by the browsers themselves. On a blank HTML page that includes neither React nor anything else, the line `document.body.className = "foo";` sets the body's class to "foo". (And `document.body.class = "foo";` does not.) All JSX is doing is transforming `…

Good point. I didn't realize that the native DOM properties are also called "className" and "htmlFor". My point still applies though, that this isn't a JSX syntax issue, your point is that it's also not even a JSX-specific semantics issue.

Re: Vue.js vs. React

#395
post #132

We moved away from React to Vue about 8 months ago and everyone on the team is a lot happier. First reason is we hate JSX. It forces you to write loops, conditionals, etc, outside of the markup you are currently writing/reading. It's like writing shitty PHP code without templates. It also forces you to use a lot of boilerplate like bind(), Object.keys(), etc. Another problem with React is that it only really solves o…

> It's like writing shitty PHP code without templates.

I don't think you or your team knows how React works or even PHP.

> Another problem with React is that it only really solves one problem.

You and your team hate React for the wrong reasons. You just simply don't know what React is in the first place. React is not a framework, is more like a view framework, it was never designed to solve routing, models, problems.

Re: Vue.js vs. React

#396

Earlier quoted context omitted.

> It forces you to write loops, conditionals, etc, outside of the markup you are currently writing/reading. I don't get this complaint at all. Between map and ternary expressions, you can get both loops and conditionals in your markup, e.g. {listOfThings.map(thing => thing.isX ? )}

Not to mention that if a section of markup gets too big, you can break that down to it's own method that returns tiny snippets so you can have really simple methods that end up creating the more complex end result i.e. _renderXOrY = (thing) => { return thing.isX ? : } //inside the render method {listOfThings.map(thing => this._renderXOrY(thing))} I personally prefer this because when creating the top level of a compo…

Right, being able to compose, test, structure and develop my HTML in the same way I'm doing it with my application code is for me the main Reason for never wanting to go back to anything that's based on classic string-like templating. The latter always felt as clunky as programming without a proper function abstraction.

Re: Vue.js vs. React

#397

Earlier quoted context omitted.

It's slightly less easy to read than ... But it means you don't have to learn a library's HTML API. Or when you want to loop through myList, but exclude a few particular items... you know how to write that in JS, but have no idea what to do in the mark up language. You could create a filteredList, but it's often not ideal

I cannot really understand how today mixing logic and presentation in JSX is considered a good thing. The first principle when writing complex systems should be to completely separate the logic from the presentation layer. Nowadays people seem happy with intermingled monstrosities like the one shown in the JSX code upstream.

All of the "logic" inside render is _presentational_ logic. What would be a better place for that to go?

Re: Vue.js vs. React

#398

In a way VueJS is "React for those who liked Angular1". I've done many Angular apps. I've done a bit of React (with Reflux & Browserify). I tried moving to React/Redux/Webpack but it's not an easy task to grasp the whole thing. Webpack itself was close to make me throw the towel on side projects. I tried VueJS because of a job interview and quite liked it and got productive really fast thanks to good documentation an…

If I was reading your post 3 months ago, I would completely agree with you. But learning React/Redux and Webpack is not that hard at all, just focus on one and move on to the next. WebPack is dead easy IMO, Redux is just an design concept, but it's easy to implement as well. I think sometimes developers over hype technology and make it sound incredibly hard, when in fact is just isn't.

Re: Vue.js vs. React

#399

Earlier quoted context omitted.

From the beginning of 2009 to the beginning of 2010, Chrome's market share grew from 0.2% to 6.4%, while Firefox's market share grew from 32.1% to 32.9%. Both were eating the dying IE, whose market share slipped from 60% to 50%: https://en.wikipedia.org/wiki/Usage_share_of_web_browsers#W3... Which one do you use now? I remember that when Larry Page granted the Founder's Award to Chrome, there were several TGIF questi…

That what people said about the early growth in windows phones too. I literally remember standing there listening a microsoft rep tell me that 'When you don't have much market share, there's always room for great growth". ...just saying, you can spin the story however you like, but the fact is that Vue currently has a reasonably insignificant market share. Beyond that, all we can do is speculate.

More that 9% and growing at more than 100% per year doesn't seem insignificant at all. Windows phone arrived briefly at just over 3% and then immediately declined. The comparison between vue.js and windows phone doesn't make sense at all.

Re: Vue.js vs. React

#400
post #127

One of the biggest things React has going for it, other than being maintained by Facebook and having a much larger community, is React Native. You can learn one web framework and now also make compelling, real native apps. To me those are both deal makers. Surprised I haven't seen this mentioned more in the thread.

Exactly this. In fact (as someone who only knows Swift for mobile dev) learning React was my first step to get into React-Native, so I can make iOS and Android apps.
Post reply on HN