Vue.js vs. React (vuejs.org)

I need a framework where any experienced JavaScript developer can pick up the project and deliver working product in a week. With Ember/Angular/React+Redux, I have to hunt for a developer that specializes in that particular framework. With Vue, the hiring pool is vastly larger.

The rest of the site is pretty basic granted. Maybe it's not a great example, but it's the sort of thing that could have easily become unmaintainable in the old days as features were added quickly, but React and the component model (and MobX) made it much more manageable even as I hacked things in last minute ;)

Once you do click it, I'd say the complexity of the site becomes more clear.

Or maybe my reference point for "complexity" is just low.

Regardless, very cool site. Nice work!

Given the target audience (graphic designers, the vast majority of whom are on Mac and will use Safari or Chrome, as I validated from stats on other sites I've built), the decision was made to focus work on the type tester on those browsers.

The rest of the site should still be accessible with any browser, but we decided it was better to not show the type tester at all than have a broken experience (which was the situation with Firefox).

Anyway, hopefully that justifies it somewhat - I think it was the right decision all things factored in. There's a lot of CSS trickery/hackery to make the type tester work (native support for advanced typography stuff is poor) so making it x-browser wasn't easy. The messaging to users of other browsers could probably be improved though :)

As mentioned in my other comment, due to the target audience it was decided that it wasn't worth the investment to get it working on other browsers right now, but the rest of the site should still work.

Not React's fault, just a lack of time/budget and a lack of native browser support for advanced typography.

Personally, I develop Firefox-first and then work on compatibility for lesser browsers like Chrome and Safari.

Of course things have been complicated a bit now that Firefox Focus is out and uses Webkit...

Type checking for props and state inside the <script> tags is fully supported: https://vuejs.org/v2/guide/typescript.html

If you want type checks for inline <template> code (which isn't suitable for anything non-trivial, you should use computed properties or methods instead), see https://github.com/DanielRosenwasser/typescript-vue-tutorial

If you are using uncompiled components (newbies using script embeds) with no build step at all, there are clearly no compile time checks. IMO this is why Vue is significantly more newbie friendly.

For the library-depth spidey sense, there's really no getting around that. In a way, as React itself is just the view library, you're forced to add new pieces to your app until it all clicks together. Kea is just one more of these pieces... And I wrote it so the other ones would click together. The alternative to abstracting libs like that is to write and bundle everything yourself, but that is a hard and, in this case, unnecessary path to take.

Two of the libraries it abstracts (redux and reselect) are as stable as a rock. There have been no breaking changes for many major releases. The third one, redux-saga, is a bit more brittle, but as it gets passed direct control over its domain, I don't see how kea would break anything there, at least not in the near future.

Of course I'll do my best to keep up with new releases of all dependencies. I do have a few apps with Kea that I actively maintain.

There's still the chance that Kea itself will change drastically. I hope not. I'm actually trying to stabilise the API for a 1.0 release.

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 questions saying "Isn't it premature? Chrome's market share is only 5%, and the vast majority of web users have barely even heard of it."

Larry's response was "In my mind, Chrome has already won," and in hindsight, this is probably what he was referring to. When a large number of users are flooding into a brand new product, even though there's already an alternative that's pretty good on the market and still growing, that usually means that the new product fills some burning need or deficiency that existing alternatives don't. That comparison will continue to hold unless competitors address it. That's why investors look so heavily at growth rates: if you're growing 15x faster than your competitors, you're probably going to end up with the whole market, given enough time.

That may not be a true leading indicator of adoption, but it is hard to argue it isn't an indicator of increased interest.

I see React and Vue as tools for scratching very specific itches: fast DOM manipulations and databinding that actually works. React was this, then it grew and grew and grew. Vue is threatening to move away from this.

Also, still pissed that my year-and-a-half old react code is now hopelessly out of date, and requires updating (guess what, I'll be porting it to vue instead). That is bullshit.

You still have to understand html inside weird jsx code...

  {' '}

   <button :disabled="isButtonDisabled">Button</button>
   <div :id="'list-' + id"></div>
   <form @submit.prevent="onSubmit"></form>
   <a @click="doSomething"></a>

For the Angular 1 project, I'm thinking as a stepping stone we could introduce JSX templates before migrating to Vue or React later.

it's just less coding and boilerplate if anything.

vue also optimizes your reactive codes and is faster in many cases. react can get pretty slow and heavy if you don't know what you are doing and trying to debug those situations can get pretty hairy. otoh, i've not seen any similar issues with vue. what vue does with the bindings is really neat.

   <button :disabled="isButtonDisabled">Button</button>
   <div :id="'list-' + id"></div>
   <form @submit.prevent="onSubmit"></form>
   <a @click="doSomething"></a>

@click="say_something('hello')"

new Vue({ methods: { say_something (str) { ... } } })

2) : is just a shorthand for v-bind (ie; v-bind:disabled="is_disabled()" is aliased by :disabled="is_disabled()"). and this basically allows you to run pure javascript code inside of it.

3) the only other syntax to know is, v-for and v-if, but thats pretty self explanatory i believe.

<h3 v-if="user.name">{{name}}</h3>

<h3 v-if="!user.name">What is your name?</h3>

<h3 v-if="user.role == 'admin" && user.name == 'james'>hello super user {{name}}</h3>

i like this approach more than JSX where you have several if else clauses mixed into your HTML. it's kind of like pattern matching if you like that sort of thing.

or you can simply do <h3>{{some_message()}}</h3> and just handle the logic inside the some_message() method.

https://ssr.vuejs.org/en/streaming.html

Thanks for pointing out that it has it.

  { do {
    if (condition_expression) {
      template_evaluation
    }
  }}

2. Again, this was basically just a choice for the example. The spinner could be defined in a module and imported/registered locally. Codepen/JSFiddle just isn't the greatest place for that kind of example.

3. Scoped slots are a way for a component to expose internal data to elements contained in a slot (content thats contained within the component but defined by it's parent). I agree, its initially one of the more confusing concepts in Vue.