Optimistic UI with Logux & Ruby (RubyRussia)

Slide 1

Slide 1 text

Optimistic UI with Logux & Ruby Dmitry Salahutdinov RubyRussia conference, 28 Sep 2019

Slide 2

Slide 2 text

Hey, my name is Dmitry 2 +

Slide 3

Slide 3 text

3 About myself :)

Slide 4

Slide 4 text

AMPLIFR !4

Slide 5

Slide 5 text

Chapter 1: Optimistic UI 5 In which the author explains what is Optimistic UI and inspires listeners to try it out Original image by Tove Jansson

Slide 6

Slide 6 text

Actual web makes you to wait for spinners… !6

Slide 7

Slide 7 text

!7 Original image by Tove Jansson

Slide 8

Slide 8 text

Classic form submission Original image by Denys Mishunov !8

Slide 9

Slide 9 text

Requests statistics 9 Original image by Denys Mishunov

Slide 10

Slide 10 text

Get more optimistic? Original image by Denys Mishunov 10

Slide 11

Slide 11 text

Original photo Optimistic UI 11 Is a friend who comes to a pub already drunk He knows how pubs work and he is efﬁcient enough not to loose time

Slide 12

Slide 12 text

!12 What do we need Optimistic UI for?

Slide 13

Slide 13 text

!13 Improves UX

Slide 14

Slide 14 text

!14 !14 By making UI better

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

!16 Prevents loosing focus

Slide 17

Slide 17 text

17 Being ofﬂine (expectation) Original image by Tove Jansson

Slide 18

Slide 18 text

18 Being ofﬂine (reality)

Slide 19

Slide 19 text

!19 Offline-first approach Original image by Denys Mishunov vs Keep working offline

Slide 20

Slide 20 text

20 Benefits of optimistic UI - improves UX -prevents loosing focus -offline first -and finally…….

Slide 21

Slide 21 text

21 Lets you stop showing spinners Original image by MOOMIN CHARACTERS OY

Slide 22

Slide 22 text

!22 Chapter 2: Technical surprises In which the author talks about new challenges for brave backend developers who decided to make UI optimistic Original image by Tove Jansson

Slide 23

Slide 23 text

Local development Network are perfect and work as expected Original image by Nikita Prokopov !23

Slide 24

Slide 24 text

Real environment Real networks are not Original image by Nikita Prokopov 24

Slide 25

Slide 25 text

25 Reversed order

Slide 26

Slide 26 text

Handing server errors 26

Slide 27

Slide 27 text

Handing network errors In case the UI already was updated, but request failed 27 Client Server Network problems Name: ‘new’ Changes are applied before the request Name: ‘new’

Slide 28

Slide 28 text

28 Handing network errors?

Slide 29

Slide 29 text

Merge conﬂicts 29 ❓

Slide 30

Slide 30 text

!30 Conﬂict merging Original slide by Martin Kleppman

Slide 31

Slide 31 text

!31 Example (counter) Original slide by Martin Kleppman

Slide 32

Slide 32 text

!32 Counter: merge increments Original slide by Martin Kleppman

Slide 33

Slide 33 text

!33 Text editing Original slide by Martin Kleppman

Slide 34

Slide 34 text

!34 Set manipulation Original slide by Martin Kleppman

Slide 35

Slide 35 text

Slide 36

Slide 36 text

36 CRDT DT: data type CRDT: data type with it own structure and operation set

Slide 37

Slide 37 text

37 CRDT R: replicated CRDT: a family of data structures which Has been designed to be distributed

Slide 38

Slide 38 text

38 CRDT C: conﬂict-free CRDT: resolving conﬂicts is Done automatically

Slide 39

Slide 39 text

!39 Original image by Moons Characters What types?

Slide 40

Slide 40 text

40 CRDT approach considers sync in terms of the underlying data structure Conﬂict free replicated data types

Slide 41

Slide 41 text

!41 Example: Grow-only Counter Counts the hits/likes, could only grow Original slide by Martin Kleppman +1 +1

Slide 42

Slide 42 text

!42 Example: Treedoc For collaborative text editing

Slide 43

Slide 43 text

43 - Look difﬁcult - Consume many memory - Tombstones (unbound growth) - Needs garbage collection - + Simple development CRDT props & cons Original image by Moons Characters

Slide 44

Slide 44 text

44 Pessimistic look on optimistic UI Showing the fake data or hopeful point of view? ?

Slide 45

Slide 45 text

45 Prerequisites - make sure that the API you rely on is stable and returns predictable result - ensure API response time - identify potential errors and problems before sending a request to the server - use optimistic patterns for simple binary elements: expect a successful or failed answer - An optimistic UI is not just a click of a button. This approach can be applied to various interactions

Slide 46

Slide 46 text

!46 - Handle network errors - Handle server errors - Take care about transport - Take care about sync - Track changes time - Merge conﬂicts - Deal with academic CRDT Is optimistic UI a big deal? https://fuckyeahmoomins.tumblr.com/post/29899259250

Slide 47

Slide 47 text

!47 Chapter 3: Logux Where we get to know about the solution Original image by Moons Characters

Slide 48

Slide 48 text

