from php first to javascript first - the wordpress.com story
TRANSCRIPT
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