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

Slide 1

Slide 1 text

getting started with ReactPHP pushing real time data to the browser

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

really? 13

Slide 14

Slide 14 text

this is YOUR workshop 14

Slide 15

Slide 15 text

you need: Composer + wifi 15

Slide 16

Slide 16 text

I encourage feedback, questions + suggestions 16

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Agenda - Hello! - Introduction to async PHP with ReactPHP - event loops - streaming data - sockets - promises - event-driven, streaming application development - Conclusions 18

Slide 19

Slide 19 text

Hello! 19

Slide 20

Slide 20 text

$ whoami 20

Slide 21

Slide 21 text

$ whoami Christian Lück 21

Slide 22

Slide 22 text

$ whoami Christian LÃ¼ck 22

Slide 23

Slide 23 text

$ whoami Christian Lueck 23

Slide 24

Slide 24 text

$ whoami Christian Lueck 24

Slide 25

Slide 25 text

$ whoami Christian Lueck @clue 25

Slide 26

Slide 26 text

$ whoami Christian Lueck @another_clue 26

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Who are you? 29 now that you know me…

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Slide 33

Slide 33 text

The other React™ 33

Slide 34

Slide 34 text

The REAL React™ 34

Slide 35

Slide 35 text

PHP, the web of the ‘90s? 35

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

PHP and the web of the ‘90s - traditional LAMP stack - Request-Response-Cycle - PHP is too slow? - We sure can improve this… 37 Apache Client PHP MySQL

Slide 38

Slide 38 text

PHP and the web of the ‘90s - traditional LAMP stack - Request-Response-Cycle - PHP is too slow? - We sure can improve this… 38 Apache Client PHP MySQL Apache Client FPM MySQL PHP PHP

Slide 39

Slide 39 text

PHP and the web of the ‘90s - traditional LAMP stack - Request-Response-Cycle - PHP is too slow? - We sure can improve this… 39 Apache Client PHP MySQL Apache Client FPM MySQL PHP PHP nginx Client FPM MySQL PHP PHP

Slide 40

Slide 40 text

PHP and the web of the ‘90s - traditional LAMP stack - Request-Response-Cycle - PHP is too slow? - We sure can improve this… 40 Apache Client PHP MySQL Apache Client FPM MySQL PHP PHP nginx Client FPM MySQL PHP PHP nginx Client FPM memcache PHP PHP MySQL

Slide 41

Slide 41 text

PHP may not be pretty… 41

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Knock knock! Who’s there? 43

Slide 44

Slide 44 text

Knock knock! 2018! Who’s there? 44

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

nodejs? 46

Slide 47

Slide 47 text

no js! 47

Slide 48

Slide 48 text

Enter React! 48

Slide 49

Slide 49 text

What is React? 49

Slide 50

Slide 50 text

What is React? non-blocking I/O 50

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

100% 53

Slide 54

Slide 54 text

100% pure PHP 54

Slide 55

Slide 55 text

100% pure PHP no extensions 55

Slide 56

Slide 56 text

100% pure PHP no extensions no magic 56

Slide 57

Slide 57 text

What does that even mean?! 57

Slide 58

Slide 58 text

the idea 58

Slide 59

Slide 59 text

the idea calculations are fast 59

Slide 60

Slide 60 text

the idea calculations are fast I/O is slow 60

Slide 61

Slide 61 text

I/O is everywhere 61

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

I/O is slow! 67

Slide 68

Slide 68 text

I/O is slow! So why wait? 68

Slide 69

Slide 69 text

This is React 69

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

What React is not 73

Slide 74

Slide 74 text

What React is not React is not black magic / vodoo 74

Slide 75

Slide 75 text

What React is not React is not black magic / vodoo React is not a framework 75

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

React core components 77

Slide 78

Slide 78 text

event loops 78

Slide 79

Slide 79 text

Event loop Consumers - THE core, low-level component 79

Slide 80

Slide 80 text

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 80

Slide 81

Slide 81 text

Slide 82

Slide 82 text

Event loop Implementors - Reactor pattern (hence the name) 82

Slide 83

Slide 83 text

Event loop Implementors - Reactor pattern (hence the name) - start timers - once - periodic - ticks 83 $loop->addTimer(0.5, function () { echo ‘world’; }); $loop->addTimer(0.3, function () { echo ‘hello’; });

Slide 84

Slide 84 text

Event loop Implementors - Reactor pattern (hence the name) - start timers - once - periodic - ticks - wait for stream resources to become - readable - writable 84 $loop->addTimer(0.5, function () { echo ‘world’; }); $loop->addTimer(0.3, function () { echo ‘hello’; }); $loop->addReadStream($stream, $fn); $loop->addWriteStream($stream, $fn);

Slide 85

Slide 85 text

Slide 86

Slide 86 text

streaming data 86

Slide 87

Slide 87 text

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) 87

