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
   

   View Slide

2. Agenda
   - Hello!
   - Introduction to async PHP with ReactPHP
   2
   

   View Slide

3. Agenda
   - Hello!
   - Introduction to async PHP with ReactPHP
   - event loops
   3
   

   View Slide

4. Agenda
   - Hello!
   - Introduction to async PHP with ReactPHP
   - event loops
   - streaming data
   4
   

   View Slide

5. Agenda
   - Hello!
   - Introduction to async PHP with ReactPHP
   - event loops
   - streaming data
   - sockets
   5
   

   View Slide

6. Agenda
   - Hello!
   - Introduction to async PHP with ReactPHP
   - event loops
   - streaming data
   - sockets
   - promises
   6
   

   View Slide

7. Agenda
   - Hello!
   - Introduction to async PHP with ReactPHP
   - event loops
   - streaming data
   - sockets
   - promises
   - real time data
   7
   

   View Slide

8. Agenda
   - Hello!
   - Introduction to async PHP with ReactPHP
   - event loops
   - streaming data
   - sockets
   - promises
   - real time data
   - Streaming HTTP
   8
   

   View Slide

9. Agenda
   - Hello!
   - Introduction to async PHP with ReactPHP
   - event loops
   - streaming data
   - sockets
   - promises
   - real time data
   - Streaming HTTP
   - Chat bots
   9
   

   View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

13. really?
    13
    

    View Slide

14. this is a getting started guide
    14
    

    View Slide

15. pushing real-time data
    to the browser
    15
    

    View Slide

16. I encourage feedback,
    questions + suggestions
    16
    

    View Slide

17. Agenda
    - Hello!
    - Introduction to async PHP with ReactPHP
    - event loops
    - streaming data
    - sockets
    - promises
    - conclusions
    17
    

    View Slide

18. Agenda
    - Hello!
    - Introduction to async PHP with ReactPHP
    - event loops
    - streaming data
    - sockets
    - promises
    - conclusions
    18
    examples and demo time!
    

    View Slide

19. Hello!
    19
    

    View Slide

20. $ whoami
    20
    

    View Slide

21. $ whoami
    Christian Lück
    21
    

    View Slide

22. $ whoami
    Christian Lück
    22
    

    View Slide

23. $ whoami
    Christian Lueck
    23
    

    View Slide

24. $ whoami
    Christian Lueck
    24
    

    View Slide

25. $ whoami
    Christian Lueck
    @clue
    25
    

    View Slide

26. $ whoami
    Christian Lueck
    @another_clue
    26
    

    View Slide

27. $ whoami
    Christian Lueck
    @another_clue
    passionate about pushing the limits
    27
    

    View Slide

28. $ whoami
    Christian Lueck
    @another_clue
    passionate about pushing the limits
    freelance software engineer 28
    

    View Slide

29. Who are you?
    29
    now that you know me…
    

    View Slide

30. Who are you?
    30
    now that you know me…
    - PHP developers?
    - architecs / engineers?
    

    View Slide

31. Who are you?
    31
    now that you know me…
    - PHP developers?
    - architecs / engineers?
    - know React?
    

    View Slide

32. PHP, the web of the ‘90s?
    32
    

    View Slide

33. PHP and the web of the ‘90s
    33
    

    View Slide

34. PHP and the web of the ‘90s
    34
    Apache
    Client PHP MySQL
    

    View Slide

35. PHP and the web of the ‘90s
    traditional LAMP stack
    35
    Apache
    Client PHP MySQL
    

    View Slide

36. PHP and the web of the ‘90s
    traditional LAMP stack
    Request-Response-Cycle
    36
    Apache
    Client PHP MySQL
    

    View Slide

37. PHP and the web of the ‘90s
    traditional LAMP stack
    Request-Response-Cycle
    PHP is too slow? 37
    Apache
    Client PHP MySQL
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

41. PHP may not be pretty…
    41
    

    View Slide

