WordCamp Kansai 2016: Why WordPress.com Chose JavaScript-First Approach.

This is a talk from WordCamp Kansai 2016, with the following session description:

"What would we build if we were starting from scratch today, knowing all we’ve learned over the past 13 years of building WordPress?" At the beginning of 2014, the folks at Automattic asked themselves this question. The result is what now known as Calypso. It is not only a product combining some latest web technology, but also the demonstration of what we see as the future of WordPress.

In this session, we cover a brief history about the evolving of Calypso, how we chose our development stack, and what we learned from them.

Transcript

1. WHY WORDPRESS.COM CHOSE
   JAVASCRIPT-FIRST APPROACH
   

   View Slide

2. James Tien
   Automattic
   JavaScript Wrangler
   @southp
   

   View Slide

3. WHY
   HOW
   WHERE
   

   View Slide

4. WHY
   ...we built it?
   

   View Slide

5. WP-ADMIN
   

   View Slide

6. CALYPSO?
   ...DEMO TIME!
   

   View Slide

7. SO, WHAT'S WRONG
   WITH WP-ADMIN?
   

   View Slide

8. WELL, NON-MODERN IS LIKE A SIN.
   

   View Slide

9. THE WORLD IS EVOLVING...
   Once upon a time Now
   One device.
   One site / blog.
   Server - client
   Just too many.
   Multisite
   Server - Client
   

   View Slide

10. WHAT WOULD WE BUILD IF WE WERE
    STARTING FROM SCRATCH TODAY?
    (on a mysterious day in 2014)
    

    View Slide

11. MODERN
    PERFORMANT
    MOBILE-FIRST
    MULTISITE
    EASY TO USE
    

    View Slide

12. PHP → JAVASCRIPT
    SVN + TRAC → GITHUB
    ...a big tech stack shi !
    

    View Slide

13. ONE OF THE HARDEST THINGS TO DO IN
    TECHNOLOGY IS DISRUPT YOURSELF.
    -- MATT MULLENWEG.
    

    View Slide

14. HOW
    ...did we approch it?
    

    View Slide

15. A GENERAL VIEW
    

    View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. Modern JS
    Module + Bundling
    Task runner
    View
    State
    Communicate with REST APIs
    

    View Slide

25. SILVER-BULLET
    FRAMEWORKS?
    Angular
    Backbone
    ...
    

    View Slide

26. Pros Cons
    integrated solution fat
    less plumbering framework-only developers
    deprecation risk
    ...we want it to last long.
    

    View Slide

27. A VANILLA APPROACH
    

    View Slide

28. NO BIG FRAMEWORKS!
    

    View Slide

29. Pros Cons
    flexible more integration works
    better modularity
    JS developers
    ...integration works are actually a good thing.
    

    View Slide

30. View → React
    State → Redux
    Modern JS → Babel
    Module + Bundling → Webpack
    Task runner → GNU make
    

    View Slide

31. REACT
    

    View Slide

32. DATA => VIEW
    {
    '
    t
    i
    t
    l
    e
    '
    : '
    H
    e
    l
    l
    o
    '
    ,
    '
    c
    o
    n
    t
    e
    n
    t
    '
    : '
    W
    C K
    a
    n
    s
    a
    i
    !
    '
    ,
    }
    <
    a
    r
    t
    i
    c
    l
    e
    >
    <
    h
    1
    >
    H
    e
    l
    l
    o
    <
    /
    h
    1
    >
    <
    p
    >
    W
    C K
    a
    n
    s
    a
    i
    <
    /
    p
    >
    <
    /
    a
    r
    t
    i
    c
    l
    e
    >
    

    View Slide

33. PURE......?
    

    View Slide

34. NO SIDE EFFECTS
    SAME INPUT, SAME OUTPUT
    

    View Slide

35. r
    e
    n
    d
    e
    r
    (
    ) {
    c
    o
    n
    s
    t {
    t
    i
    t
    l
    e
    ,
    c
    o
    n
    t
    e
    n
    t
    ,
    } = t
    h
    i
    s
    .
    p
    r
    o
    p
    s
    ;
    r
    e
    t
    u
    r
    n (
    <
    a
    r
    t
    i
    c
    l
    e
    >
    <
    h
    1
    >
    { t
    i
    t
    l
    e }
    <
    /
    h
    1
    >
    <
    p
    >
    { c
    o
    n
    t
    e
    n
    t }
    <
    /
    p
    >
    <
    /
    a
    r
    t
    i
    c
    l
    e
    >
    )
    ;
    }
    

    View Slide

36. PURE + PURE + ... => PURE
    COMP. + COMP. + ... => COMPONENT
    

    View Slide

37. WHAT ABOUT STYLING...?
    COMPONENT-SCOPED CLASSES
    .
    c
    o
    m
    m
    e
    n
    t
    -
    b
    u
    t
    t
    o
    n {
    c
    o
    l
    o
    r
    : l
    i
    g
    h
    t
    e
    n
    ( $
    g
    r
    a
    y
    , 1
    0 )
    ;
    l
    i
    s
    t
    -
    s
    t
    y
    l
    e
    -
    t
    y
    p
    e
    : n
    o
    n
    e
    ;
    p
    a
    d
    d
    i
    n
    g
    : 4
    p
    x 4
    p
    x 4
    p
    x 2
    7
    p
    x
    ;
    p
    o
    s
    i
    t
    i
    o
    n
    : r
    e
    l
    a
    t
    i
    v
    e
    ;
    }
    .
    c
    o
    m
    m
    e
    n
    t
    -
    b
    u
    t
    t
    o
    n
    _
    _
    i
    c
    o
    n {
    f
    i
    l
    l
    : l
    i
    g
    h
    t
    e
    n
    ( $
    g
    r
    a
    y
    , 1
    0
    % )
    ;
    p
    o
    s
    i
    t
    i
    o
    n
    : a
    b
    s
    o
    l
    u
    t
    e
    ;
    l
    e
    f
    t
    : 0
    ;
    t
    o
    p
    : 3
    p
    x
    ;
    &
    :
    h
    o
    v
    e
    r {
    f
    i
    l
    l
    : $
    b
    l
    u
    e
    -
    l
    i
    g
    h
    t
    ;
    }
    }
    

    View Slide

