Slide 1

Slide 1 text

1 Optimistic UI with Logux & Ruby Dmitry Salahutdinov

Slide 2

Slide 2 text

Spinner means loading… !2

Slide 3

Slide 3 text

Spinners lead to suffering… !3

Slide 4

Slide 4 text

4

Slide 5

Slide 5 text

Hey, my name is 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 9 Original image by Denys Mishunov

Slide 10

Slide 10 text

Get more confident? Original image by Denys Mishunov 10

Slide 11

Slide 11 text

11

Slide 12

Slide 12 text

Story By Denys Mishunov Original photo Why to loose time if you know how pubs work? Optimistic UI 12

Slide 13

Slide 13 text

Phycological perception !13

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

!15

Slide 16

Slide 16 text

!16

Slide 17

Slide 17 text

!17 !17

Slide 18

Slide 18 text

Original image !18

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Part 2: Technical problems !20

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Original photo 24 Original photo Being offline

Slide 25

Slide 25 text

Handing server errors 25

Slide 26

Slide 26 text

Merge conflicts 26 ❓

Slide 27

Slide 27 text

Systematic solution? !27

Slide 28

Slide 28 text

Fix it with reload button 28

Slide 29

Slide 29 text

Part 3: Solution ✅ !29

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Event sourcing Producing events instead of state updating !31

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

By Andrey Sitnik !33

Slide 34

Slide 34 text

Logux is the framework For reducing complexity !34

Slide 35

Slide 35 text

Inventing frameworks !35 Original photo

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Specifies open protocol Determines format of messages between client and server ✅ ❓ ❓ !37

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Server !39 Sync Event Broadcast Logux server Client Clients Synchronization

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Tracks the connection Defer sending until connection restores Support of Offline-mode! !41 Ping Pong Ping Synchonization… ……… Client Logux server Periodical pings

Slide 42

Slide 42 text

Lack of universal clock Time is hard in distributed systems !42 Connect Round trip time serverTime - localTime + roundTripTime / 2 Synchronize eventTime = localTime + timeShift Logux server Logux server Client Client

Slide 43

Slide 43 text

Tracks event order For applying events in proper way and replicating conflicts !43

Slide 44

Slide 44 text

Helps to merge conflicts By handling event time/order Logux is CRDT ready! !44 Changes Are not applied ❌ Clients Logux server Last win!

Slide 45

Slide 45 text

Handling server error !45 Logux server Client

Slide 46

Slide 46 text

Ruby? !46

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Part 4: Ruby backend !48

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Rails backend !50

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Convention Over configuration !53 Client Backend

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Initial state? !56

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

Offline mode demo Without any live coding !60

Slide 61

Slide 61 text

Optimistic update !61 Client Client Logux Server Rename Sync

Slide 62

Slide 62 text

!62 Optimistic update Rename Sync Client Client Logux Server

Slide 63

Slide 63 text

Optimistic update With automatic synchronization !63 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 64

Slide 64 text

!64 Chat (live updates) Chat (live updates) Chat (live updates) Comment Sync Client Client Logux Server Comment Sync

Slide 65

Slide 65 text

!65 Chat (live updates) Chat (live updates) Comment Sync Client Client Logux Server Comment Sync

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Send back to client From the server regular background task !67 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 68

Slide 68 text

• Built-in optimistic UI will improve UI performance. • Built-in live updates allow to build collaborative tools (like Google Docs). • Built-in offline-first 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 Ruby backend Wrap up !68

Slide 69

Slide 69 text

Part 5: The state of Logux !69

Slide 70

Slide 70 text

State of Logux !70

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

Thank you -❤ @logux_io @dsalahutdinov1 @logux_io @dsalahutdinov https://dev.to/amplifr https://amplifr.com https://github.com/logux/logux_rails !72