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.

Transcript

1. REWIRED Moving WIRED.com from WordPress to Node Zack Tollman @tollmanz
3. JANUARY 1, 1993
4. MARCH 1, 2015
5. MARCH 1, 2015
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
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
34. start 1 2 finish
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
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
60. BUILDING
61. COMPILING
62. Environment Compatible JavaScript Next Generation JavaScript
66. NO SERVER SIDE COMPILATION
67. BUNDLING
68. PREPARE SOURCE FOR BROWSER DELIVERY
71. ISOMORPHIC APPLICATION
72. CODE SHARED BETWEEN SERVER AND CLIENT
74. Bundle entry points
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
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 ===
106. ASYNC AND SYNC
107. ISOMORPHIC
108. SPEAKERDECK.COM/ TOLLMANZ