Optimistic UI with Logux & Ruby (RubyRussia)

The modern web becomes more distributed: both front-end and back-end turns out to be the complicated part of the bipolar web-application. And communication between them is going to be a new challenge.

The classic AJAX problems:
- the unstable network makes AJAX based UI works annoying
- does not work offline
- there is no way to merge conflits, last processed update is accepted as the last truth

I will talk about how basic Logux concepts and how all of the work together to support the modern web features.
- UI becomes pessimistic with a huge amount of loaders and other request-time lockers
- the increasing complexity of the JavaScript code for processing AJAX requests
- AJAX work only in one way and does not allow live updates

Logux is the new way of synchronization between client and server, which provides many features for modern web out of the box: Live Updates, Optimistic UI, Offline-first.

Transcript

1. Optimistic UI with Logux & Ruby Dmitry Salahutdinov RubyRussia conference, 28 Sep 2019
2. Hey, my name is Dmitry 2 +
3. 3 About myself :)
4. AMPLIFR !4
5. 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
6. Actual web makes you to wait for spinners… !6
7. !7 Original image by Tove Jansson
8. Classic form submission Original image by Denys Mishunov !8
9. Requests statistics 9 Original image by Denys Mishunov
10. Get more optimistic? Original image by Denys Mishunov 10
11. Original photo Optimistic UI 11 Is a friend who comes to a pub already drunk He knows how pubs work and he is efficient enough not to loose time
12. !12 What do we need Optimistic UI for?
13. !13 Improves UX
14. !14 !14 By making UI better
15. Google’s RAIL Model Visual Feedback < 100ms !15
16. !16 Prevents loosing focus
17. 17 Being offline (expectation) Original image by Tove Jansson
18. 18 Being offline (reality)
19. !19 Offline-first approach Original image by Denys Mishunov vs Keep working offline
20. 20 Benefits of optimistic UI - improves UX -prevents loosing focus -offline first -and finally…….
21. 21 Lets you stop showing spinners Original image by MOOMIN CHARACTERS OY
22. !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
23. Local development Network are perfect and work as expected Original image by Nikita Prokopov !23
24. Real environment Real networks are not Original image by Nikita Prokopov 24
25. 25 Reversed order
26. Handing server errors 26
27. 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’
28. 28 Handing network errors?
29. Merge conflicts 29 ❓
30. !30 Conflict merging Original slide by Martin Kleppman
31. !31 Example (counter) Original slide by Martin Kleppman
32. !32 Counter: merge increments Original slide by Martin Kleppman
33. !33 Text editing Original slide by Martin Kleppman
34. !34 Set manipulation Original slide by Martin Kleppman
36. 36 CRDT DT: data type CRDT: data type with it own structure and operation set
37. 37 CRDT R: replicated CRDT: a family of data structures which Has been designed to be distributed
38. 38 CRDT C: conflict-free CRDT: resolving conflicts is Done automatically
39. !39 Original image by Moons Characters What types?
40. 40 CRDT approach considers sync in terms of the underlying data structure Conflict free replicated data types
41. !41 Example: Grow-only Counter Counts the hits/likes, could only grow Original slide by Martin Kleppman +1 +1
42. !42 Example: Treedoc For collaborative text editing
43. 43 - Look difficult - Consume many memory - Tombstones (unbound growth) - Needs garbage collection - + Simple development CRDT props & cons Original image by Moons Characters
44. 44 Pessimistic look on optimistic UI Showing the fake data or hopeful point of view? ?
45. 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
46. !46 - Handle network errors - Handle server errors - Take care about transport - Take care about sync - Track changes time - Merge conflicts - Deal with academic CRDT Is optimistic UI a big deal? https://fuckyeahmoomins.tumblr.com/post/29899259250
47. !47 Chapter 3: Logux Where we get to know about the solution Original image by Moons Characters
48. Logux is the JS framework Introduces the new way of communication between server and client !48
49. Specifies open protocol Determines format of messages between client and server ✅ ❓ ❓ !49
50. Uses Web Sockets For bidirectional messaging and live updates Live updates! build collaborative tools (like G oogle D ocs) !50 WebSockets Client Logux server
51. Instrumentation The stand-alone Logux server and the client-side npm package !51 WSS WSS Logux server Client Client
52. Logux server !52 Sync Events Broadcast events Logux server Client Clients Resync events
53. Client Redux compatible API, synchronises log automatically, has UI Widgets !53 Client Logux server
54. Tracks the connection Defer sending until connection restores Support of Offline-mode! !54 Ping Pong Ping Synchonization… ……… Client Logux server Periodical pings
55. 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
56. Tracks event order For applying events in proper way and replicating conflicts !56
57. Helps to merge conflicts By handling event time/order Logux is CRDT ready! !57 Changes Are not applied ❌ Clients Logux server
58. 58 Helps to merge conflicts
59. Handling server error !59 Logux server Client
60. Ruby developers! Logux for? Existing Ruby backend! !60
61. 61 Chapter 4: Ruby backend integration Where the hidden magic is helping backend developers to keep things simple Original image by Tove Jansson
62. HTTP backend Forwards events from Logux-server over HTTP !62 HTTP protocol WSS WSS Backend Logux server Clients Forward events Backward synchronisation
63. Ruby/Rails backend !63
64. !64 Railsless
65. Action & Meta Event representation and it’s metadata Destination scope: channel Event type Event params !65
66. Authentication With credentials round trip !66 Token Connect Auth Backend Client Logux Server
67. Convention !67 Client Backend Over configuration
68. Channels Logux maintains channels natively !68 Subscribe Subscribed Sync subscribed Initial state Sync initial state Send data Broadcast data Backend Logux Server Client
69. Channel initialisation Send “initial state” data to the subscribed client !69 Initial state Sync initial state Backend Logux Server Client
70. Initial state? !70
71. Backward sync Triggers event on backend, and synchronises with clients Broadcast Backend Logux Server Subscribed clients
72. Undo !72 Rename: ‘new name’ Subscribed Undo: ‘rename’ Backend Logux Server Client Rename: ‘new name’ Error Undo: ‘rename’ New name Old name ❌
73. !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
74. Optimistic update !74 Client Client Logux Server Rename Sync
75. !75 Optimistic update Rename Sync Client Client Logux Server
76. 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
77. !77 Chat (live updates) Chat (live updates) Live updates Comment Sync Client Client Logux Server Comment Sync
78. !78 Chat (live updates) Live updates Comment Sync Client Client Logux Server Comment Sync
79. Backward sync Centralized UI update initiated by from backend !79 Actual currency rate http://amplifr.com Backend
80. 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
81. !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
82. 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 offline-first Logux support modern front-end Infrastructure and easily could be Integrated with Ruby backend
83. !83 “True Lies Of Optimistic User Interfaces”
 (by Denys Mishunov) many thanks to Denys for the opportunity to use his illustrations
84. 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.