42. PHP may not be pretty…
    but it gets the job done!
    42
    

    View Slide

43. Knock knock!
    Who’s there?
    43
    

    View Slide

44. Knock knock!
    2019!
    Who’s there?
    44
    

    View Slide

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
    

    View Slide

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
    

    View Slide

47. Node.js
    47
    

    View Slide

48. Node.js
    48
    good fit, huge ecosystem
    

    View Slide

49. Node.js
    49
    good fit, huge ecosystem
    interesting concepts
    

    View Slide

50. Node.js
    50
    good fit, huge ecosystem
    interesting concepts
    npm install…
    

    View Slide

51. nodejs?
    51
    

    View Slide

52. no js!
    52
    

    View Slide

53. Everybody’s favorite language…
    53
    

    View Slide

54. PHP
    54
    

    View Slide

55. PHP
    55
    gets the job done
    

    View Slide

56. PHP
    56
    gets the job done
    widespread usage
    

    View Slide

57. PHP
    57
    gets the job done
    widespread usage
    if PHP can do it…
    

    View Slide

58. Enter React!
    58
    

    View Slide

59. View Slide

60. The other React™
    60
    

    View Slide

61. The REAL React™
    61
    

    View Slide

62. View Slide

63. What is React?
    63
    

    View Slide

64. What is React?
    non-blocking I/O
    64
    

    View Slide

65. What is React?
    non-blocking I/O
    event-driven
    65
    

    View Slide

66. What is React?
    non-blocking I/O
    event-driven
    async
    66
    

    View Slide

67. 100%
    67
    

    View Slide

68. 100%
    pure PHP
    68
    

    View Slide

69. 100%
    pure PHP
    no extensions
    69
    

    View Slide

70. 100%
    pure PHP
    no extensions
    no magic
    70
    

    View Slide

71. What does that even mean?!
    71
    

    View Slide

72. the idea
    72
    

    View Slide

73. calculations are fast
    73
    the idea
    

    View Slide

74. calculations are fast
    I/O is slow
    74
    the idea
    

    View Slide

75. I/O is everywhere
    75
    

    View Slide

76. I/O is everywhere
    third party HTTP APIs (RESTful, SOAP, you name it…)
    76
    

    View Slide

77. I/O is everywhere
    third party HTTP APIs (RESTful, SOAP, you name it…)
    mysql, postgres
    77
    

    View Slide

78. I/O is everywhere
    third party HTTP APIs (RESTful, SOAP, you name it…)
    mysql, postgres
    filesystem I/O (session files)
    78
    

    View Slide

79. I/O is everywhere
    third party HTTP APIs (RESTful, SOAP, you name it…)
    mysql, postgres
    filesystem I/O (session files)
    redis, memcache 79
    

    View Slide

80. 80
    Source: Latency Numbers Every Programmer Should Know: https://gist.github.com/jboner/2841832
    CPU vs I/O
    

    View Slide

81. I/O is slow!
    81
    

    View Slide

82. I/O is slow!
    So why wait?
    82
    

    View Slide

83. This is React
    83
    

    View Slide

84. This is React
    84
    Start multiple I/O operations (non-blocking)
    

    View Slide

85. This is React
    85
    Start multiple I/O operations (non-blocking)
    Get notified when something happens (react)
    

    View Slide

86. This is React
    86
    Start multiple I/O operations (non-blocking)
    Get notified when something happens (react)
    Don’t waste time waiting
    

    View Slide

87. What React is not
    87
    

    View Slide

88. What React is not
    React is not black magic / vodoo
    88
    

    View Slide

89. What React is not
    React is not black magic / vodoo
    React is not a framework
    89
    

    View Slide

90. What React is not
    React is not black magic / vodoo
    React is not a framework
    React is not the new buzz
    90
    

    View Slide

91. React core components
    91
    

    View Slide

92. event loop
    92
    

    View Slide

