Optimistic UI and live updates 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. Optimistic UI and Live updates with Logux & Ruby Dmitry Salahutdinov 1
2. Spinner means loading… !2
3. Spinners leads to suffering… !3
4. Spinners make users get upset 4
5. Cześć, nazywam się Dmitry 5
6. AMPLIFR !6
7. Part 1: Optimistic UI 7
8. Classic form submission Original image by Denys Mishunov !8
9. Requests statistics 0 25 50 75 100 Failure Success 9
10. Get more confident? Original image by Denys Mishunov 10
11. Story By Denys Mishunov Original photo I know how pubs work Why do I have to loose time? Be optimistic: 11
12. 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
13. Google’s RAIL Model Visual Feedback < 100ms !13
14. !14
15. Pessimistic Twitter? !15
16. Original image !16
17. What do we want? OPTIMISTIC UI!!! !17
18. Part 2: Technical problems !18
19. Local development Network are perfect Original image by Nikita Prokopov !19
20. Real internet Real networks are not Original image by Nikita Prokopov 20
21. 1) Handing network errors In case the UI already was updated, but request failed 21
22. Original photo 22
23. 2) Handing server errors 23
24. 3) Conflict replication 24
25. Systematic solution? !25
26. Without any page reload 26
27. Part 3: Solution ✅ !27
28. Based on rocket science Apply well-known ideas and concepts of CS for the Web computer !28
29. Event sourcing Producing events instead of state updating !29
30. Distributed systems Consider modern web-application as DS of many communicating nodes !30
31. By Andrey Sitnik !31
32. Logux is the framework For reducing complexity !32
33. Original image Inventing frameworks !33
34. Uses Web Sockets For bidirectional messaging Live updates! build collaborative tools (like G oogle D ocs) !34
35. Specifies open protocol Determines format of messages between client and server ✅ ❓ ❓ !35
36. Provides instrumentation The stand-alone Logux server and the client-side npm package !36
37. Logux server !37
38. Logux client Redux compatible API, synchronises log automatically, has UI Widgets !38
39. Tracks the connection Defer sending until connection restores O ffl ine-m ode! !39
40. Lack of universal clock Time is hard in distributed systems !40
41. Tracks event order For applying events in proper way and replicating conflicts !41
42. Helps to merge conflicts By handling event time/order C R D T ready! !42
43. Handling server error !43
44. Ruby? !44
45. Ruby developers! What do we want Logux for? Existing Ruby backend! !45
46. Part 4: Ruby backend !46
47. Logux proxy Forwards events from Logux-server to any backend over HTTP !47
48. Rails backend !48
49. Action & Meta Event representation and it’s metadata Channel of the Project 9 Event type Custom event params Event ID !49
50. Authentication With credentials !50
51. Action dispatch Abstraction to represent an event !51
52. Logux channels Logux maintains channels automatically asking backend to send initial data !52
53. Channels in Ruby Send “current state” data to the subscribed client !53
54. Channel initial state !54
55. Sending back to client Producing event on backend and make Logux to send it to specific user/channel !55
56. “Last wins” update Compare timestamps Conditional updates when last event timestamp is later !56
57. Error processing (undo) !57
58. Production demo Without any live coding :) !58
59. Update with Optimistic UI !59
60. Update with Optimistic UI From server regular rake task (centralised currency rate update) !60
61. Post discussions !61
62. Post discussions !62
63. Sent back to client Update currency rate on frontend with centralised backend job !63
64. Send back to client From server regular rake task !64
65. •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 any back-end language and any database. Logux !65
66. Part 5: The state of Logux !66
67. State of Logux !67
68. Pure Ruby? !68 Without this very popular framework for web development
69. dziękuję ,❤ @logux_io @dsalahutdinov1 @logux_io @dsalahutdinov https://dev.to/amplifr https://amplifr.com https://github.com/logux/logux_rails !69