Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting started with ReactPHP – Pushing real-ti...

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

Christian Lück

June 06, 2019
Tweet

More Decks by Christian Lück

Other Decks in Programming

Transcript

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

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

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

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

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

    - event loops - streaming data - sockets - promises - real time data - Streaming HTTP - Chat bots 9
  6. 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
  7. 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
  8. 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
  9. Agenda - Hello! - Introduction to async PHP with ReactPHP

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

    - event loops - streaming data - sockets - promises - conclusions 18 examples and demo time!
  11. Who are you? 30 now that you know me… -

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

    PHP developers? - architecs / engineers? - know React?
  13. PHP and the web of the ‘90s traditional LAMP stack

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

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

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

    Request-Response-Cycle PHP is too slow? 39 nginx Client MySQL FPM PHP PHP
  17. 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
  18. Knock knock! 2019! - Separation of concerns (Frontend↔Backend) - HTTP

    APIs (RESTful) - Integration with 3rd parties - Live-Data (ticker) - CLI tools Who’s there? 45
  19. Knock knock! 2019! - Separation of concerns (Frontend↔Backend) - HTTP

    APIs (RESTful) - Integration with 3rd parties - Live-Data (ticker) - CLI tools Who’s there? 46
  20. 59

  21. 62

  22. I/O is everywhere third party HTTP APIs (RESTful, SOAP, you

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

    name it…) mysql, postgres filesystem I/O (session files) redis, memcache 79
  24. This is React 86 Start multiple I/O operations (non-blocking) Get

    notified when something happens (react) Don’t waste time waiting
  25. What React is not React is not black magic /

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

    vodoo React is not a framework React is not the new buzz 90
  27. 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
  28. 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
  29. Event loop Implementors - Reactor pattern (hence the name) -

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

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

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

    start timers - once - periodic - ticks - plus wait for stream resources to become - readable - writable 100
  33. 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
  34. Sockets 109 - Streams, but over the network - servers

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

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

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

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

    listen - clients connect - Focus on TCP/IP (UDP etc. also possible)
  39. Sockets in practice - implementation detail - higher level protocols

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

    (HTTP anybody) - higher level concepts (RESTful etc.) - higher level APIs (SDKs, API clients etc.) 118
  41. 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
  42. Promises - Placeholder for a single future result - Possible

    states: - pending - fulfilled (successfully resolved) - rejected (Exception occured) 121
  43. Promises in practice - Everywhere! - react/socket - clue/buzz-react -

    clue/packagist-react - clue/redis-react - react/mysql - … 129
  44. HTTP in a gist 133 GET / HTTP/1.1 HTTP/1.1 200

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

    OK Content-Type: text/plain hello world!
  46. HTTP streaming 137 - HTTP request/response semantics - streaming responses

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

    (download huge files) - streaming requests (upload huge files) - Still request/response semantics
  48. 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?
  49. 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?
  50. 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
  51. 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
  52. 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
  53. 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
  54. 150

  55. YES 154 But you might be missing the point… Can

    I use ReactPHP to make my website 1000x faster?
  56. Integration with traditional environments 176 integrating async into sync is

    easy - just run the loop until you’re done - see clue/block-react
  57. 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
  58. 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
  59. Avoid blocking! - The loop must not be blocked -

    Many functions / lib assume blocking by default - Anything >1ms should be reconsidered 180
  60. 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
  61. 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
  62. 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