From PHP first to JavaScript first - The WordPress.com Story

PHP FIRST TO JAVASCRIPTFIRST

THE WORDPRESS.COM STORY

WORDPRESS.ORG WORDPRESS.COM

A LONG, LONG TIME AGOIN THE WORLD OF TECH

SO 3 YEARS AGO

WORDPRESS.COM - CIRCA 2013

CALYPSO

WHY REWRITE?One of the hardest things to do in technology

is disrupt yourself

Matt Mullenweg

SPEED

MOBILE FIRST

MULTI-SITE

CONNECTIONS

OFFLINE

CHANCE TO REINVENT OUR PROCESS

HOW?

1. Learn JavaScript2. ???3. Pro�t!

LEARN FROM OTHER PROJECTS

REST API

LEGACY LINKS

TECH STACK

NO FRAMEWORKS!Almost...

REACT

REDUX

BABEL

WEBPACK

REACT

REUSABLE COMPONENTS

REUSABLE COMPONENTS

<PlanStorageButton sitePlanName="Free" mediaStorage={ { storage_used_bytes: 167503724, max_storage_bytes: 3221225472, } } />

DECLARATIVE VSIMPERATIVE

A PARADIGM SHIFT

DECLARATIVEDESCRIBE HOW THINGS SHOULD BE

IMPERATIVEDESCRIBE HOW THINGS SHOULD CHANGE

AN EXAMPLESave

PHP<!-- Declarative --> <form action="/save"> <input type="submit" id="save-button" value="<?php echo ( saving ? 'Saving...' : 'Save' ); ?>" />

PHP + JQUERY<!-- Declarative --> <button id="save-button">Save</button>

<!-- Imperative --> <script type="text/javascript"> $('#save-button').on('click', function(){ $(this).html('Saving...'); }) </script>

REACTReact.createClass({ render() { <!-- Declarative --> return <button onClick={this.save}> { this.state.saving ? 'Saving...' : 'Save' } </button>; },

<!-- Imperative --> save() { this.setState({saving: true}); }, });

REDUX

REDUX GLOBAL ACTIONS// ... export const SET_ROUTE = '...'; export const SET_SECTION = '...'; export const GUIDED_TOUR_SHOW = '...'; export const GUIDED_TOUR_UPDATE = '...'; export const SITE_DOMAINS_RECEIVE = '...'; export const SITE_DOMAINS_REQUEST = '...'; export const SITE_DOMAINS_REQUEST_SUCCESS = '...'; export const SITE_DOMAINS_REQUEST_FAILURE = '...'; export const SITE_MEDIA_STORAGE_RECEIVE = '...'; export const SITE_MEDIA_STORAGE_REQUEST = '...'; export const SITE_MEDIA_STORAGE_REQUEST_SUCCESS = '...'; export const SITE_MEDIA_STORAGE_REQUEST_FAILURE = '...'; // ...

STATE TREE

=

CHALLENGES

BROWSER SUPPORTIE6?

LAST TWO MAJOR BROWSER VERSIONS

DESKTOP APP

BUNDLE SIZE> 1MB

ERROR HANDLINGTELEMETRY

ADAPTING TO CHANGING TECH

BABELAND ES-FUTURE

// :( var sum = function( a, b ) { return a + b; }

// :) const sum = ( a, b ) => a + b;

BABELAND ES-FUTURE

// :( var Paragraph = React.createClass({ render: function() { return <p>{ this.props.text }</p>; }, });

// :) const Paragraph = props => <p>{ props.text }</p>;

FLUX⬇

REDUX

LEFT-PADfunction leftpad (str, len, ch) { str = String(str);

var i = -1;

ch || (ch = ' '); len = len - str.length;

while (++i < len) { str = ch + str; }

return str; }

OPEN SOURCEgithub.com/Automattic/wp-calypso

Jordan West

@jordwest

automattic.com