Building Calypso-like Applications

Building Calypso-like Applications

@ A Day of REST

75fb365927cb3f5f7b677682d6249406?s=128

Nikolay Bachiyski

January 28, 2016
Tweet

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?

  4. None
  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?

  13. None
  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 } /> ); }
  27. None
  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

  36. None
  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. PROJECTS AROUND REACT

  49. REDUX

  50. http://redux.js.org https://egghead.io/series/getting-started-with-redux

  51. REACT ROUTER

  52. FOMO

  53. FUN

  54. Q? EXTRAPOLATE.ME @NIKOLAYB