93. Event loop
    Consumers
    - THE core, low-level component
    93
    

    View Slide

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
    

    View Slide

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
    

    View Slide

96. Event loop
    Implementors
    - Reactor pattern (hence the name)
    96
    

    View Slide

97. Event loop
    Implementors
    - Reactor pattern (hence the name)
    - start timers
    - once
    - periodic
    - ticks
    97
    

    View Slide

98. Event loop
    Implementors
    - Reactor pattern (hence the name)
    - start timers
    - once
    - periodic
    - ticks
    98
    

    View Slide

99. Event loop
    Implementors
    - Reactor pattern (hence the name)
    - start timers
    - once
    - periodic
    - ticks
    99
    

    View Slide

100. Event loop
     Implementors
     - Reactor pattern (hence the name)
     - start timers
     - once
     - periodic
     - ticks
     - plus wait for stream resources to become
     - readable
     - writable
     100
     

     View Slide

101. streaming data
     101
     

     View Slide

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
     

     View Slide

103. Stream interfaces and events
     103
     

     View Slide

104. Stream interfaces and events
     104
     

     View Slide

105. Stream interfaces and events
     105
     

     View Slide

106. sockets
     106
     

     View Slide

107. Sockets
     107
     - Streams, but over the network
     

     View Slide

108. Sockets
     108
     - Streams, but over the network
     - servers listen
     - clients connect
     

     View Slide

109. Sockets
     109
     - Streams, but over the network
     - servers listen
     - clients connect
     - Focus on TCP/IP (UDP etc. also possible)
     

     View Slide

110. Sockets
     110
     - Streams, but over the network
     - servers listen
     - clients connect
     - Focus on TCP/IP (UDP etc. also possible)
     

     View Slide

111. Sockets
     111
     - Streams, but over the network
     - servers listen
     - clients connect
     - Focus on TCP/IP (UDP etc. also possible)
     

     View Slide

112. Sockets
     112
     - Streams, but over the network
     - servers listen
     - clients connect
     - Focus on TCP/IP (UDP etc. also possible)
     

     View Slide

113. Sockets
     113
     - Streams, but over the network
     - servers listen
     - clients connect
     - Focus on TCP/IP (UDP etc. also possible)
     

     View Slide

114. Sockets in practice
     114
     

     View Slide

115. Sockets in practice
     - implementation detail
     115
     

     View Slide

116. Sockets in practice
     - implementation detail
     - higher level protocols (HTTP anybody)
     116
     

     View Slide

117. Sockets in practice
     - implementation detail
     - higher level protocols (HTTP anybody)
     - higher level concepts (RESTful etc.)
     117
     

     View Slide

118. Sockets in practice
     - implementation detail
     - higher level protocols (HTTP anybody)
     - higher level concepts (RESTful etc.)
     - higher level APIs (SDKs, API clients etc.)
     118
     

     View Slide

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
     

     View Slide

120. promises
     120
     

     View Slide

121. Promises
     - Placeholder for a single future result
     - Possible states:
     - pending
     - fulfilled (successfully resolved)
     - rejected (Exception occured)
     121
     

     View Slide

122. Promise API
     122
     

     View Slide

123. Promise API
     123
     

     View Slide

124. Promise API usage
     124
     

     View Slide

125. Promise API usage
     125
     

     View Slide

126. Promise API usage
     126
     

     View Slide

127. Promises in practice
     -
     127
     

     View Slide

128. Promises in practice
     - Everywhere!
     128
     

     View Slide

129. Promises in practice
     - Everywhere!
     - react/socket
     - clue/buzz-react
     - clue/packagist-react
     - clue/redis-react
     - react/mysql
     - …
     129
     

     View Slide

130. HTTP streaming
     130
     

     View Slide

131. HTTP in a gist
     131
     

     View Slide

132. HTTP in a gist
     132
     GET / HTTP/1.1
     

     View Slide

133. HTTP in a gist
     133
     GET / HTTP/1.1
     HTTP/1.1 200 OK
     Content-Type: text/plain
     hello world!
     

     View Slide

