Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ReWIRED: Moving WIRED.com from WordPress to Node

Zack Tollman
November 14, 2017

ReWIRED: Moving WIRED.com from WordPress to Node

Migrating an application and engineering team to a new programming language is major challenge and a significant investment. Zack Tollman will discuss the journey of transitioning WIRED.com and its engineering team from WordPress to a Node/React based stack. During this talk, you will hear how an engineering team worked to overcome the obstacles of learning a new programming language, adapting to a service oriented architecture, and muddling through the shift to an “isomorphic” application.

Zack Tollman

November 14, 2017
Tweet

More Decks by Zack Tollman

Other Decks in Programming

Transcript

  1. REWIRED
    Moving WIRED.com from WordPress to Node
    Zack Tollman @tollmanz

    View full-size slide

  2. JANUARY 1, 1993

    View full-size slide

  3. MARCH 1, 2015

    View full-size slide

  4. MARCH 1, 2015

    View full-size slide

  5. AGENDA
    Monolith to Microservices
    JavaScript
    Isomorphic Application

    View full-size slide

  6. THE MONOLITH

    View full-size slide

  7. Fastly
    Elastic Load
    Balancer
    EC2 - Apache,
    WP
    EC2 - Apache,
    WP
    EC2 - Apache,
    WP
    EC2 - Apache,
    WP
    EC2 - Apache,
    WP
    EC2 - Apache,
    WP
    Memcached
    Memcached
    MySQL

    View full-size slide

  8. Fastly
    Elastic Load
    Balancer
    EC2 - Apache,
    WP
    EC2 - Apache,
    WP
    EC2 - Apache,
    WP
    EC2 - Apache,
    WP
    EC2 - Apache,
    WP
    EC2 - Apache,
    WP
    Memcached
    Memcached
    MySQL

    View full-size slide

  9. EC2 - Apache, WP
    CMS
    Scheduling/Publishing
    Cache Invalidation
    Distribution Channels
    Sitemaps
    RSS
    Server Side Rendering
    Web App

    View full-size slide

  10. MICROSERVICES

    View full-size slide

  11. Fastly
    Elastic Load
    Balancer
    EC2 - Nginx,
    Node
    EC2 - Nginx,
    Node
    EC2 - Nginx,
    Node
    EC2 - Nginx,
    Node
    EC2 - Nginx,
    Node
    EC2 - Nginx,
    Node
    API
    Other Stuff

    View full-size slide

  12. Fastly
    Elastic Load
    Balancer
    EC2 - Nginx,
    Node
    EC2 - Nginx,
    Node
    EC2 - Nginx,
    Node
    EC2 - Nginx,
    Node
    EC2 - Nginx,
    Node
    EC2 - Nginx,
    Node
    API
    Other Stuff

    View full-size slide

  13. EC2 - Nginx, Node
    CMS
    Scheduling/Publishing
    Cache Invalidation
    Distribution Channels
    Sitemaps
    RSS
    Server Side Rendering
    Web App

    View full-size slide

  14. CONSUME APIS

    View full-size slide

  15. SHARED RESOURCES

    View full-size slide

  16. JAVASCRIPT / REACT JS

    View full-size slide

  17. JAVASCRIPT
    Relationship Status: It’s Complicated

    View full-size slide

  18. “The best nature of JavaScript is so
    effectively hidden that for many years
    the prevailing opinion of JavaScript
    was that it was an unsightly,
    incompetent toy.
    -Douglas Crockford

    View full-size slide

  19. “My intention is to expose the
    goodness in JavaScript, an
    outstanding, dynamic programming
    language.
    -Douglas Crockford

    View full-size slide

  20. JAVASCRIPT
    The {*} Parts

    View full-size slide

  21. ASYNCHRONOUS

    View full-size slide

  22. EVENT DRIVEN
    ARCHITECTURE

    View full-size slide

  23. start
    1
    2
    finish

    View full-size slide

  24. start
    finish
    1
    2

    View full-size slide

  25. NON-BLOCKING I/O

    View full-size slide

  26. NODE MAKES THIS FREE

    View full-size slide

  27. SOME WANT
    EVERYTHING ASYNC

    View full-size slide

  28. SOME WANT
    EVERYTHING SYNC

    View full-size slide

  29. ASYNC AND SYNC BOTH
    HAVE PURPOSES

    View full-size slide

  30. EXAMPLE: WORKFLOWS

    View full-size slide

  31. ★ createContext
    ★ fetch
    ★ primary
    ★ secondary
    ★ related articles
    ★ most popular
    ★ recent tweets
    ★ related photos
    ★ transform
    ★ render

    View full-size slide

  32. ★ createContext
    ★ fetch
    ★ primary
    ★ secondary
    ★ related articles
    ★ most popular
    ★ recent tweets
    ★ related photos
    ★ transform
    ★ render

    View full-size slide

  33. CALLBACK PATTERN

    View full-size slide

  34. CALLBACK PATTERN
    HELL

    View full-size slide

  35. Environment
    Compatible
    JavaScript
    Next
    Generation
    JavaScript

    View full-size slide

  36. NO SERVER SIDE
    COMPILATION

    View full-size slide

  37. PREPARE SOURCE FOR
    BROWSER DELIVERY

    View full-size slide

  38. ISOMORPHIC
    APPLICATION

    View full-size slide

  39. CODE SHARED BETWEEN
    SERVER AND CLIENT

    View full-size slide

  40. Bundle entry points

    View full-size slide

  41. Bundle entry points
    Server only

    View full-size slide

  42. Bundle entry points
    Server only
    Server and client
    Server and client

    View full-size slide

  43. /story/cats Node App
    Workflow
    Data
    Render

    View full-size slide

  44. /story/cats Node App
    Workflow
    Data
    Render
    Browser App
    Data
    Render

    View full-size slide

  45. /story/cats Node App
    Workflow
    Data
    Render
    Browser App
    Data
    Render
    Update
    Data Re-Render

    View full-size slide

  46. /story/cats Node App
    Workflow
    Data
    Render
    Browser App
    Data
    Render

    View full-size slide

  47. /story/cats Node App
    Workflow
    Data
    Render
    Browser App
    Data
    Render

    View full-size slide

  48. /story/cats Node App
    Workflow
    Data
    Render
    Browser App
    Data
    Render

    View full-size slide

  49. /story/cats Node App
    Workflow
    Data
    Render
    Browser App
    Data
    Render
    Update
    Data Re-Render

    View full-size slide

  50. /story/cats Node App
    Workflow
    Data
    Render
    Browser App
    Data
    Render
    Update
    Data Re-Render

    View full-size slide

  51. Node App
    Data
    Render
    Browser App
    Data
    Render ===

    View full-size slide

  52. ASYNC AND SYNC

    View full-size slide

  53. SPEAKERDECK.COM/
    TOLLMANZ

    View full-size slide