38. PURE + COMPONENT-SCOPED
    CLASSES => REUSABLE
    COMPONENTS
    

    View Slide

39. COMPONENT LIBRARY
    ...DEMO TIME!
    https://wpcalypso.wordpress.com/devdocs/design
    https://wpcalypso.wordpress.com/devdocs/app-components
    

    View Slide

40. REDUX
    

    View Slide

41. ONE GLOBAL IMMUTABLE APP STATE.
    ( STATE, ACTION ) => STATE
    

    View Slide

42. ...YEAH! IT'S PURE!
    

    View Slide

43. /
    / I a
    m a s
    t
    a
    t
    e
    .
    {
    c
    o
    u
    n
    t
    e
    r
    : 0
    ,
    }
    /
    / I a
    m a
    n a
    c
    t
    i
    o
    n
    .
    {
    t
    y
    p
    e
    : '
    I
    N
    C
    R
    E
    A
    S
    E
    '
    ,
    }
    /
    / M
    e
    , t
    o
    o
    .
    {
    t
    y
    p
    e
    : '
    D
    E
    C
    R
    E
    A
    S
    E
    ,
    }
    /
    / c
    a
    l
    l m
    e r
    e
    d
    u
    c
    e
    r
    .
    f
    u
    n
    c
    t
    i
    o
    n c
    o
    u
    n
    t
    e
    r
    _
    r
    e
    d
    u
    c
    e
    r
    ( s
    t
    a
    t
    e
    , a
    c
    t
    i
    o
    n ) {
    s
    w
    i
    t
    c
    h
    ( a
    c
    t
    i
    o
    n
    .
    t
    y
    p
    e ) {
    c
    a
    s
    e '
    I
    N
    C
    R
    E
    A
    S
    E
    '
    :
    r
    e
    t
    u
    r
    n { c
    o
    u
    n
    t
    e
    r
    : s
    t
    a
    t
    e
    .
    c
    o
    u
    n
    t
    e
    r + 1 }
    ;
    c
    a
    s
    e '
    D
    E
    C
    R
    E
    A
    S
    E
    '
    :
    r
    e
    t
    u
    r
    n { c
    o
    u
    n
    t
    e
    r
    : s
    t
    a
    t
    e
    .
    c
    o
    u
    n
    t
    e
    r - 1 }
    ;
    }
    }
    

    View Slide

44. STATE + STATE + ... => STATE
    

    View Slide

45. View Slide

46. STATE <-> REST API?
    REDUX-THUNK
    

    View Slide

47. BABEL
    

    View Slide

48. A GO-TO ECMASCRIPT 6
    ...a.k.a. the next generation JavaScript.
    Cleaner, richer syntax
    let, const, spread, destructuring, arrow function, ...
    ES6 modules
    import / export
    Better granularity vs CommonJS
    Promise
    A general framework for async computation
    

    View Slide

49. WEBPACK
    

    View Slide

50. Incremental build
    Flexible loader / plugin architeture
    js / jsx
    css / sass
    json / svg / png / jpg ...
    Module system
    

    View Slide

51. GNU MAKE
    ...WHY NOT GRUNT, GULP, ETC.?
    

    View Slide

52. IT JUST WORKS!
    STABILITY > FANCINESS
    

    View Slide

53. WHAT HAVE THEY BROUGHT TO US?
    Modularity
    ES6 modules
    Clean separation of view / state / server communication
    Reusable components
    Pureness
    Less bugs
    Composable
    

    View Slide

54. WHERE
    ...to go from here?
    

    View Slide

55. SO MUCH MORE!
    Feature completeness
    Server-side rendering
    Calypso as a framework
    ...
    

    View Slide

56. WHAT MAKE US DO ALL
    THESE IN THE FIRST
    PLACE?
    

    View Slide

57. ...REST API!
    

    View Slide

58. API AS CONTRACT
    

    View Slide

59. View Slide

60. View Slide

61. View Slide

62. BLOGGING PLATFORM
    ↓
    CMS
    ↓
    APPLICATION FRAMEWORK
    ↓
    COMMUNITY-DRIVEN, FULLY-OPEN SPEC!
    

    View Slide

63. WORDPRESS TODAY
    AN IMPLEMENTATION OF THE SPEC BY PHP +
    MYSQL
    

    View Slide

64. N FRONTENDS X M BACKENDS
    

    View Slide

65. Q: WHY WORDPRESS.COM CHOSE
    JAVASCRIPT-FIRST APPROACH?
    

    View Slide

66. THE WORLD-WIDE-WEB IS EVOLVING
    INTO A JS-GLUED OPERATING
    SYSTEM.
    

    View Slide

67. ...AND WE WANT TO SHOW THE
    WORLD THAT WORDPRESS WILL BE
    EVEN MORE VITAL
    

    View Slide

68. m(＿ ＿)m
    

    View Slide