wordpress react - bit swapping · animations localstorage. ios human interface guidelines “the ui...

42
WordPress + React

Upload: others

Post on 25-Sep-2020

4 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

WordPress + React

Page 2: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

@gcorne @matias_ventura

Matías VenturaGregory Cornelius

WordCamp US 2015

Page 3: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

What is the future of WP Admin?

Page 4: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

WordPress 2.0 “Duke” (2005)

Page 5: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

HTML5 CSS3

pushState

Animations

localStorage

Page 6: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

iOS Human Interface Guidelines

“The UI helps people understand and interact with the content, but never competes with it.”

*

Page 7: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

Speed

Page 8: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

[ 2015 WordPress Editor Screenshot ]

WordPress 4.3.1 “Billie” (2015)

Page 9: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

Om Malik

“…in the past WP hadn’t done a good job of building the real-time experience that we as

modern web customers have come to expect.”

*

Page 10: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with
Page 11: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with
Page 12: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with
Page 13: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

A declarative view layer written in pure JavaScript that simplifies the process of

building complex UIs.

Page 14: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with
Page 15: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

{ Calypso }

developer.wordpress.com/calypso

Page 16: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with
Page 17: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

Single-Page App

Written in JavaScript

Driven by WP.com REST API

Page 18: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with
Page 19: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with
Page 20: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

Editor UI States

Page 21: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with
Page 22: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

Small API that is easy to learn.

No need for a separate template language. Embrace JavaScript.

Events are bound as element properties which limits need for DOM traversal.

Composition of components is simple and first-class.*

***

React key features

Page 23: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

Just Render() React will be smart about updating the DOM.

Page 24: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

const DOMNode = document.getElementByID( 'hello-container' );

function HelloMessage( props ) { return React.DOM.h3( null, props.name ); }

ReactDOM.render( React.createElement( HelloMessage, { name: 'Hello, World!' } ), DOMNode ); // DOMNode.innerHTML = '<h3>Hello, World!</h3>'

ReactDOM.render( React.createElement( HelloMessage, { name: 'Hello, World!' } ), DOMNode ); // no DOM operations

ReactDOM.render( React.createElement( HelloMessage, { name: 'Howdy, Matías' } ), DOMNode ); // DOMNode.firstChild.textContent = 'Howdy, Matias';

see http://codepen.io/gcorne/pen/meNWPP

Page 25: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

{ functions > template language }

const HelloComponent = React.createClass({ render() {

return React.DOM.div( { className: 'hello' }, React.DOM.h3( null, 'Hello, World!' ) ); } });

ReactDOM.render( React.createElement( HelloComponent ), document.getElementById( 'hello-container' ) );

see http://rauchg.com/2015/pure-ui/

Page 26: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

const HelloComponent = React.createClass({ render() { return ( <div className="hello"> <h3>Hello, World!</h3> </div> ); } });

ReactDOM.render( <HelloComponent />, document.getElementById( 'hello-container' ) );

see http://codepen.io/gcorne/pen/MaNmWd

Increase readability via the JSX syntax extension

Page 27: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

Compilation (Webpack+Babel)

JavaScript Modules

(ES6+JSX)

Compiling JSX

build.js

Page 28: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

export default React.createClass( { getInitialState() { return { showPreview: false }; }, showPreview() { this.setState( { showPreview: true } ); }, render() { return ( <div className="post"> { this.state.showPreview && <Preview post={ post } /> } <span className="post__date">{ this.props.post.date }</span> <h4 className="post__title"> <a className="post__title-link" href={ this.props.post.URL }> { this.post.title || '(no title)' } </a> </h4> <button onClick={ this.showPreview }>Preview</button> </div> ); } } );

Page 29: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

Why do components

matter?

Page 30: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

HTML (form)

JavaScript (feature A)

CSS

JavaScript (feature B)

JavaScript (feature C)

JavaScript (feature D)

JavaScript (feature E)

Progressive Enhancement

Page 31: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

Component (feature A)

HTML

JavaScript

CSS

Components

Component (feature B)

HTML

JavaScript

CSS

Component (feature C)

HTML

JavaScript

CSS

Component (feature D)

HTML

JavaScript

CSS

Page 32: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

JSX + Sass

Page 33: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

Live components gallery

Page 34: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

<Site>

<Sidebar> <SitePopover>

<EditorGroundControl>

Composition

Page 35: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

<Site>

Components begin to define app level semantics.

NATIVE HTML

<header>APP

Page 36: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

Defines a language that transcends the medium, one which can be applied to mobile, the web, and desktop.

Page 37: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

This is just the beginning…

github.com/Automattic/wp-calypso

Page 38: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

Using React in Plugins & Themes

Page 39: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

{ WP React Boilerplate }

github.com/gcorne/wp-react-boilerplate

Page 40: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

Library of WP UI components?

A new WP Admin UI powered by components?

React Native WordPress apps that are pluggable and accessible to more contributors?

How do plugins look when they can be API focused, client focused, or both?

***

Thoughts

*

Page 41: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

Install Calypso and play around with it.

If you consider yourself a PHP developer that knows jQuery, consider investing in learning more JavaScript.

Try dipping your toes in the water using React for something.

Take a look at React Native.

****

do()

Page 42: WordPress React - bit swapping · Animations localStorage. iOS Human Interface Guidelines “The UI helps people understand and interact with the content, but never competes with

Thank you.

@gcorne @matias_ventura

Matías VenturaGregory Cornelius