Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Optimistic UI with Logux & Ruby (RubyRussia)

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.

Salahutdinov Dmitry

September 28, 2019
Tweet

More Decks by Salahutdinov Dmitry

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 20 Benefits of optimistic UI - improves UX -prevents loosing

    focus -offline first -and finally…….
  4. !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
  5. 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’
  6. 35

  7. 36 CRDT DT: data type CRDT: data type with it

    own structure and operation set
  8. 37 CRDT R: replicated CRDT: a family of data structures

    which Has been designed to be distributed
  9. 40 CRDT approach considers sync in terms of the underlying

    data structure Conflict free replicated data types
  10. 43 - Look difficult - Consume many memory - Tombstones

    (unbound growth) - Needs garbage collection - + Simple development CRDT props & cons Original image by Moons Characters
  11. 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
  12. !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
  13. !47 Chapter 3: Logux Where we get to know about

    the solution Original image by Moons Characters
  14. Logux is the JS framework Introduces the new way of

    communication between server and client !48
  15. Uses Web Sockets For bidirectional messaging and live updates Live

    updates! build collaborative tools (like G oogle D ocs) !50 WebSockets Client Logux server
  16. Tracks the connection Defer sending until connection restores Support of

    Offline-mode! !54 Ping Pong Ping Synchonization… ……… Client Logux server Periodical pings
  17. 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
  18. Helps to merge conflicts By handling event time/order Logux is

    CRDT ready! !57 Changes Are not applied ❌ Clients Logux server
  19. 61 Chapter 4: Ruby backend integration Where the hidden magic

    is helping backend developers to keep things simple Original image by Tove Jansson
  20. HTTP backend Forwards events from Logux-server over HTTP !62 HTTP

    protocol WSS WSS Backend Logux server Clients Forward events Backward synchronisation
  21. Channels Logux maintains channels natively !68 Subscribe Subscribed Sync subscribed

    Initial state Sync initial state Send data Broadcast data Backend Logux Server Client
  22. Channel initialisation Send “initial state” data to the subscribed client

    !69 Initial state Sync initial state Backend Logux Server Client
  23. Backward sync Triggers event on backend, and synchronises with clients

    Broadcast Backend Logux Server Subscribed clients
  24. Undo !72 Rename: ‘new name’ Subscribed Undo: ‘rename’ Backend Logux

    Server Client Rename: ‘new name’ Error Undo: ‘rename’ New name Old name ❌
  25. !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
  26. 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
  27. !77 Chat (live updates) Chat (live updates) Live updates Comment

    Sync Client Client Logux Server Comment Sync
  28. Backward sync Centralized UI update initiated by from backend !79

    Actual currency rate http://amplifr.com Backend
  29. 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
  30. !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
  31. 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
  32. !83 “True Lies Of Optimistic User Interfaces”
 (by Denys Mishunov)

    many thanks to Denys for the opportunity to use his illustrations