how do you navigate the js environment

I have been playing with Angular 1 & 2 in the past and never really liked the full MVC aspect of it. I prefer to do most of my business logic and rendering in the backend and enhance the user experience with JS widgets. For the kind of projects I'm doing this seems to be the best compromise between SEO, UX and performance.

From what I read React seemed to be the perfect fit for a view only framework. I started a few small test widgets. First disappointment came when I had to learn that a "Hello World" widget requires the user to download 300kB (~70kB gzipped) of JS. The dependency tree for a hello world widget contains 300+ individual components.

Next I tried to implement a simple contact form widget. In my day job I do PHP mostly with ZF2. I'm used to an excellent form implementation where a basic form just requires some configuration. As the user experience is really improved when forms are validated in the browser I was assuming that would be some prime example where React would shine. I looked at the documentation and had to learn that there is no native form abstraction available. The React documentation basically just offers an implementation example (no validation, no decorators). I then had a look at various form libraries:

https://github.com/prometheusresearch/react-forms I find it a bit tedious that you have to create a custom input component for any input field except a standard text input. I would hope that at least standard elements like textarea, radio and checkbox would be supported out of the box.

https://github.com/christianalfoni/formsy-react I had to learn that ES6 doesn't support mixins anymore. I'm implementing my app using ES6 as I'm just starting out and want to be future proof.

While digging into the ES6 mixin issue I discovered that there are 3 different ways of creating React components.

• const MyComponent = React.createClass({})
• class MyComponent extends React.Component {}
• const MyComponent = props => ();

Most of the form libraries I looked at have been using either the first or the second. I would prefer to have a consistent component creation style in my entire app.

So my question is how do you pick libraries for your projects? Do you simply ignore the libraries that use mixins in an ES6 project? From using PHP Frameworks like ZF2 I'm used to having most of the standard app aspects (forms, db, authentication, ...) at my disposal through a consistent API. With React it seems that I have to rely on inconsistent 3rd party implementations for pretty much everything.