Getting started with ReactPHP – Pushing real-time data to the browser (IPC19)

Think about PHP for a few seconds… What came to mind? It’s very likely you thought about your average product catalog, a blogging platform, or how the platform is inferior to things like Node.js. But wait, it’s 2019! What if I told you PHP’s huge ecosystem has way more to offer and PHP is not inferior at all to its evil cousin Node.js?

In this talk you will learn about the core concepts of async PHP and why you too should care about ReactPHP being a real thing. The talk has a strong focus on sparking the idea that PHP can be way faster and more versatile than you probably thought. Bring along an open mind, and through lots of interesting examples and live demos learn why what sounds crazy at first might soon be a valuable addition in your toolbox.

You’re already familiar with PHP and want to learn what ReactPHP is all about? Then this talk is for you! We will start from scratch and see what it takes to build an application that pushes data from your command line to your browser in real-time. You’re invited to join the interactive demos or lean back and learn more about why an event-driven approach might be the next big thing in making your application faster and more responsive.

---

These slides were used as part of a presentation at @phpconference. The full presentation took 45min with basic project setup, getting started with ReactPHP's core components and eventually implementing an HTTP server using Server-Sent Events (EventSource).

Resulting source code can be found here: https://gist.github.com/clue/c426bcee9c7767157085d6b881204998

Transcript