134. HTTP in a gist
     134
     GET / HTTP/1.1
     HTTP/1.1 200 OK
     Content-Type: text/plain
     hello world!
     

     View Slide

135. HTTP streaming
     135
     

     View Slide

136. HTTP streaming
     136
     - HTTP request/response semantics
     

     View Slide

137. HTTP streaming
     137
     - HTTP request/response semantics
     - streaming responses (download huge files)
     - streaming requests (upload huge files)
     

     View Slide

138. HTTP streaming
     138
     - HTTP request/response semantics
     - streaming responses (download huge files)
     - streaming requests (upload huge files)
     - Still request/response semantics
     

     View Slide

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?
     

     View Slide

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?
     

     View Slide

141. EventSource
     141
     

     View Slide

142. Server-Sent Events (SSE) / EventSource
     142
     

     View Slide

143. Server-Sent Events in a gist
     143
     - Normal Request/Response
     - Client API for streaming access
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

148. fully-functional streaming
     HTTP server in a single PHP
     file
     148
     

     View Slide

149. many, MANY more third-party projects:
     https://github.com/reactphp/react/wiki/Users
     149
     

     View Slide

150. View Slide

151. Conclusions
     151
     

     View Slide

152. 152
     Can I use ReactPHP to make my website 1000x faster?
     

     View Slide

153. YES
     153
     Can I use ReactPHP to make my website 1000x faster?
     

     View Slide

154. YES
     154
     But you might be missing the point…
     Can I use ReactPHP to make my website 1000x faster?
     

     View Slide

155. PHP
     155
     

     View Slide

156. PHP
     faster than you probably thought
     156
     

     View Slide

157. PHP
     faster than you probably thought
     more versatile than you probably thought
     157
     

     View Slide

158. ReactPHP
     158
     

     View Slide

159. ReactPHP
     159
     a real deal and here to stay
     

     View Slide

160. ReactPHP
     160
     a real deal and here to stay
     stable & production ready
     

     View Slide

161. ReactPHP
     161
     a real deal and here to stay
     stable & production ready
     *awesome*
     

     View Slide

162. try!
     162
     

     View Slide

163. try!
     whenever having to wait
     163
     

     View Slide

164. try!
     whenever having to wait
     whenever accessing network
     164
     

     View Slide

165. help!
     165
     

     View Slide

166. help!
     elaborate documentation on ReactPHP.org
     166
     

     View Slide

167. help!
     elaborate documentation on ReactPHP.org
     tweet @ReactPHP or #reactphp
     167
     

     View Slide

168. help!
     elaborate documentation on ReactPHP.org
     tweet @ReactPHP or #reactphp
     Talk to me
     168
     

     View Slide

169. help!
     elaborate documentation on ReactPHP.org
     tweet @ReactPHP or #reactphp
     Talk to me
     Did I mention I’m available? 169
     

     View Slide

170. // thank you!
     $loop->stop();
     170
     @another_clue – https://lueck.tv/
     

     View Slide

171. integration
     171
     

     View Slide

172. integration
     non-blocking and blocking don’t mix well
     172
     

     View Slide

173. integration
     non-blocking and blocking don’t mix well
     decide for either approach
     173
     

     View Slide

174. integration
     non-blocking and blocking don’t mix well
     decide for either approach
     isolate & communicate
     174
     

     View Slide

175. Integration with traditional environments
     175
     integrating async into sync is easy
     

     View Slide

176. Integration with traditional environments
     176
     integrating async into sync is easy
     - just run the loop until you’re done
     - see clue/block-react
     

     View Slide

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
     

     View Slide

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
     

     View Slide

179. Avoid blocking!
     - The loop must not be blocked
     179
     

     View Slide

180. Avoid blocking!
     - The loop must not be blocked
     - Many functions / lib assume blocking by default
     - Anything >1ms should be reconsidered
     180
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide