react-case-study-presentation

What is React?

React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC.

We built React to solve one problem: building large applications with data that changes over time.

Why React - Facebook

How does it work?

Pros

"We built React to solve one problem: building large applications with data that changes over time."

Simple

Simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes.

Declarative

When the data changes, React conceptually hits the "refresh" button, and knows to only update the changed parts.

Build Composable Components.

React is all about building reusable components. In fact, with React the only thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy.

Just the V in MVC

React does one thing very well, it manages updating the state of the view. Because you can just use this, it is Relatively easy to integrate into other frameworks.

Popularity

Support from some of the largest companies in the valley and a thriving open-source community. Support continues to grow for it every day.

Server Side Rendering

Since react is able to represent the DOM virtually, it is able to render app state server side and be able to then take the current UI state and manage it as a SPA after the client has loaded. This allows for better SEO, performance and progressive enhancement.

Developer Productivity

Because of the large amount of tooling that supports react, and the focus on simplicity in build react components, it can make building large applications much easier for developers.

Integration Ideas

Use React Components in Backbone View Classes

export default BaseView.extend({
    initialize(options = {}) {
        this.head = options.head || [];
        this.rows = options.rows || [];
        this.sort = options.sort || true;
    },
    render() {
        ReactDOM.render(
            <Table data={ this.mapToData() } sortable= { this.mapToSort() } />,
            this.el
        );

        return this;
    }
});

Use React Components as View Class

function mapStates() {
    _appContext.stateViewMap
        mapState(States.ALL.STATES)
        .toView(ReactComponent)
}

Using redux in new "apps"

// App an non-backbone responder to the initialize
// Add redux store for data with adapter for backbone
let _initialized = false;
let _injector;
let _njs;
let _appContext;

class GettingStartedApp extends Component {
    render() {...}
}

class GettingStartedRoot extends Component {
    render() {
        return (
            <Router history={this.props.history}>
                <Route path='/' component={GettingStartedApp}>
                    ...
                </Route>
            </Router>
        );
    }
}

export function init(injector) {
    if (_initialized) {
        return;
    }
    _injector = injector;
    const urlSyncer = _injector.getInstance('urlSyncer');
    urlSyncer.dispose();
    const njs = injector.getInstance('njs');
    _appContext = _injector.getInstance('appContext');
    render(<GettingStartedRoot history={njs.history}/>, document.querySelector('[data-app-buffered]'));
    _initialized = true;
}