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

getting started with ReactPHP pushing real-time data to the browser
@another_clue

@another_clue Agenda - Hello! - Introduction to async PHP with
ReactPHP 2

ReactPHP - event loops 3

ReactPHP - event loops - streaming data 4

ReactPHP - event loops - streaming data - sockets 5

ReactPHP - event loops - streaming data - sockets - promises 6

ReactPHP - event loops - streaming data - sockets - promises - real time data 7

ReactPHP - event loops - streaming data - sockets - promises - real time data - Streaming HTTP 8

ReactPHP - event loops - streaming data - sockets - promises - real time data - Streaming HTTP - Chat bots 9

ReactPHP - event loops - streaming data - sockets - promises - real time data - Streaming HTTP - Chat bots - interactive CLI tools 10

ReactPHP - event loops - streaming data - sockets - promises - real time data - Streaming HTTP - Chat bots - interactive CLI tools - desktop GUI 11

@another_clue Agenda 12 - 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

@another_clue really? 13

@another_clue this is a getting started guide 14

@another_clue pushing real-time data to the browser 15

@another_clue I encourage feedback, questions + suggestions 16

ReactPHP - event loops - streaming data - sockets - promises - conclusions 17

ReactPHP - event loops - streaming data - sockets - promises - conclusions 18 examples and demo time!

@another_clue Hello! 19

@another_clue $ whoami 20

@another_clue $ whoami Christian Lück 21

@another_clue $ whoami Christian LÃ¼ck 22

@another_clue $ whoami Christian Lueck 23

@another_clue $ whoami Christian Lueck 24

@another_clue $ whoami Christian Lueck @clue 25

@another_clue $ whoami Christian Lueck @another_clue 26

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

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

@another_clue Who are you? 29 now that you know me…

- PHP developers? - architecs / engineers?

- PHP developers? - architecs / engineers? - know React?

@another_clue PHP, the web of the ‘90s? 32

@another_clue PHP and the web of the ‘90s 33

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

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

stack Request-Response-Cycle 36 Apache Client PHP MySQL

stack Request-Response-Cycle PHP is too slow? 37 Apache Client PHP MySQL

stack Request-Response-Cycle PHP is too slow? 38 Apache Client MySQL FPM PHP PHP

stack Request-Response-Cycle PHP is too slow? 39 nginx Client MySQL FPM PHP PHP

stack Request-Response-Cycle PHP is too slow? 40 nginx Client FPM PHP PHP memcache MySQL

@another_clue PHP may not be pretty… 41

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

@another_clue Knock knock! Who’s there? 43

@another_clue Knock knock! 2020! Who’s there? 44

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

@another_clue Knock knock! 2020! - Separation of concerns (Frontend↔Backend) -
HTTP APIs (RESTful) - Integration with 3rd parties - Live-Data (ticker) - CLI tools Who’s there? 46

@another_clue Node.js 47

@another_clue Node.js 48 good ﬁt, huge ecosystem

@another_clue Node.js 49 good ﬁt, huge ecosystem interesting concepts

@another_clue Node.js 50 good ﬁt, huge ecosystem interesting concepts npm
install…

@another_clue nodejs? 51

@another_clue no js! 52

@another_clue Everybody’s favorite language… 53

@another_clue PHP 54

@another_clue PHP 55 gets the job done

@another_clue PHP 56 gets the job done widespread usage

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

@another_clue Enter React! 58

@another_clue 59

@another_clue The other React™ 60

@another_clue The REAL React™ 61

@another_clue 62

@another_clue What is React? 63

@another_clue What is React? non-blocking I/O 64

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

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

@another_clue 100% 67

@another_clue 100% pure PHP 68

@another_clue 100% pure PHP no extensions 69

@another_clue 100% pure PHP no extensions no magic 70

@another_clue What does that even mean?! 71

@another_clue the idea 72

@another_clue calculations are fast 73 the idea

@another_clue calculations are fast I/O is slow 74 the idea

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

@another_clue I/O is everywhere 76

@another_clue I/O is everywhere third party HTTP APIs (RESTful, SOAP,
you name it…) 77

you name it…) mysql, postgres 78

you name it…) mysql, postgres ﬁlesystem I/O (session ﬁles) 79

you name it…) mysql, postgres ﬁlesystem I/O (session ﬁles) redis, memcache 80

@another_clue I/O is slow! 81

@another_clue I/O is slow! So why wait? 82

@another_clue This is React 83

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

Get notiﬁed when something happens (react)

Get notiﬁed when something happens (react) Don’t waste time waiting

@another_clue What React is not 87

@another_clue What React is not React is not black magic
/ vodoo 88

/ vodoo React is not a framework 89

/ vodoo React is not a framework React is not the new buzz 90

@another_clue React core components 91

@another_clue event loop 92

@another_clue Event loop Consumers - THE core, low-level component 93

@another_clue 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

@another_clue 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

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

- start timers - once - periodic - ticks 97

- start timers - once - periodic - ticks - plus wait for stream resources to become - readable - writable 100

@another_clue streaming data 101

@another_clue 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

@another_clue Stream interfaces and events 103

@another_clue sockets 106

@another_clue Sockets 107 - Streams, but over the network

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

