Friendly Forms with React and MobX

Why I am here?

Kristijan Ristovski

(kitze)

Alexander Solovyov

(piranha)

You have made something, and it works. You find it awesome, but still not sure if this is right...

React Alicante 2018

Go and tell how to use it...                                                                            

Somewhere, someday  2018

Viktor Shevchenko

Engineering Manager at GlobalLogic

@vict-shevchenko

@vict_shevchenko

@victorshevchenko

What I want to talk about?

  • Problem

  • Solution

  • Insights

Forms

are complex...

Forms in React

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {firstName: ''};
  }
  handleChange = (event) => {
    this.setState({firstName: event.target.value});
  }
  render() {
    return (
      <form>
        <label>
          Name:
          <input type="text" value={this.state.firstName} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Forms in React

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: '', age: ''};
  }
  handleNameChange = (event) => {
    this.setState({name: event.target.value});
  }
  render() {
    return (
      <form>
        <label>
          Name:
          <input type="text" value={this.state.name} onChange={this.handleNameChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}
          <input type="text" value={this.state.age} onChange={this.handAgeChange} />
  handleAgeChange = (event) => {
    this.setState({age: event.target.value});
  }

🤬

  handleChange = (event) => {
    this.setState({[event.target.name]: event.target.value});
  }
          <input type="text" name="name" value={this.state.name} onChange={this.handleChange} />
          <input type="text" name="age" value={this.state.age} onChange={this.handleChange} />

Forms in React

Complexity comes from

  • No internal solution to handle forms

  • Lack of documentation

  • One way data binding

  • Many manual repeatable operations 

What we need

  • easily accessible form data

  • possibility to create nested forms

  • validation of form fields

  • custom handlers and data processing

  • developed fast and remain readable

  • optimized performance

Idea

To develop a form management library with built-in validation for React and MobX applications in TypeScript

Solution

At first,​ there was an

Reactive-MobX-Form

npm install reactive-mobx-form

Features

  • low entry barrier

  • scalable

  • incremental adoption

  • preferable over own solutions

  • optimistic performance

  • backed by solid solutions

  • fun to develop with

Prerequisites

  • Know the market and competitors

  • Learn a background

  • Select audience

  • Find a solid amount of time

  • Think of early adopters

Recommendations

  • Find a niche

  • Stay motivated

  • Relay on solid tools

  • Don't reinvent a wheel

  • Cover 80% of cases

  • Work on documentation

  • Be active in community

Should I write own solutions and opensource them?

https://github.com/vict-shevchenko/reactive-mobx-form

Thank you!

Reactive MobX Form

By Viktor Shevchenko

Made with Slides.com

Reactive MobX Form

  • 1,395

More from Viktor Shevchenko