Slide 88

Slide 88 text

Streams - interfaces, events and listeners: 88 $dest->write(‘hello’); $source->on(‘data’, function ($data) { var_dump($data); }); $source->on(‘close’, function () { echo ‘stream closed’; });

Slide 89

Slide 89 text

Streams - interfaces, events and listeners: 89 $dest->write(‘hello’); $source->on(‘data’, function ($data) { var_dump($data); }); $source->on(‘close’, function () { echo ‘stream closed’; }); $source->pipe($gunzip)->pipe($badwords)->pipe($dest);

Slide 90

Slide 90 text

Slide 91

Slide 91 text

sockets 91

Slide 92

Slide 92 text

Sockets 92 - Streams, but over the network

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

Slide 96

Slide 96 text

Sockets in practice 96

Slide 97

Slide 97 text

Sockets in practice - implementation detail 97

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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 101

Slide 102

Slide 102 text

promises 102

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

Promises - no more imperative code flow - instead (tell, don’t ask) 104 $a->then($fulfilled = null, $rejected = null); $a->then(‘process’); $a->then(‘process’, ‘var_dump’);

Slide 105

Slide 105 text

Promises in practice - Everywhere! - react/socket - clue/buzz-react - clue/packagist-react - clue/redis-react - react/mysql 105

Slide 106

Slide 106 text

106

Slide 107

Slide 107 text

HTTP streaming 107

Slide 108

Slide 108 text

HTTP streaming 108 - HTTP request/response semantics - streaming responses (download huge files) - streaming requests (upload huge files) - Still request/response semantics - Long-polling (Comet) anyone?

Slide 109

Slide 109 text

EventSource 109

Slide 110

Slide 110 text

Server-Sent Events (SSE) / EventSource 110

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

Server-Sent Events in a gist 112 - Normal Request/Response - Client API for streaming access HTTP/1.1 200 OK Content-Type: text/event-stream

Slide 113

Slide 113 text

Server-Sent Events in a gist 113 - Normal Request/Response - Client API for streaming access HTTP/1.1 200 OK Content-Type: text/event-stream data: hello

Slide 114

Slide 114 text

Server-Sent Events in a gist 114 - Normal Request/Response - Client API for streaming access HTTP/1.1 200 OK Content-Type: text/event-stream data: hello data: world

Slide 115

Slide 115 text

115

Slide 116

Slide 116 text

Server sent events clue/sse-react - Server sent events (SSE) - aka. EventSource (browser API) - Streaming events to browser - limited browser support 116

Slide 117

Slide 117 text

WebSocket 117

Slide 118

Slide 118 text

WebSocket 118 - HTTP Upgrade - Binary protocol - Bidirectional communication - Do you need this?

Slide 119

Slide 119 text

Websocket server cboden/ratchet - Async WebSocket server - bidirectional data flow between browser and server - better browser support 119

Slide 120

Slide 120 text

GUIs 120

Slide 121

Slide 121 text

Zenity clue/zenity-react - PHP desktop GUI applications - very simple, Promise-based 121

Slide 122

Slide 122 text

122

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

Conclusions 124

Slide 125

Slide 125 text

PHP 125

Slide 126

Slide 126 text

PHP faster than you probably thought 126

Slide 127

Slide 127 text

PHP faster than you probably thought more versatile than you probably thought 127

Slide 128

Slide 128 text

ReactPHP 128

Slide 129

Slide 129 text

ReactPHP 129 a real deal and here to stay

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

try! 132

Slide 133

Slide 133 text

try! whenever having to wait 133

Slide 134

Slide 134 text

try! whenever having to wait whenever accessing network 134

Slide 135

Slide 135 text

Need help? Want to help? - check each component’s README - check open issues 135

Slide 136

Slide 136 text

Need help? Want to help? - check each component’s README - check open issues - join #reactphp on irc.freenode.org - tweet @ReactPHP or #reactphp 136

Slide 137

Slide 137 text

Need help? Want to help? - check each component’s README - check open issues - join #reactphp on irc.freenode.org - tweet @ReactPHP or #reactphp - Talk to me 137

Slide 138

Slide 138 text

Need help? Want to help? - check each component’s README - check open issues - join #reactphp on irc.freenode.org - tweet @ReactPHP or #reactphp - Talk to me Did I mention I’m available? 138

Slide 139

Slide 139 text

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

Slide 140

Slide 140 text

Avoid blocking! - The loop must not be blocked 140

Slide 141

Slide 141 text

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

Slide 142

Slide 142 text

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 142

Slide 143

Slide 143 text

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 143

Slide 144

Slide 144 text

Slide 145

Slide 145 text

Integration with traditional environments 145 integrating async into sync is easy

Slide 146

Slide 146 text

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

Slide 147

Slide 147 text

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

Slide 148

Slide 148 text

Integration with traditional environments 148 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