$30 off During Our Annual Pro Sale. View Details »

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

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.

James Tien

July 13, 2016
Tweet

Other Decks in Technology

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