Building Calypso-like Applications

@ A Day of REST

Transcript

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