Logux is the JS framework Introduces the new way of communication between server and client !48

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Uses Web Sockets For bidirectional messaging and live updates Live updates! build collaborative tools (like G oogle D ocs) !50 WebSockets Client Logux server

Slide 51

Slide 51 text

Instrumentation The stand-alone Logux server and the client-side npm package !51 WSS WSS Logux server Client Client

Slide 52

Slide 52 text

Logux server !52 Sync Events Broadcast events Logux server Client Clients Resync events

Slide 53

Slide 53 text

Client Redux compatible API, synchronises log automatically, has UI Widgets !53 Client Logux server

Slide 54

Slide 54 text

Tracks the connection Defer sending until connection restores Support of Oﬄine-mode! !54 Ping Pong Ping Synchonization… ……… Client Logux server Periodical pings

Slide 55

Slide 55 text

Keeps event ordering Time is hard in distributed systems !55 Connect Round trip time serverTime - localTime + roundTripTime / 2 Synchronize eventTime = localTime + timeShift Logux server Logux server Client Client

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

Helps to merge conﬂicts By handling event time/order Logux is CRDT ready! !57 Changes Are not applied ❌ Clients Logux server

Slide 58

Slide 58 text

58 Helps to merge conﬂicts

Slide 59

Slide 59 text

Handling server error !59 Logux server Client

Slide 60

Slide 60 text

Ruby developers! Logux for? Existing Ruby backend! !60

Slide 61

Slide 61 text

61 Chapter 4: Ruby backend integration Where the hidden magic is helping backend developers to keep things simple Original image by Tove Jansson

Slide 62

Slide 62 text

HTTP backend Forwards events from Logux-server over HTTP !62 HTTP protocol WSS WSS Backend Logux server Clients Forward events Backward synchronisation

Slide 63

Slide 63 text

Ruby/Rails backend !63

Slide 64

Slide 64 text

!64 Railsless

Slide 65

Slide 65 text

Action & Meta Event representation and it’s metadata Destination scope: channel Event type Event params !65

Slide 66

Slide 66 text

Authentication With credentials round trip !66 Token Connect Auth Backend Client Logux Server

Slide 67

Slide 67 text

Convention !67 Client Backend Over conﬁguration

Slide 68

Slide 68 text

Channels Logux maintains channels natively !68 Subscribe Subscribed Sync subscribed Initial state Sync initial state Send data Broadcast data Backend Logux Server Client

Slide 69

Slide 69 text

Channel initialisation Send “initial state” data to the subscribed client !69 Initial state Sync initial state Backend Logux Server Client

Slide 70

Slide 70 text

Initial state? !70

Slide 71

Slide 71 text

Backward sync Triggers event on backend, and synchronises with clients Broadcast Backend Logux Server Subscribed clients

Slide 72

Slide 72 text

Undo !72 Rename: ‘new name’ Subscribed Undo: ‘rename’ Backend Logux Server Client Rename: ‘new name’ Error Undo: ‘rename’ New name Old name ❌

Slide 73

Slide 73 text

!73 Chapter 5: Getting all together A couple of stories where all magiс reinforces each other to make everyone happy Original image by Tove Jansson

Slide 74

Slide 74 text

Optimistic update !74 Client Client Logux Server Rename Sync

Slide 75

Slide 75 text

!75 Optimistic update Rename Sync Client Client Logux Server

Slide 76

Slide 76 text

Optimistic update With automatic synchronization !76 Subscribe to ‘project/123’ Backend Logux Server Client Client Subscribe to ‘project/123’ ‘new name’ to ‘project/123’ ‘new name’ to ‘project/123’ ‘new name’ to ‘project/123’ Subscribe to ‘project/123’ Subscribe to ‘project/123’ New name New name New name

Slide 77

Slide 77 text

!77 Chat (live updates) Chat (live updates) Live updates Comment Sync Client Client Logux Server Comment Sync

Slide 78

Slide 78 text

!78 Chat (live updates) Live updates Comment Sync Client Client Logux Server Comment Sync

Slide 79

Slide 79 text

Backward sync Centralized UI update initiated by from backend !79 Actual currency rate http://amplifr.com Backend

Slide 80

Slide 80 text

Send back to client From the server regular background task !80 Subscribe to ‘prices’ Backend Logux Server Client Client Subscribe to ‘prices’ update currency rate update currency rate update currency rate Subscribe to ‘prices’ Subscribe to ‘prices’ Rake Task

Slide 81

Slide 81 text

!81 Epilogue In which author is talking a couple of stories where all magiс reinforces each other to make everyone happy Original image by Moons Characters

Slide 82

Slide 82 text

82 Optimistic UI could improve the UX It not a “silver button” Logux is production ready solution For doing UI in optimistic way with Live updates and ofﬂine-ﬁrst Logux support modern front-end Infrastructure and easily could be Integrated with Ruby backend

Slide 83

Slide 83 text

!83 “True Lies Of Optimistic User Interfaces”  (by Denys Mishunov) many thanks to Denys for the opportunity to use his illustrations

Slide 84

Slide 84 text

Thank you ❤ @logux_io @dsalahutdinov1 @logux @dsalahutdinov https://dev.to/amplifr https://github.com/logux/logux_rails https://amplifr.com https://github.com/logux/logux-rack Moomin images rights are owned MOOMIN CHARACTERS OY.