ylem

Easy state management for your React application.

ylem enables the use of simple object-oriented patterns that developers already understand. Simply set properties and modify arrays exactly like you would in plain JavaScript. Your app will automatically re-render when state changes

npm install ylem --save

Get Started with webpack Get Started with StealJS Get started on CodeSandbox

Easy for developers

Removes boilerplate

Faster rendering

Easy for developers of all skill levels to understand.

If you know JavaScript, you already know ylem.

React

Call setState with an updated copy of the old state


// Add new todo
this.setState({
  todos: this.state.todos.concat({
    title: 'Dishes',
    complete: false
  })
});

// Set the first todo as complete
const clone = this.state.todos.slice();
clone[0] = Object.assign({}, clone[0], { complete: true });
this.setState({ todos: clone });

ylem

Update state just like you would any JavaScript object


// Add new todo
this.state.todos.push({
  title: 'Dishes',
  complete: false
});

// Set the first todo as complete
this.state.todos[0].complete = true;

Removes boilerplate

The following implements a simple paginated grid with both React and ylem.

React

With react you must pass around callbacks which will call setState.


class PaginatedGrid extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      limit: 10,
      offset: 20,
      count: 300
    };
  }

  setLimit = (limit) => {
    this.setState({ limit });
  }

  setOffset = (offset) => {
    this.setState({ offset });
  }

  render() {
    const { limit, offset, count } = this.state;

    return (
      <div>
        <NextPrev
          limit={limit}
          offset={offset}
          count={count}
          setOffset={this.setOffset}
        />
        <Grid
          limit={limit}
          offset={offset}
          count={count}
          setLimit={this.setLimit}
        />
      </div>
    );
  }
}

The NextPrev component might look like this:


const NextPrev = ({ limit, offset, setOffset }) => (
  <div>
    <button onClick={() =>
      setOffset( offset - limit );
    }>PREV</button>
    <button onClick={() =>
      setOffset( offset + limit );
    }>NEXT</button>
  </div>
);

ylem

With ylem you pass state to child components which update state directly.


class PaginatedGrid extends ylem.Component {
  constructor(props) {
    super(props);
    this.state = {
      limit: 10,
      offset: 20,
      count: 300
    };
  }

  /* No more callbacks */

  render() {
    return (
      <div>
      	/* Pass state to children */
        <NextPrev paginate={this.state} />
        <Grid paginate={this.state} />
      </div>
    );
  }
}

This whitespace represents code your team didn't have to write.

Now the NextPrev component can set state directly:


const NextPrev = ({ paginate }) => (
  <div>
    <button onClick={() =>
      paginate.offset -= paginate.limit;
    }>PREV</button>
    <button onClick={() =>
      paginate.offset += paginate.limit;
    }>NEXT</button>
  </div>
);

Faster Rendering

yelm is "observing" your state and will automatically re-render your components when anything changes - you never call setState. More importantly, ylem only re-renders your components when something actually changes. This means you never have to implement shouldComponentUpdate or use PureComponent. Humans can never implement shouldComponentUpdate across an entire app as efficiently as a code solution like ylem. This alone will save your team hours of time while increasing your apps consistency and rendering efficiency (for free).

[IMAGE OF RENDERING PERFORMANCE COMPARED TO OTHERS]

Get Started with webpack Get Started with StealJS Get started on CodeSandbox