volijs/nestedreact

BackboneJS compatibility layer for React-MVx MVVM framework.

Important notice

NestedReact is the BackboneJS compatibility layer for React-MVx - modern React MVVM application framework. It will be maintained as long as Verizon/Volicon systems will depend in the legacy technologies - BackboneJS Views and jQuery.

If you don't need to reuse BackboneJS Views in your React application - please, switch to ReactMVx.

NestedReact documentation won't be updated. Use React-MVx docs as your primary source of docs.

Features

Feature list consists of all the features of React-MVx v2.x, plus this:

• Gradual transition procedure for backbone applications (Backbone Migration Guide):
  • Complete interoperation with existing Backbone Views allowing you to reuse existing code and avoid upfront application rewrite.
  • Any type of application refactoring strategy is possible - top-to-bottom, bottom-to-top, and random parts at the middle.
  • Support for Backbone events and jQuery accessors in React components simplifies View refactoring.

Documentation

Please, use React-MVx documentation as a primary source of documentation and examples.

Installation and Requirements

It's packed as single UMD, thus grab the module or use npm to install. It has NestedTypes model framework, react, react-dom, prop-types, jquery, and underscore as strong dependencies.

npm install --save-dev nestedreact nestedtypes underscore jquery react react-dom prop-types

Module extends React namespace (without modifying original React), and its safe to use it as a replacement for react.

import React from 'nestedreact'

If you're migrating from backbone-based frameworks such as ChaplinJS or Marionette, you need to do following things to make convergence layer work properly:

• Make sure that frameworks includes nestedtypes instead of backbone.

• On application start, tell nestedreact to use proper base class for the View.

  React.useView( Chaplin.View );

nestedreact's Issues

To anyone interested, React-MVx is released

The best things you liked in NestedReact, free from legacy dependencies like BackboneJS, underscore, and jQuery. Plus new features.

https://volicon.github.io/React-MVx/Getting_Started.html

Unsubscribe from events when receiving new props.

When using listenToProps, situation of props replacement is not handled.

Not critical, cause usually it's not the case. But might be very annoying and strange.

Support for hierarcical local stores.

Since we're finally moving to hierarchical stores architecture, we need to implement support for it in React components (one main global shared store + may be some other stores shared across the pages +local store for each app page extending the main one). We need several things.

1. There's the root component for an application page. The lifecycle of the page local store is really bound to its presence in DOM. Therefore, we either need to declare the store at the component itself or provide it with a reference to existing one. In the first case, it would be beneficial if the component would completely manage the store lifecycle, including I/O (not rendered until I/O is completed).

It's probably the good idea to wrap store management to the separate component. When it's mounted, it fetches itself.

Consider making this component generally I/O aware (capable of simple REST stuff and accepting an I/O promises). That will reduce latency in case of the root page.

2. Nested Store components must process chained store lookups.

3. Think what to do whenever store items are updated. Should the component tree be updated too?
   Should be not worse than dealing with root state. There might be an issue with pureRender, though (it will ignore store updates). Also, there might be an issue with tracking of updates across store hierarchy (should we really track changes for all the store chain items?).

Alternative is to provide the list of the store elements to access and track the changes in.

@define: NestedTypes style type specs for props

Special case for @define

    props: {
        name     : Task.Collection.has.changeEvents( true ), // = undefined, track changes
        selected : Function // = undefined
        className : 'something' // string, default value
    }

Simplified type specs. Options supported:

• generate React.PropTypes for every type mentioned.
• default values for primitive types only.
• .has.changeEvents( 'event1 event2' ) - if specified, track events for specified property and call forceUpdate.

generate default props and propTypes automatically.

ES6 classes support

Hi!
Does NestedReact support ES6 classes? If not, are there corresponding plans?
Thanks!

@define: pureRender : true option

Compile optimized shouldComponentUpdate() function with token comparison according to the @define.props spec.

Backbone Router or React Router?

If starting from scratch and hoping just to use React for views, do you recommend using Backbone's router as well?

Move valuelinks to NestedTypes

Now it's rather looks artificial that links are implemented here.

Upgrade to valuelinks 1.3

• Model links cache needs to be implemented, in the style of new Link.all call.

const link = this.state.linkAll( 'a', 'b', 'c' );

aLink = link.a

It will improve "pure render" optimization, and make the code much cleaner.

Question about state and adding elements to the collection

I have this bit of code based on what I can tell from the TODOMVC is the right way to define state

export default class Entry extends Model {
  default = {
    name: 'test_name'
  }
}

export default class Home extends Component {

  constructor(props) {  // componentWillMount
    super(props);
  }

  state = {
    entries: Entry.Collection,
  }

In the console when debugging (eg in render or in constructor) I notice this.state.entries.add does not exist. this.state.entries.create().add is defined. What would be the proper way to add something to the entries collection? Should I declare

state = {
  entries: Entry.Collection.create()
} 

instead?

@define decorator for ES6 classes

mixins, props, context, state, and autobind support

@define({
    mixins : [ A, B ],
    autobind : 'a b c'
})
class My extends React.Component {
    render(){

    }
}

• mixins must chain lifecycle methods, as React.createClass does
• props, state, autobind, listenToProps, listenToState, and context specs must be merged across mixins.

listenToState declaration doesn't work

1. Mixin can't override value
2. Make sure it support the same features as listenToProps

@define: state and Model specs

NestedTypes state spec

@define({
    state : {
        count : Number
    },

    Model : BaseClass
})
class MyComponent extends Component{
    render(){

    }
}

Important Announcement on Next Release

Hello, everyone.

It took a long time for the next major release, but now we're almost there. There is the major change introduced since this version.

As you probably know, both NestedReact and NestedTypes used to be dependent on underscore and jQuery. Also, NestedTypes contains Backbone compatibility shims and NestedReact contains Backbone View integration layer.

Since the upcoming version, it's gonna be changed.

1. All core functionality of the NestedTypes and NestedReact becomes dependency free and is moved to the Type-R and React-MVx repos respectively.
2. NestedTypes and NestedReact continue its existence as the "legacy technology integration layer". They are heavily used in Volicon/Verizon products and will be supported as long as we get rid of the Backbone Views in our products (which will probably never happen).

There's the problem, though. This release has some breaking changes (and exciting new features, of course) thus it cannot be released without the documentation. And I need help with that (and with programming examples). Anything from the review to contribution will be highly welcomed.

Anyone willing to help please leave the comment here. Thanks.