ReWIRED: Moving WIRED.com from WordPress to Node

980df66b142b2a067b3f8b67b04352de?s=47 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.

980df66b142b2a067b3f8b67b04352de?s=128

Zack Tollman

November 14, 2017
Tweet

Transcript

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

  2. None
  3. JANUARY 1, 1993

  4. MARCH 1, 2015

  5. MARCH 1, 2015

  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. AGENDA Monolith to Microservices JavaScript Isomorphic Application

  15. THE MONOLITH

  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
  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
  18. EC2 - Apache, WP CMS Scheduling/Publishing Cache Invalidation Distribution Channels

    Sitemaps RSS Server Side Rendering Web App
  19. MICROSERVICES

  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
  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
  22. EC2 - Nginx, Node CMS Scheduling/Publishing Cache Invalidation Distribution Channels

    Sitemaps RSS Server Side Rendering Web App
  23. CONSUME APIS

  24. SHARED RESOURCES

  25. JAVASCRIPT / REACT JS

  26. JAVASCRIPT Relationship Status: It’s Complicated

  27. None
  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
  29. “My intention is to expose the goodness in JavaScript, an

    outstanding, dynamic programming language. -Douglas Crockford
  30. JAVASCRIPT The {*} Parts

  31. ASYNCHRONOUS

  32. EVENT DRIVEN ARCHITECTURE

  33. None
  34. start 1 2 finish

  35. None
  36. start finish 1 2

  37. NON-BLOCKING I/O

  38. NODE MAKES THIS FREE

  39. SOME WANT EVERYTHING ASYNC

  40. SOME WANT EVERYTHING SYNC

  41. ASYNC AND SYNC BOTH HAVE PURPOSES

  42. EXAMPLE: WORKFLOWS

  43. None
  44. ★ createContext ★ fetch ★ primary ★ secondary ★ related

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

    articles ★ most popular ★ recent tweets ★ related photos ★ transform ★ render
  46. CALLBACK PATTERN

  47. CALLBACK PATTERN HELL

  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. BUILDING

  61. COMPILING

  62. Environment Compatible JavaScript Next Generation JavaScript

  63. None
  64. None
  65. None
  66. NO SERVER SIDE COMPILATION

  67. BUNDLING

  68. PREPARE SOURCE FOR BROWSER DELIVERY

  69. None
  70. None
  71. ISOMORPHIC APPLICATION

  72. CODE SHARED BETWEEN SERVER AND CLIENT

  73. None
  74. Bundle entry points

  75. None
  76. None
  77. None
  78. Bundle entry points Server only

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

    client
  80. /story/cats

  81. /story/cats Node App Workflow Data Render

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

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

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

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

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

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

    Update Data Re-Render
  88. None
  89. None
  90. None
  91. None
  92. None
  93. None
  94. None
  95. None
  96. None
  97. None
  98. None
  99. None
  100. None
  101. WTF, MATE?

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

    Update Data Re-Render
  103. Node App Data Render Browser App Data Render ===

  104. None
  105. None
  106. ASYNC AND SYNC

  107. ISOMORPHIC

  108. SPEAKERDECK.COM/ TOLLMANZ