Switch to use React

[dtinth]

Why I switched from Ractive to React

First... Ractive does not support emitting advanced event from components. Even though we emit simple events, the context property of the event is incorrect. This is a big no for this project as I try to componentize the UI.

Second, as we are using separate template file written in another language, which has to go through processing chain, dealing with a single component requires editing many files. React's JSX unifies JavaScript and HTML and is natively supported by Babel.

Third, React seems more popular and a more stable choice for us. We want to depend on more stable stuff.

[akibot]

Hello! Thank you for sending us patches!

I am an automated bot to lint pull requests to detect potential errors and check for consistent coding style, and I found some problems with your code submission in the commit 1d780b99b4b2ccd7bd8bbffd8d9617566b13c155:

• src/game/ui/game-shell-scene.jsx
  • line 16, col 24: Script URL is a form of eval. (no-script-url)
  • line 20, col 42: Expected '===' and instead saw '=='. (eqeqeq)
  • line 28, col 26: Script URL is a form of eval. (no-script-url)
  • line 59, col 11: e is already declared in the upper scope. (no-shadow)
  • line 69, col 12: e is defined but never used (no-unused-vars)
  • line 128, col 56: Expected '===' and instead saw '=='. (eqeqeq)

Please fix these problems, rebase your commits, then leave a comment here so that a human can further review your patch.

As an additional step to prevent future lint errors, please run npm lint before committing. A Git pre-commit hook is available.

[guilhermeaiolfi]

It seems that the decision was already made. But just to be clear about the second point, ractive has this concept: https://github.com/ractivejs/component-spec/. That's what I'm using in my projects and it's great.

For the first argument, yes, unfortunately. But I think it won't take to long for them to add it.

Agree that popularity is important, but when you compare the two, that's about the only thing that stand out. For me, react components are ugly as hell. Its readability is the worst. And that's by design.

[dtinth]

Hello. Thanks for your comment.

I just knew about the component spec (https://github.com/ractivejs/component-spec/), and I find that beautiful. It gives the feeling as when I was using Polymer. That, I think, is the ideal way to create components. I might try using that next time.

Ractive's docs isn't quite clear about how to componentize the application. Actually, the Components section is the last thing in the docs before the API Reference. React, on the other hand, forces you to start thinking in components from the tutorial.

While I was using Ractive, I listen for events in the component deep down in the tree. This gives me a lot of productivity of not having to wire stuff up myself. When I switched to React, I found that it doesn't have a way to dispatch a custom event from a React component, and have it bubble. The React way is to pass a callback function all the way to the component. I found that this brings even more clarity to the code, making it less “magic.”

I agree about ugliness of React components, as that's also my first reaction when I saw React! That's why I tried to avoid React and try to use Ractive at first. But when I actually get to use React and JSX, it wasn't as bad as I thought. The best thing is that it integrates nicely with Webpack and Babel.

Now, in this project, a React component has 2 files. First is the JSX file:

import './my-component.scss'
import React from 'react'
import OtherComponent from './other-component'

export default React.createClass({
  render() {
    return <div className="my-component">
      <div className="my-component--wrapper">
        <OtherComponent />
      </div>
    </div>
  }
  // ...
})

Second is the SCSS file, which is imported from the first file automatically.

.my-component {
  // style & layout
  &--wrapper {
    // style & layout
  }
  .other-component {
    // layout
  }
}

I found this pleasant enough to work with. I also have a method of making sure that the CSS classes for the components do not clash with each other (using rules similar to BEM). I didn't write it down yet, but it makes styling these components painless.

As for Ractive, I still think it is a great project. I hope that Ractive will improve in terms of clarity of how to think of the application. When opportunity comes, I hope to use Ractive again, using components the Ractive way.