Declarative UI?

DECLARATIVE UI?

• TELL ME WHAT YOU WANT
• ...I'LL TRY TO DO IT


• VIEW KNOW WHAT NEEDS
• DEFINES HOW UI LOOKS
• CAN DESCRIBE DATA SHAPE

Imperative UI

IMPERATIVE UI

• TELL ME WHAT TO TODO
• ...STEP BY STEP


• SERVER DEFINES DATA SHAPE FOR VIEW
• VIEW DOESN'T KNOW HOW UI LOOKS LIKE

Example app screen

Not so long time ago...

• MVC
• MVP
• MVVM
• MV...
• MV...WHATEVER

NOT SO LONG TIME AGO...

MVW data flow

Underscore template

            
                // EXAMPLE UNDERSCORE TEMPLATE PART I
                <div>
                  <% _.each(categories, function(category) { %>
                    <div>
                      <h2><%= category.name %></h2>
                      <h4><%= category.description %></h4>
                      <div>
                        <% _.each(category.events.edges, function(event) { %>
                          // ...
            
        

Underscore template

            
                // EXAMPLE UNDERSCORE TEMPLATE PART II
                            // ...
                            <h3><%= event.node.name %></h3>
                            <div><%= event.node.description %></div>
                          </div>
                        <% }) %>
                      </div>
                    </div>
                  <% }) %>
                </div>
            
        

MVW App

            
                // MVW EXAMPLE APP
              const DATA = {/* WHATEVER source data*/};
              const View = Backbone.View.extend({
                template: _.template(TEMPLATE),
                render: function () {
                  this.$el.html( this.template(this.model.toJSON()));
                  return this;
                }
              });
              const view = new View({ model: new Backbone.Model(DATA) });
              view.render();
              $('#root').html(view.el);
            
        

MVW example app

Is there a better way?

IS THERE A BETTER WAY?

React!

REACT!

• VIEW LIBRARY
• VIRTUAL DOM
• COMPONENTS BASED
• HIERARCHY ORDER
• LIFE CYCLES AND MORE ...

React data flow

Components

            
                // components.js
                class Category extends React.Component {
                  render() {
                    return <div>
                      <h2>{this.props.category.name}</h2>
                      <h4>{this.props.category.description}</h4>
                      {this.props.category.events.edges.map(({ node }) =>
                        <Event key={node.id} event={node} />
                      )}
                    </div>;
                  }
                }
                class Event extends React.Component {
                  render() {
                    return <div>
                      <h2>{this.props.event.name}</h2>
                      <h4>{this.props.event.description}</h4>
                    </div>;
                  }
                }
            
        

JSX template rendered

            
                // App.js
                import React from 'react-dom'
                import ReactDOM from 'react'
                const DATA = {/* WHATEVER source data*/};
                class App extends React.Component {
                  render() {
                    return <div>
                      {this.props.data.categories.map(category =>
                        <Category key={category.id} category={category}/>
                      )}
                    </div>;
                  }
                }
                ReactDOM.render(
                  <App data={DATA} />,
                  document.getElementById('root')
                );
            
        

React example app

Can we do more?

CAN WE DO MORE?

Relay time!

RELAY TIME!

• FRAMEWORK, DATA LAYER
• HIGHER ORDER COMPONENTS
• HIERARCHICAL CONTAINERS
• SINGLE STORE, CACHE, UNIDIRECTIONAL DATA FLOW
• MUTATIONS, OPTIMISTIC UPDATES AND MORE ...

Relay data flow

Relay example app

RESOURCES

• https://facebook.github.io/relay/
• https://learnrelay.org/
• https://facebook.github.io/relay/prototyping/playground.html#/
• http://graphql.org/learn/

THANKS FOR
LISTENING. QUESTIONS?