Building Calypso-like Applications

@ A Day of REST

Transcript

1. BUILDING
   CALYPSO-LIKE
   APPLICATIONS
   

   View Slide

2. TODAY
   ▸ What did we learn when building Calypso
   ▸ How can it help you build similar applcations
   

   View Slide

3. WHAT IS CALYPSO?
   

   View Slide

4. View Slide

5. HTTP://WORDPRESS.COM/
   

   View Slide

6. https://github.com/Automattic/wp-calypso
   

   View Slide

7. CALYPSO GOALS
   

   View Slide

8. 0. BETTER USER
   EXPERIENCE
   

   View Slide

9. 1. FASTER
   PRODUCT
   ITERATION
   

   View Slide

10. 2. BETTER
    DEVELOPER
    EXPERIENCE
    

    View Slide

11. HOW DOES
    CALYPSO
    WORK?
    

    View Slide

12. OPEN
    WORDPRESS.COM?
    

    View Slide

13. View Slide

14. WEBPACK
    

    View Slide

15. 
    
    
    

    View Slide

16. A USER VISITS A
    (NEW) URL
    

    View Slide

17. page( '/me', controller.sidebar, controller.profile );
    page( '/me/account', controller.sidebar, controller.account );
    

    View Slide

18. WE RENDER A
    REACT
    COMPONENT
    

    View Slide

19. COMPONENT
    =
    HTML + JS
    

    View Slide

20. BUT THE DATA?
    

    View Slide

21. WORDPRESS.COM
    REST API
    

    View Slide

22. WP.COM REST API V2
    ===
    WP-API
    

    View Slide

23. wpcom.js
    

    View Slide

24. FETCHING IN CONTROLLER
    

    View Slide

25. DUMB
    

    View Slide

26. 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 (
    
    );
    }
    

    View Slide

27. View Slide

28. 
    {this.props.post}
    
    
    
    

    View Slide

29. SMART/CONNECTED
    CONTAINERS
    

    View Slide

30. STORES/GLOBAL STATE
    ▸ Users
    ▸ Posts
    ▸ Fetch Errors
    

    View Slide

31. USER ACTIONS
    

    View Slide

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
    } );
    } );
    };
    }
    

    View Slide

33. FLUX
    

    View Slide

34. REUSABLE
    COMPONENTS
    

    View Slide

35. https://wpcalypso.wordpress.com/devdocs/design
    

    View Slide

36. View Slide

37. THERE’S MORE…
    

    View Slide

38. !!!
    Честит рожден ден, Ю.
    

    View Slide

39. WHAT’S IN IT FOR
    YOU?
    

    View Slide

40. DO YOU NEED A
    SINGLE-PAGE
    APP?
    

    View Slide

41. ▸ A lot of user interaction
    ▸ Quick transitions
    ▸ Multiple front-ends (web, mobile, desktop)
    ▸ Skill: JavaScript
    ▸ Skill: new type of architecture
    

    View Slide

42. CHOOSING
    TECHNOLOGY
    

    View Slide

43. EMBER
    

    View Slide

44. ANGULAR
    

    View Slide

45. REACT + FRIENDS
    

    View Slide

46. UNDERSTANDING
    

    View Slide

47. UNI-DIRECTIONAL
    WORKFLOW
    

    View Slide

48. →
    

    View Slide

49. PROJECTS
    AROUND REACT
    

    View Slide

50. REDUX
    

    View Slide

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

    View Slide

52. REACT ROUTER
    

    View Slide

53. FOMO
    

    View Slide

54. FUN
    

    View Slide

55. Q?
    EXTRAPOLATE.ME
    @NIKOLAYB
    

    View Slide