1. getting started with ReactPHP pushing real-time data to the browser @another_clue
2. Agenda - Hello! - Introduction to async PHP with ReactPHP 2
3. Agenda - Hello! - Introduction to async PHP with ReactPHP - event loops 3
4. Agenda - Hello! - Introduction to async PHP with ReactPHP - event loops - streaming data 4
5. Agenda - Hello! - Introduction to async PHP with ReactPHP - event loops - streaming data - sockets 5
6. Agenda - Hello! - Introduction to async PHP with ReactPHP - event loops - streaming data - sockets - promises 6
7. Agenda - Hello! - Introduction to async PHP with ReactPHP - event loops - streaming data - sockets - promises - real time data 7
8. Agenda - Hello! - Introduction to async PHP with ReactPHP - event loops - streaming data - sockets - promises - real time data - Streaming HTTP 8
9. Agenda - Hello! - Introduction to async PHP with ReactPHP - event loops - streaming data - sockets - promises - real time data - Streaming HTTP - Chat bots 9
10. Agenda - Hello! - Introduction to async PHP with ReactPHP - event loops - streaming data - sockets - promises - real time data - Streaming HTTP - Chat bots - interactive CLI tools 10
11. Agenda - Hello! - Introduction to async PHP with ReactPHP - event loops - streaming data - sockets - promises - real time data - Streaming HTTP - Chat bots - interactive CLI tools - desktop GUI 11
12. Agenda - Hello! - Introduction to async PHP with ReactPHP - event loops - streaming data - sockets - promises - real time data - Streaming HTTP - Chat bots - interactive CLI tools - desktop GUI - Conclusions 12
13. really? 13
14. this is a getting started guide 14
15. pushing real-time data to the browser 15
16. I encourage feedback, questions + suggestions 16
17. Agenda - Hello! - Introduction to async PHP with ReactPHP - event loops - streaming data - sockets - promises - conclusions 17
18. Agenda - Hello! - Introduction to async PHP with ReactPHP - event loops - streaming data - sockets - promises - conclusions 18 examples and demo time!
19. Hello! 19
20. $ whoami 20
21. $ whoami Christian Lück 21
22. $ whoami Christian Lück 22
23. $ whoami Christian Lueck 23
24. $ whoami Christian Lueck 24
25. $ whoami Christian Lueck @clue 25
26. $ whoami Christian Lueck @another_clue 26
27. $ whoami Christian Lueck @another_clue passionate about pushing the limits 27
28. $ whoami Christian Lueck @another_clue passionate about pushing the limits freelance software engineer 28
29. Who are you? 29 now that you know me…
30. Who are you? 30 now that you know me… - PHP developers? - architecs / engineers?
31. Who are you? 31 now that you know me… - PHP developers? - architecs / engineers? - know React?
32. PHP, the web of the ‘90s? 32
33. PHP and the web of the ‘90s 33
34. PHP and the web of the ‘90s 34 Apache Client PHP MySQL
35. PHP and the web of the ‘90s traditional LAMP stack 35 Apache Client PHP MySQL
36. PHP and the web of the ‘90s traditional LAMP stack Request-Response-Cycle 36 Apache Client PHP MySQL
37. PHP and the web of the ‘90s traditional LAMP stack Request-Response-Cycle PHP is too slow? 37 Apache Client PHP MySQL
38. PHP and the web of the ‘90s traditional LAMP stack Request-Response-Cycle PHP is too slow? 38 Apache Client MySQL FPM PHP PHP
39. PHP and the web of the ‘90s traditional LAMP stack Request-Response-Cycle PHP is too slow? 39 nginx Client MySQL FPM PHP PHP
40. PHP and the web of the ‘90s traditional LAMP stack Request-Response-Cycle PHP is too slow? 40 nginx Client FPM PHP PHP memcache MySQL
41. PHP may not be pretty… 41
42. PHP may not be pretty… but it gets the job done! 42
43. Knock knock! Who’s there? 43
44. Knock knock! 2019! Who’s there? 44
45. Knock knock! 2019! - Separation of concerns (Frontend↔Backend) - HTTP APIs (RESTful) - Integration with 3rd parties - Live-Data (ticker) - CLI tools Who’s there? 45
46. Knock knock! 2019! - Separation of concerns (Frontend↔Backend) - HTTP APIs (RESTful) - Integration with 3rd parties - Live-Data (ticker) - CLI tools Who’s there? 46
47. Node.js 47
48. Node.js 48 good fit, huge ecosystem
49. Node.js 49 good fit, huge ecosystem interesting concepts
50. Node.js 50 good fit, huge ecosystem interesting concepts npm install…
51. nodejs? 51
52. no js! 52
53. Everybody’s favorite language… 53
54. PHP 54
55. PHP 55 gets the job done
56. PHP 56 gets the job done widespread usage
57. PHP 57 gets the job done widespread usage if PHP can do it…
58. Enter React! 58
60. The other React™ 60
61. The REAL React™ 61
63. What is React? 63
64. What is React? non-blocking I/O 64
65. What is React? non-blocking I/O event-driven 65
66. What is React? non-blocking I/O event-driven async 66
67. 100% 67
68. 100% pure PHP 68
69. 100% pure PHP no extensions 69
70. 100% pure PHP no extensions no magic 70
71. What does that even mean?! 71
72. the idea 72
73. calculations are fast 73 the idea
74. calculations are fast I/O is slow 74 the idea
75. I/O is everywhere 75
76. I/O is everywhere third party HTTP APIs (RESTful, SOAP, you name it…) 76
77. I/O is everywhere third party HTTP APIs (RESTful, SOAP, you name it…) mysql, postgres 77
78. I/O is everywhere third party HTTP APIs (RESTful, SOAP, you name it…) mysql, postgres filesystem I/O (session files) 78
79. I/O is everywhere third party HTTP APIs (RESTful, SOAP, you name it…) mysql, postgres filesystem I/O (session files) redis, memcache 79
80. 80 Source: Latency Numbers Every Programmer Should Know: https://gist.github.com/jboner/2841832 CPU vs I/O
81. I/O is slow! 81
82. I/O is slow! So why wait? 82
83. This is React 83
84. This is React 84 Start multiple I/O operations (non-blocking)
85. This is React 85 Start multiple I/O operations (non-blocking) Get notified when something happens (react)
86. This is React 86 Start multiple I/O operations (non-blocking) Get notified when something happens (react) Don’t waste time waiting
87. What React is not 87
88. What React is not React is not black magic / vodoo 88
89. What React is not React is not black magic / vodoo React is not a framework 89
90. What React is not React is not black magic / vodoo React is not a framework React is not the new buzz 90
91. React core components 91
92. event loop 92
93. Event loop Consumers - THE core, low-level component 93
94. Event loop Consumers - THE core, low-level component - Create an instance - Just use the Factory - Additional extensions for bigger payloads - something inbetween… - just pass the $loop around - Start running - keeps running forever - unless stopped or done 94
95. Event loop Consumers - THE core, low-level component - Create an instance - Just use the Factory - Additional extensions for bigger payloads - something inbetween… - just pass the $loop around - Start running - keeps running forever - unless stopped or done 95
96. Event loop Implementors - Reactor pattern (hence the name) 96
97. Event loop Implementors - Reactor pattern (hence the name) - start timers - once - periodic - ticks 97
98. Event loop Implementors - Reactor pattern (hence the name) - start timers - once - periodic - ticks 98
99. Event loop Implementors - Reactor pattern (hence the name) - start timers - once - periodic - ticks 99
100. Event loop Implementors - Reactor pattern (hence the name) - start timers - once - periodic - ticks - plus wait for stream resources to become - readable - writable 100
101. streaming data 101
102. Streams - Process large strings in chunks as they happen (think downloads) - Types - Readable (e.g. STDIN pipe) - Writable (e.g. STDOUT pipe) - Duplex (e.g. TCP/IP connection) 102
103. Stream interfaces and events 103
104. Stream interfaces and events 104
105. Stream interfaces and events 105
106. sockets 106
107. Sockets 107 - Streams, but over the network
108. Sockets 108 - Streams, but over the network - servers listen - clients connect
109. Sockets 109 - Streams, but over the network - servers listen - clients connect - Focus on TCP/IP (UDP etc. also possible)
110. Sockets 110 - Streams, but over the network - servers listen - clients connect - Focus on TCP/IP (UDP etc. also possible)
111. Sockets 111 - Streams, but over the network - servers listen - clients connect - Focus on TCP/IP (UDP etc. also possible)
112. Sockets 112 - Streams, but over the network - servers listen - clients connect - Focus on TCP/IP (UDP etc. also possible)
113. Sockets 113 - Streams, but over the network - servers listen - clients connect - Focus on TCP/IP (UDP etc. also possible)
114. Sockets in practice 114
115. Sockets in practice - implementation detail 115
116. Sockets in practice - implementation detail - higher level protocols (HTTP anybody) 116
117. Sockets in practice - implementation detail - higher level protocols (HTTP anybody) - higher level concepts (RESTful etc.) 117
118. Sockets in practice - implementation detail - higher level protocols (HTTP anybody) - higher level concepts (RESTful etc.) - higher level APIs (SDKs, API clients etc.) 118
119. Sockets in practice - implementation detail - higher level protocols (HTTP anybody) - higher level concepts (RESTful etc.) - higher level APIs (SDKs, API clients etc.) - Concepts still apply, details are hidden 119
120. promises 120
121. Promises - Placeholder for a single future result - Possible states: - pending - fulfilled (successfully resolved) - rejected (Exception occured) 121
122. Promise API 122
123. Promise API 123
124. Promise API usage 124
125. Promise API usage 125
126. Promise API usage 126
127. Promises in practice - 127
128. Promises in practice - Everywhere! 128
129. Promises in practice - Everywhere! - react/socket - clue/buzz-react - clue/packagist-react - clue/redis-react - react/mysql - … 129
130. HTTP streaming 130
131. HTTP in a gist 131
132. HTTP in a gist 132 GET / HTTP/1.1
133. HTTP in a gist 133 GET / HTTP/1.1 HTTP/1.1 200 OK Content-Type: text/plain hello world!
134. HTTP in a gist 134 GET / HTTP/1.1 HTTP/1.1 200 OK Content-Type: text/plain hello world!
135. HTTP streaming 135
136. HTTP streaming 136 - HTTP request/response semantics
137. HTTP streaming 137 - HTTP request/response semantics - streaming responses (download huge files) - streaming requests (upload huge files)
138. HTTP streaming 138 - HTTP request/response semantics - streaming responses (download huge files) - streaming requests (upload huge files) - Still request/response semantics
139. HTTP streaming 139 - HTTP request/response semantics - streaming responses (download huge files) - streaming requests (upload huge files) - Still request/response semantics - Long-polling (Comet) anyone?
140. HTTP streaming 140 - HTTP request/response semantics - streaming responses (download huge files) - streaming requests (upload huge files) - Still request/response semantics - Long-polling (Comet) anyone?
141. EventSource 141
142. Server-Sent Events (SSE) / EventSource 142
143. Server-Sent Events in a gist 143 - Normal Request/Response - Client API for streaming access
144. Server-Sent Events in a gist 144 - Normal Request/Response - Client API for streaming access HTTP/1.1 200 OK Content-Type: text/event-stream
145. Server-Sent Events in a gist 145 - Normal Request/Response - Client API for streaming access HTTP/1.1 200 OK Content-Type: text/event-stream data: hello
146. Server-Sent Events in a gist 146 - Normal Request/Response - Client API for streaming access HTTP/1.1 200 OK Content-Type: text/event-stream data: hello data: world
147. Server-Sent Events in a gist 147 - Normal Request/Response - Client API for streaming access HTTP/1.1 200 OK Content-Type: text/event-stream data: hello data: world
148. fully-functional streaming HTTP server in a single PHP file 148
149. many, MANY more third-party projects: https://github.com/reactphp/react/wiki/Users 149
151. Conclusions 151
152. 152 Can I use ReactPHP to make my website 1000x faster?
153. YES 153 Can I use ReactPHP to make my website 1000x faster?
154. YES 154 But you might be missing the point… Can I use ReactPHP to make my website 1000x faster?
155. PHP 155
156. PHP faster than you probably thought 156
157. PHP faster than you probably thought more versatile than you probably thought 157
158. ReactPHP 158
159. ReactPHP 159 a real deal and here to stay
160. ReactPHP 160 a real deal and here to stay stable & production ready
161. ReactPHP 161 a real deal and here to stay stable & production ready *awesome*
162. try! 162
163. try! whenever having to wait 163
164. try! whenever having to wait whenever accessing network 164
165. help! 165
166. help! elaborate documentation on ReactPHP.org 166
167. help! elaborate documentation on ReactPHP.org tweet @ReactPHP or #reactphp 167
168. help! elaborate documentation on ReactPHP.org tweet @ReactPHP or #reactphp Talk to me 168
169. help! elaborate documentation on ReactPHP.org tweet @ReactPHP or #reactphp Talk to me Did I mention I’m available? 169
170. // thank you! $loop->stop(); 170 @another_clue – https://lueck.tv/
171. integration 171
172. integration non-blocking and blocking don’t mix well 172
173. integration non-blocking and blocking don’t mix well decide for either approach 173
174. integration non-blocking and blocking don’t mix well decide for either approach isolate & communicate 174
175. Integration with traditional environments 175 integrating async into sync is easy
176. Integration with traditional environments 176 integrating async into sync is easy - just run the loop until you’re done - see clue/block-react
177. Integration with traditional environments 177 integrating async into sync is easy - just run the loop until you’re done - see clue/block-react integrating sync into async is hard
178. Integration with traditional environments 178 integrating async into sync is easy - just run the loop until you’re done - see clue/block-react integrating sync into async is hard - often requires async rewrite - consider forking instead
179. Avoid blocking! - The loop must not be blocked 179
180. Avoid blocking! - The loop must not be blocked - Many functions / lib assume blocking by default - Anything >1ms should be reconsidered 180
181. Avoid blocking! - The loop must not be blocked - Many functions / lib assume blocking by default - Anything >1ms should be reconsidered - Alternatives - Single result: Promises - Evented: Streams 181
182. Avoid blocking! - The loop must not be blocked - Many functions / lib assume blocking by default - Anything >1ms should be reconsidered - Alternatives - Single result: Promises - Evented: Streams - Need a blocking function? - Fork off! - Use IPC 182
183. Avoid blocking! - The loop must not be blocked - Many functions / lib assume blocking by default - Anything >1ms should be reconsidered - Alternatives - Single result: Promises - Evented: Streams - Need a blocking function? - Fork off! - Use IPC 183 Pay attention: - PDO, mysql etc. - file system access - network access - third-party APIs