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
Programming
0
160

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

See All by Zack Tollman
Defining Fast: The Hardest Problem in Performance Engineering
tollmanz
0
61
Defining Fast: The Hardest Problem in Performance Engineering
tollmanz
0
86
Put an "S" on it: Moving a Large Publishing Site to HTTPS
tollmanz
1
87
Building Custom User Experiences from the Edge
tollmanz
0
79
HTTPS Migrations: The Hard Parts
tollmanz
0
140
HTTPS is Coming: Are You Prepared? (Velocity 2016)
tollmanz
0
150
Understanding HTTPS and TLS
tollmanz
0
160
HTTPS Is Coming - WP SFO
tollmanz
0
79
The Many Challenges of Object Caching in WordPress
tollmanz
0
89

Other Decks in Programming

See All in Programming
DDD Demystified ~結局DDDとは何なのか？何でないのか？~ #phperkaigi_reject
77web
0
610
CSC309 Lecture 20
javiergs
PRO
0
120
CyberAgentにおけるKubernetes as a Serviceの歩みと利用者を支える機能 / cainfra01-amsy810-kubernetes
masayaaoyama
1
800
ゴーファーくんと辿るプログラミング言語の歴史/history-of-programming-languages-with-gopher
iwasiman
13
5.5k
PDF_TDX_2023_Apex__What_s_New_and_What_s_Coming.pdf
fishofprey
3
820
WantedlyでのCompose導入 / Introducing Jetpack Compose at Wantedly
kubode
1
110
WEARのEKSコストを救いたい
mikobaaaaa0920
1
1.4k
macのunicode正規化.pdf
mski_iksm
0
1.1k
UICollectionView Compositional Layout
usamik26
0
180
たのしいRubyの構文解析ツアー
coe401_
1
620
GitHub ActionsとDeployGateで始めるAndroidアプリのCICD
yuhei_fujita
2
150
新社会人でも活躍したい！〜新卒1年目で活躍するためのコツ〜
ogijun2018
1
250

Featured

See All Featured
The Invisible Customer
myddelton
113
12k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Writing Fast Ruby
sferik
613
58k
Building Better People: How to give real-time feedback that sticks.
wjessup
346
17k
Designing the Hi-DPI Web
ddemaree
273
33k
Embracing the Ebb and Flow
colly
76
3.6k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
128
8.8k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
14
5.6k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
7
4.9k
Web Components: a chance to create the future
zenorocha
304
41k
Fireside Chat
paigeccino
16
2k
What’s in a name? Adding method to the madness
productmarketing
PRO
13
2k

Transcript

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

    View Slide

  2. View Slide

  3. JANUARY 1, 1993

    View Slide

  4. MARCH 1, 2015

    View Slide

  5. MARCH 1, 2015

    View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. AGENDA
    Monolith to Microservices
    JavaScript
    Isomorphic Application

    View Slide

  15. THE MONOLITH

    View Slide

  16. 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 Slide

  17. 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 Slide

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

    View Slide

  19. MICROSERVICES

    View Slide

  20. 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 Slide

  21. 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 Slide

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

    View Slide

  23. CONSUME APIS

    View Slide

  24. SHARED RESOURCES

    View Slide

  25. JAVASCRIPT / REACT JS

    View Slide

  26. JAVASCRIPT
    Relationship Status: It’s Complicated

    View Slide

  27. View Slide

  28. “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 Slide

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

    View Slide

  30. JAVASCRIPT
    The {*} Parts

    View Slide

  31. ASYNCHRONOUS

    View Slide

  32. EVENT DRIVEN
    ARCHITECTURE

    View Slide

  33. View Slide

  34. start
    1
    2
    finish

    View Slide

  35. View Slide

  36. start
    finish
    1
    2

    View Slide

  37. NON-BLOCKING I/O

    View Slide

  38. NODE MAKES THIS FREE

    View Slide

  39. SOME WANT
    EVERYTHING ASYNC

    View Slide

  40. SOME WANT
    EVERYTHING SYNC

    View Slide

  41. ASYNC AND SYNC BOTH
    HAVE PURPOSES

    View Slide

  42. EXAMPLE: WORKFLOWS

    View Slide

  43. View Slide

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

    View Slide

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

    View Slide

  46. CALLBACK PATTERN

    View Slide

  47. CALLBACK PATTERN
    HELL

    View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. BUILDING

    View Slide

  61. COMPILING

    View Slide

  62. Environment
    Compatible
    JavaScript
    Next
    Generation
    JavaScript

    View Slide

  63. View Slide

  64. View Slide

  65. View Slide

  66. NO SERVER SIDE
    COMPILATION

    View Slide

  67. BUNDLING

    View Slide

  68. PREPARE SOURCE FOR
    BROWSER DELIVERY

    View Slide

  69. View Slide

  70. View Slide

  71. ISOMORPHIC
    APPLICATION

    View Slide

  72. CODE SHARED BETWEEN
    SERVER AND CLIENT

    View Slide

  73. View Slide

  74. Bundle entry points

    View Slide

  75. View Slide

  76. View Slide

  77. View Slide

  78. Bundle entry points
    Server only

    View Slide

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

    View Slide

  80. /story/cats

    View Slide

  81. /story/cats Node App
    Workflow
    Data
    Render

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  88. View Slide

  89. View Slide

  90. View Slide

  91. View Slide

  92. View Slide

  93. View Slide

  94. View Slide

  95. View Slide

  96. View Slide

  97. View Slide

  98. View Slide

  99. View Slide

  100. View Slide

  101. WTF, MATE?

    View Slide

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

    View Slide

  103. Node App
    Data
    Render
    Browser App
    Data
    Render ===

    View Slide

  104. View Slide

  105. View Slide

  106. ASYNC AND SYNC

    View Slide

  107. ISOMORPHIC

    View Slide

  108. SPEAKERDECK.COM/
    TOLLMANZ

    View Slide