servers listen - clients connect - Focus on TCP/IP (UDP etc. also possible)

@another_clue Sockets in practice 113

@another_clue Sockets in practice - implementation detail 114

@another_clue Sockets in practice - implementation detail - higher level
protocols (HTTP anybody) 115

protocols (HTTP anybody) - higher level concepts (RESTful etc.) 116

protocols (HTTP anybody) - higher level concepts (RESTful etc.) - higher level APIs (SDKs, API clients etc.) 117

protocols (HTTP anybody) - higher level concepts (RESTful etc.) - higher level APIs (SDKs, API clients etc.) - Concepts still apply, details are hidden 118

@another_clue promises 119

@another_clue Promises - Placeholder for a single future result -
Possible states: - pending - fulﬁlled (successfully resolved) - rejected (Exception occured) 120

@another_clue Promise API 121

@another_clue Promise API 122

@another_clue Promise API usage 123

@another_clue Promises in practice - 126

@another_clue Promises in practice - Everywhere! 127

@another_clue Promises in practice - Everywhere! - react/socket - clue/buzz-react
- clue/packagist-react - clue/redis-react - react/mysql - … 128

@another_clue HTTP streaming 129

@another_clue HTTP in a gist 130

@another_clue HTTP in a gist 131 GET / HTTP/1.1

@another_clue HTTP in a gist 132 GET / HTTP/1.1 HTTP/1.1
200 OK Content-Type: text/plain hello world!

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

@another_clue HTTP streaming 134

@another_clue HTTP streaming 135 - HTTP request/response semantics

@another_clue HTTP streaming 136 - HTTP request/response semantics - streaming
responses (download huge ﬁles) - streaming requests (upload huge ﬁles)

responses (download huge ﬁles) - streaming requests (upload huge ﬁles) - Still request/response semantics

responses (download huge ﬁles) - streaming requests (upload huge ﬁles) - Still request/response semantics - Long-polling (Comet) anyone?

@another_clue EventSource 140

@another_clue Server-Sent Events (SSE) / EventSource 141

@another_clue Server-Sent Events in a gist 142 - Normal Request/Response
- Client API for streaming access

- Client API for streaming access HTTP/1.1 200 OK Content-Type: text/event-stream

- Client API for streaming access HTTP/1.1 200 OK Content-Type: text/event-stream data: hello

- Client API for streaming access HTTP/1.1 200 OK Content-Type: text/event-stream data: hello data: world

@another_clue fully-functional streaming HTTP server in a single PHP ﬁle
147

@another_clue PubSub 148

@another_clue PubSub 149 - Publish/Subscribe

@another_clue PubSub 150 - Publish/Subscribe - common pattern for distributed
system

system - message broker in between

system - message broker in between Publisher Redis Subscriber

system - message broker in between - horizontal scalability - independent components Publisher Redis Subscriber

system - message broker in between - horizontal scalability - independent components Publisher Redis Subscriber Publisher Subscriber Publisher Subscriber

@another_clue fully-functional, distributed HTTP streaming server in a single PHP
ﬁle 158

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

@another_clue Conclusions 160

@another_clue 161 Can I use ReactPHP to make my website
1000x faster?

@another_clue YES 162 Can I use ReactPHP to make my
website 1000x faster?

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

@another_clue PHP 164

@another_clue PHP faster than you probably thought 165

@another_clue PHP faster than you probably thought more versatile than
you probably thought 166

@another_clue ReactPHP 167

@another_clue ReactPHP 168 a real deal and here to stay

stable & production ready

stable & production ready *awesome*

@another_clue try! 171

@another_clue try! whenever having to wait 172

@another_clue try! whenever having to wait whenever accessing network 173

@another_clue help! 174

@another_clue help! elaborate documentation on ReactPHP.org 175

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

Talk to me 177

Talk to me Did I mention I’m available? 178

@another_clue // thank you! $loop->stop(); 179 @another_clue – https://clue.engineering/

@another_clue integration 180

@another_clue integration non-blocking and blocking don’t mix well 181

@another_clue integration non-blocking and blocking don’t mix well decide for
either approach 182

@another_clue integration non-blocking and blocking don’t mix well decide for
either approach isolate & communicate 183

@another_clue Integration with traditional environments 184 integrating async into sync
is easy

is easy - just run the loop until you’re done - see clue/block-react

is easy - just run the loop until you’re done - see clue/block-react integrating sync into async is hard

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

@another_clue Avoid blocking! - The loop must not be blocked
188

- Many functions / lib assume blocking by default - Anything >1ms should be reconsidered 189

- Many functions / lib assume blocking by default - Anything >1ms should be reconsidered - Alternatives - Single result: Promises - Evented: Streams 190

- Many functions / lib assume blocking by default - Anything >1ms should be reconsidered - Alternatives - Single result: Promises - Evented: Streams - Need a blocking function? - Fork oﬀ! - Use IPC 191

- Many functions / lib assume blocking by default - Anything >1ms should be reconsidered - Alternatives - Single result: Promises - Evented: Streams - Need a blocking function? - Fork oﬀ! - Use IPC 192 Pay attention: - PDO, mysql etc. - ﬁle system access - network access - third-party APIs

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

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

More Decks by Christian Lück

Other Decks in Programming

Featured

Transcript