Optimistic UI and live updates with Logux & Ruby

Slide 1

Slide 1 text

Optimistic UI and Live updates with Logux & Ruby Dmitry Salahutdinov 1

Slide 2

Slide 2 text

Spinner means loading… !2

Slide 3

Slide 3 text

Spinners leads to suﬀering… !3

Slide 4

Slide 4 text

Spinners make users get upset 4

Slide 5

Slide 5 text

Cześć, nazywam się Dmitry 5

Slide 6

Slide 6 text

AMPLIFR !6

Slide 7

Slide 7 text

Part 1: Optimistic UI 7

Slide 8

Slide 8 text

Classic form submission Original image by Denys Mishunov !8

Slide 9

Slide 9 text

Requests statistics 0 25 50 75 100 Failure Success 9

Slide 10

Slide 10 text

Get more conﬁdent? Original image by Denys Mishunov 10

Slide 11

Slide 11 text

Story By Denys Mishunov Original photo I know how pubs work Why do I have to loose time? Be optimistic: 11

Slide 12

Slide 12 text

Why Optimistic UI matters? Kind of activity correlates with the phycological perception Will pay for a book Will pay for renting a bike Will not ❌ !12

Slide 13

Slide 13 text

Google’s RAIL Model Visual Feedback < 100ms !13

Slide 14

Slide 14 text

!14

Slide 15

Slide 15 text

Pessimistic Twitter? !15

Slide 16

Slide 16 text

Original image !16

Slide 17

Slide 17 text

What do we want? OPTIMISTIC UI!!! !17

Slide 18

Slide 18 text

Part 2: Technical problems !18

Slide 19

Slide 19 text

Local development Network are perfect Original image by Nikita Prokopov !19

Slide 20

Slide 20 text

Real internet Real networks are not Original image by Nikita Prokopov 20

Slide 21

Slide 21 text

1) Handing network errors In case the UI already was updated, but request failed 21

Slide 22

Slide 22 text

Original photo 22

Slide 23

Slide 23 text

2) Handing server errors 23

Slide 24

Slide 24 text

3) Conﬂict replication 24

Slide 25

Slide 25 text

Systematic solution? !25

Slide 26

Slide 26 text

Without any page reload 26

Slide 27

Slide 27 text

Part 3: Solution ✅ !27

Slide 28

Slide 28 text

Based on rocket science Apply well-known ideas and concepts of CS for the Web computer !28

Slide 29

Slide 29 text

Event sourcing Producing events instead of state updating !29

Slide 30

Slide 30 text

Distributed systems Consider modern web-application as DS of many communicating nodes !30

Slide 31

Slide 31 text

By Andrey Sitnik !31

Slide 32

Slide 32 text

Logux is the framework For reducing complexity !32

Slide 33

Slide 33 text

Original image Inventing frameworks !33

Slide 34

Slide 34 text

Uses Web Sockets For bidirectional messaging Live updates! build collaborative tools (like G oogle D ocs) !34

Slide 35

Slide 35 text

Speciﬁes open protocol Determines format of messages between client and server ✅ ❓ ❓ !35

Slide 36

Slide 36 text

Provides instrumentation The stand-alone Logux server and the client-side npm package !36

Slide 37

Slide 37 text

Logux server !37

Slide 38

Slide 38 text

Logux client Redux compatible API, synchronises log automatically, has UI Widgets !38

Slide 39

Slide 39 text

Tracks the connection Defer sending until connection restores O ﬄ ine-m ode! !39

Slide 40

Slide 40 text

Lack of universal clock Time is hard in distributed systems !40

Slide 41

Slide 41 text

Tracks event order For applying events in proper way and replicating conﬂicts !41

Slide 42

Slide 42 text

Helps to merge conﬂicts By handling event time/order C R D T ready! !42

Slide 43

Slide 43 text

Handling server error !43

Slide 44

Slide 44 text

Ruby? !44

Slide 45

Slide 45 text

Ruby developers! What do we want Logux for? Existing Ruby backend! !45

Slide 46

Slide 46 text

Part 4: Ruby backend !46

Slide 47

Slide 47 text

Logux proxy Forwards events from Logux-server to any backend over HTTP !47

Slide 48

Slide 48 text

Rails backend !48

Slide 49

Slide 49 text

Action & Meta Event representation and it’s metadata Channel of the Project 9 Event type Custom event params Event ID !49

Slide 50

Slide 50 text

Authentication With credentials !50

Slide 51

Slide 51 text

Action dispatch Abstraction to represent an event !51

Slide 52

Slide 52 text

Logux channels Logux maintains channels automatically asking backend to send initial data !52

Slide 53

Slide 53 text

Channels in Ruby Send “current state” data to the subscribed client !53

Slide 54

Slide 54 text

Channel initial state !54

Slide 55

Slide 55 text

Sending back to client Producing event on backend and make Logux to send it to speciﬁc user/channel !55

Slide 56

Slide 56 text

“Last wins” update Compare timestamps Conditional updates when last event timestamp is later !56

Slide 57

Slide 57 text

Error processing (undo) !57

Slide 58

Slide 58 text

Production demo Without any live coding :) !58

Slide 59

Slide 59 text

Update with Optimistic UI !59

Slide 60

Slide 60 text

Update with Optimistic UI From server regular rake task (centralised currency rate update) !60

Slide 61

Slide 61 text

Post discussions !61

Slide 62

Slide 62 text

Post discussions !62

Slide 63

Slide 63 text

Sent back to client Update currency rate on frontend with centralised backend job !63

Slide 64

Slide 64 text

Send back to client From server regular rake task !64

Slide 65

Slide 65 text

•Built-in optimistic UI will improve UI performance.  •Built-in live updates allow to build collaborative tools (like Google Docs).  •Built-in ofﬂine-ﬁrst will improve UX on unstable connection.  It is useful from next billion users to New York subway.  •Compatible with modern stack: Redux API, works with any back-end language and any database. Logux !65

Slide 66

Slide 66 text

Part 5: The state of Logux !66

Slide 67

Slide 67 text

State of Logux !67

Slide 68

Slide 68 text

Pure Ruby? !68 Without this very popular framework for web development

Slide 69

Slide 69 text

dziękuję ,❤ @logux_io @dsalahutdinov1 @logux_io @dsalahutdinov https://dev.to/amplifr https://amplifr.com https://github.com/logux/logux_rails !69