Inferno: Add boilerplate for Inferno with Mobx/Modx-Inferno

[vinej]

If people are interested to try Inferno with Mobx, I created a boilerplate with a todo example

see: https://github.com/vinej/inferno-remux

Thanks

[trueadm]

@vinej awesome stuff :) thank you for this!

[vinej]

The name of the starter changed

inferno-mobx-remux-starter
see: https://github.com/vinej/inferno-remux
Welcome to Inferno Mobx ReMux Starter

The boilerplate give you a minimum example to use Inferno with Mobx with the ES6 syntax
Also, you have the minimum implementation of the 'ReMux' flux pattern

• ReMux stand for : Resolver Mobx Flux pattern

With 'ReMux' you have a very simple way to implement the following pattern

• component => action => resolver => store => component
  
  
  
  • components receive a store as props (the state of the component)
  
  
  • components use the store in read only mode
  
  
  • components dispatch actions to apply modifications to the store (the state)
  
  
  • resolvers resolve actions and call stores
  
  
  • stores are observable with the Mobx @observable decorator
  
  
  • Mobx refresh the components with the @observer decorator
  
  
  • resolvers could be also middlewares to do something with the action before/after calling the stores
  
  
• TRY IT, IT'S VERY SIMPLE THIS WAY

[trueadm]

@vinej can you confirm everything works okay with 0.7.14? Thanks.

[vinej]

For my example, yes I updated the example with the version 0.7.14 and every thing is working fine.

But there is still an error with 0.7.14 and 0.7.6 plugin for JSX.

• if the event is all lowercase, is working ; onblur
• but if the event is in camel case, is not working : onBlur

I used a dev version and this correction was ok, maybe it has not been merged ?

the { ...props } bug is corrected

class Input extends Component {
  handleBlur() {
    console.log('blur')
  }

  render() {
    const props = {
      onBlur: this.handleBlur
    }
    return (<input {...props} />);
  }
}

[trueadm]

@vinej Do you have the latest babel-plugin-inferno too? Can you see if that helps with your issue with onBlur -> onblur. Thanks :)

[vinej]

Yes, I redo the test with a new install and latest versions and the "onblur" is working but not the "onBlur"

Ex: both events are not working with the following example. If you define the event in lowercase, both are working

class Input extends Component {
  onBlur() {
    console.log('blur')
  }

  onChange() {
    console.log('change')
  }

  render() {
    const props = {
      onChange: this.onChange
    }
    return (
      (<input { ...props } onBlur={ this.onBlur } />)
    )
  }
}

export default class Todos extends Component {
  render() {
     return ( 
       <div>
          <Input />
        </div>
      )
   }
}

Thanks

[capaj]

@vinej your boilerplate is not rendering with inferno but with react. Is there something I am missing?

[vinej]

The latest version of the boilerplate use the 'inferno-compat' package. With this package you don't have to change your code to use Inferno. Only the files 'package.json' and 'webpack.config.js' are different. Then you are really using Inferno even if the imports are with React. The 'webpack.config' contains aliases to use Inferno

resolve: {
    alias: {
      'react': 'inferno-compat',
      'react-dom': 'inferno-compat'
    }

 plugins.push(
    new webpack.ProvidePlugin({
        'Inferno': 'react'
    })
  );
  },

Why do that : The generated bundle.js file with Inferno is 2x smaller than React and probably faster.

For the 2 repo with exactly the same code
inferno-remux : 177kb minimized
react-remux : 355kb minimized

Thanks

[capaj]

@vinej wow this is awesome. Now excuse me, I've got couple repos to migrate...

[capaj]

@vinej well I tried it, but I got an error when running my project:

Uncaught Error: Cannot find module "react/lib/ReactMount"

DO you know what this could be about?

[trueadm]

That's likely to be due to React hot-reloaded. It attempts to access some core React modules directly. It's a very difficult thing to handle. Ideally I need to make an Inferno hot reloading module to use instead.

[capaj]

@trueadm I can confirm. After removing a 'react-hot' it works. There is one small bug I have noticed though, so I won't be transitioning to inferno just yet.

I have an input with onKeyDown handler and this handler does not seem to work alright with inferno. Weirdest thing is that when I put a breakpoint there in the handler, it works just fine.
I would not be too surprised if this was some bug in inferno reconciliation of elements. Hopefully not and I am doing something wrong. Will be investigating further over the weekend.

[trueadm]

@capaj This might be a bubbling issue. React has its own bubbling system whilst Inferno uses the native event system. Although, if the event is firing okay, what is the logic in the event? Is it setting state? Would be good to fix this if this is a bug :)

[capaj]

@trueadm yes it is setting a state of the component.

[capaj]

@trueadm I got it now-it was a textarea input element which in react sends events on each keystroke, whereas in inferno, onChange is only invoked when textarea loses focus.
This cam be easily worked around by hooking into onKeyUp event instead, but it is one more thing to look out for when using inferno instead of react.

[trueadm]

@capaj Ah yes, the infamous custom onChange that React uses. Sorry, I thought you were using onKeyDown and onKeyUp, which should work great in all modern browsers. In older versions of Inferno we also had a similar synthetic event system, but we scrapped it to keep size down and improve performance. I do wonder if we should revisit this topic if others are having issues.

[capaj]

@trueadm great to hear that. I think it would be nice to have synthetic events included in inferno-compat. That is what people use when migrating existing react project to inferno.

When starting a new project, I don't need it. IMHO browser events are consistent enough in the browsers for couple of years already. It's better to work with the underlying DOM events directly.

[trueadm]

@stasnadol19856972 Sorry, what do you mean?

[ghost]

@trueadm Any updates to possibly bringing synthetic events back (at least in compat)? It really simplified development on React. Thank you.

[trueadm]

@thinkpadder1 I'm not sure about core. It might be something for compat. I've been asked this a lot recently too, even by people at Facebook. I need to spend some proper time investigating the level of effort, the affect on performance etc of doing such a thing. It won't be in for 1.0, maybe a later version though.

[capaj]

@trueadm just going by my gut feeling, I too think putting it into inferno-compat is for the best. Inferno should not try too much to do everything react does. That is what inferno-compat lib is for.

[trueadm]

@capaj I completely agree. Not everyone wants or needs the features that React offers. Inferno 1.0 will refine many parts of the API that people had issues with before, but I don't want to see synthetic events being a core feature – more an addition when using inferno-compat like you say.

[svenanders]

Just noticed Inferno last week and have been playing with it this weekend. Absolutely love it, and part of it is the small surface area. I also agree that synthetic events doesn't belong in the core.

I built a demo comparing React/MobX with Inferno/MobX and noticed that the React version gets non-responsive after scrolling, while the Inferno version keeps up noticeably better. Pretty exciting :)

[trueadm]

@svenanders awesome to hear :)