Optimistic UI with Logux & Ruby

Logux is the new way of synchronisation between client and server, which provides many features for modern web out of the box: live updates, optimistic UI, Offline-first.

Introduce logux_rails Ruby gem for easy integration Logux into existing Ruby/Rails backend.

Transcript

1. 1 Optimistic UI with Logux & Ruby Dmitry Salahutdinov
2. Spinner means loading… !2
3. Spinners lead to suffering… !3
5. Hey, my name is Dmitry 5 +
6. AMPLIFR !6
7. Part 1: Optimistic UI 7
8. Classic form submission Original image by Denys Mishunov !8
9. Requests statistics 9 Original image by Denys Mishunov
10. Get more confident? Original image by Denys Mishunov 10
12. Story By Denys Mishunov Original photo Why to loose time if you know how pubs work? Optimistic UI 12
13. Phycological perception !13
14. Google’s RAIL Model Visual Feedback < 100ms !14
15. !15
16. !16
17. !17 !17
18. Original image !18
19. What do we want? OPTIMISTIC UI!!! !19
20. Part 2: Technical problems !20
21. Local development Network are perfect Original image by Nikita Prokopov !21
22. Real internet Real networks are not Original image by Nikita Prokopov 22
23. 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’
24. Original photo 24 Original photo Being offline
25. Handing server errors 25
26. Merge conflicts 26 ❓
27. Systematic solution? !27
28. Fix it with reload button 28
29. Part 3: Solution ✅ !29
30. Based on rocket science Apply well-known ideas and concepts of CS for the Web computer !30
31. Event sourcing Producing events instead of state updating !31
32. Distributed systems Consider modern web-application as DS of many communicating nodes !32
33. By Andrey Sitnik !33
34. Logux is the framework For reducing complexity !34
35. Inventing frameworks !35 Original photo
36. Uses Web Sockets For bidirectional messaging and live updates Live updates! build collaborative tools (like G oogle D ocs) !36 WebSockets Client Logux server
37. Specifies open protocol Determines format of messages between client and server ✅ ❓ ❓ !37
38. Instrumentation The stand-alone Logux server and the client-side npm package !38 WSS WSS Logux server Client Client
39. Server !39 Sync Event Broadcast Logux server Client Clients Synchronization
40. Client Redux compatible API, synchronises log automatically, has UI Widgets !40 Client Logux server
41. Tracks the connection Defer sending until connection restores Support of Offline-mode! !41 Ping Pong Ping Synchonization… ……… Client Logux server Periodical pings
42. 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
43. Tracks event order For applying events in proper way and replicating conflicts !43
44. Helps to merge conflicts By handling event time/order Logux is CRDT ready! !44 Changes Are not applied ❌ Clients Logux server Last win!
45. Handling server error !45 Logux server Client
46. Ruby? !46
47. Ruby developers! Logux for? Existing Ruby backend! !47
48. Part 4: Ruby backend !48
49. HTTP backend Forwards events from Logux-server over HTTP !49 HTTP protocol WSS WSS Backend Logux server Clients Forward events Backward synchronisation
50. Rails backend !50
51. Action & Meta Event representation and it’s metadata Destination scope: channel Event type Event params !51
52. Authentication With credentials round trip !52 Token Connect Auth Backend Client Logux Server
53. Convention Over configuration !53 Client Backend
54. Channels Logux maintains channels natively !54 Subscribe Subscribed Sync subscribed Initial state Sync initial state Send data Broadcast data Backend Logux Server Client
55. Channel initialisation Send “initial state” data to the subscribed client !55 Initial state Sync initial state Backend Logux Server Client
56. Initial state? !56
57. Backward sync Triggers event on backend, and synchronises with clients Broadcast Backend Logux Server Subscribed clients
58. “Last wins” update Compare timestamps Conditional updates when last event timestamp is later !58
59. Undo !59 Rename: ‘new name’ Subscribed Undo: ‘rename’ Backend Logux Server Client Rename: ‘new name’ Error Undo: ‘rename’ New name Old name ❌
60. Offline mode demo Without any live coding !60
61. Optimistic update !61 Client Client Logux Server Rename Sync
62. !62 Optimistic update Rename Sync Client Client Logux Server
63. 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
64. !64 Chat (live updates) Chat (live updates) Chat (live updates) Comment Sync Client Client Logux Server Comment Sync
65. !65 Chat (live updates) Chat (live updates) Comment Sync Client Client Logux Server Comment Sync
66. Backward sync Centralized UI update initiated by from backend !66 Actual currency rate http://amplifr.com Backend
67. 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
68. • 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
69. Part 5: The state of Logux !69
70. State of Logux !70
71. Pure Ruby? !71 Without this very popular framework for web development
72. Thank you -❤ @logux_io @dsalahutdinov1 @logux_io @dsalahutdinov https://dev.to/amplifr https://amplifr.com https://github.com/logux/logux_rails !72