Slide 1
Slide 1 text
BUILDING
CALYPSO-LIKE
APPLICATIONS
Slide 2
Slide 2 text
TODAY
▸ What did we learn when building Calypso
▸ How can it help you build similar applcations
Slide 3
Slide 3 text
WHAT IS CALYPSO?
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
HTTP://WORDPRESS.COM/
Slide 6
Slide 6 text
https://github.com/Automattic/wp-calypso
Slide 7
Slide 7 text
CALYPSO GOALS
Slide 8
Slide 8 text
0. BETTER USER
EXPERIENCE
Slide 9
Slide 9 text
1. FASTER
PRODUCT
ITERATION
Slide 10
Slide 10 text
2. BETTER
DEVELOPER
EXPERIENCE
Slide 11
Slide 11 text
HOW DOES
CALYPSO
WORK?
Slide 12
Slide 12 text
OPEN
WORDPRESS.COM?
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
WEBPACK
Slide 15
Slide 15 text
Slide 16
Slide 16 text
A USER VISITS A
(NEW) URL
Slide 17
Slide 17 text
page( '/me', controller.sidebar, controller.profile );
page( '/me/account', controller.sidebar, controller.account );
Slide 18
Slide 18 text
WE RENDER A
REACT
COMPONENT
Slide 19
Slide 19 text
COMPONENT
=
HTML + JS
Slide 20
Slide 20 text
BUT THE DATA?
Slide 21
Slide 21 text
WORDPRESS.COM
REST API
Slide 22
Slide 22 text
WP.COM REST API V2
===
WP-API
Slide 23
Slide 23 text
wpcom.js
Slide 24
Slide 24 text
FETCHING IN CONTROLLER
Slide 25
Slide 25 text
DUMB
Slide 26
Slide 26 text
render: function() {
const size = this.props.size;
if ( ! this.props.user ) {
return ;
}
const alt = this.props.alt || this.props.user.display_name;
const avatarURL = this._getResizedImageURL( safeImageURL( this.props.user.avatar_URL ) );
return (
);
}
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
{this.props.post}
Slide 29
Slide 29 text
SMART/CONNECTED
CONTAINERS
Slide 30
Slide 30 text
STORES/GLOBAL STATE
▸ Users
▸ Posts
▸ Fetch Errors
Slide 31
Slide 31 text
USER ACTIONS
Slide 32
Slide 32 text
export function requestSitePosts( siteId, query = {} ) {
return ( dispatch ) => {
dispatch( {
type: POSTS_REQUEST,
siteId,
query
} );
return wpcom.site( siteId ).postsList( query ).then( ( { found, posts } ) => {
dispatch( receivePosts( posts ) );
dispatch( {
type: POSTS_REQUEST_SUCCESS,
siteId,
query,
found,
posts
} );
} ).catch( ( error ) => {
dispatch( {
type: POSTS_REQUEST_FAILURE,
siteId,
query,
error
} );
} );
};
}
Slide 33
Slide 33 text
FLUX
Slide 34
Slide 34 text
REUSABLE
COMPONENTS
Slide 35
Slide 35 text
https://wpcalypso.wordpress.com/devdocs/design
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
THERE’S MORE…
Slide 38
Slide 38 text
!!!
Честит рожден ден, Ю.
Slide 39
Slide 39 text
WHAT’S IN IT FOR
YOU?
Slide 40
Slide 40 text
DO YOU NEED A
SINGLE-PAGE
APP?
Slide 41
Slide 41 text
▸ A lot of user interaction
▸ Quick transitions
▸ Multiple front-ends (web, mobile, desktop)
▸ Skill: JavaScript
▸ Skill: new type of architecture
Slide 42
Slide 42 text
CHOOSING
TECHNOLOGY
Slide 43
Slide 43 text
EMBER
Slide 44
Slide 44 text
ANGULAR
Slide 45
Slide 45 text
REACT + FRIENDS
Slide 46
Slide 46 text
UNDERSTANDING
Slide 47
Slide 47 text
UNI-DIRECTIONAL
WORKFLOW
Slide 48
Slide 48 text
→
Slide 49
Slide 49 text
PROJECTS
AROUND REACT
Slide 50
Slide 50 text
REDUX
Slide 51
Slide 51 text
http://redux.js.org
https://egghead.io/series/getting-started-with-redux
Slide 52
Slide 52 text
REACT ROUTER
Slide 53
Slide 53 text
FOMO
Slide 54
Slide 54 text
FUN
Slide 55
Slide 55 text
Q?
EXTRAPOLATE.ME
@NIKOLAYB