Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Logux, a new approach to client-server communication by Andrey Sitnik

398 visualizaciones

Publicado el

Combining ideas from both Redux and CRDT, Logux is a new tool which replaces AJAX with real-time data in applications, synchronising action logs between the client and server while also providing an offline mode. This approach could significantly simplify application code and bring plug&play support for live updates and offline editing.

Publicado en: Tecnología
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

Logux, a new approach to client-server communication by Andrey Sitnik

  1. 1. A new way of client-server conversation Andrey Sitnik,Evil Martians 1
  2. 2. Russia is fun 2
  3. 3. 3
  4. 4. 4
  5. 5. Evil Martians front-end open source Animakit Autoprefixer PostCSSAnyCable 5
  6. 6. My first pull request … Source: github.com/hagenburger/lemonade/pull/13 6
  7. 7. …was not that successful Source: github.com/hagenburger/lemonade/pull/13 7
  8. 8. Revenge from Autoprefixer Source: github.com/Compass/compass/commit/dd74a1cfef478a896d03152b2c2a3b93839d168e 8
  9. 9. An issue for Rework … Source: github.com/reworkcss/rework/pull/70 9
  10. 10. …was not successful either Source: github.com/reworkcss/rework/pull/70 10
  11. 11. Rework is dead Source: github.com/reworkcss/rework/issues/190 11
  12. 12. Open source advice Maintainer — be polite Contributor — don’t be afraid to fail 12
  13. 13. Front-end architecture … State Reducers Components 13
  14. 14. …is great State Reducers Components 14
  15. 15. Back-end … State Reducers Components View Controller Model 15
  16. 16. …is great too State Reducers Components View Controller Model 16
  17. 17. But the problem lies in between State Reducers Components View Controller Model Communication 17
  18. 18. AJAX Requests Chapter 1 18
  19. 19. Websites Static pages DHTML & jQuery SPA Live updates Offline New synchronization AJAX 19
  20. 20. Two-field form <form> <input name="name"…> <input name="colour"…> </form> 20
  21. 21. Server synchronization code import { Actions } from 'flummox' import api from '../api/labels-api' export default class LabelsActions extends Actions { async add(project, data) { return await api.add(project, data).then( id => { return [id, { ...data, id, project }] }) } async update(pr, id, data) { return await api.update(pr, id, data).then(() => { return [id, { ...data, id, project }] }) } async remove(project, id) { return await api.remove(project, id).then(() => id ) } } import { OrderedMap } from 'immutable' import { Store } from 'flummox' export default class LabelsStore extends Store { constructor(flux, data) { super() this.state = { labels: OrderedMap(data.map(i => [parseInt(i.id), i])) } let actions = flux.getActionIds('labels') this.register(actions.add, this.update) this.register(actions.update, this.update) this.register(actions.remove, this.remove) } remove(id) { this.setState({ labels: this.state.labels.delete(parseInt(id)) }) } update([id, data]) { this.setState({ labels: this.state.labels.set(parseInt(id), data) }) } } 21
  22. 22. fetch('/comments.json').then(r => r.json()).then(list => { setComments(list) }) Simple fetch 22
  23. 23. showLoader() fetch('/comments.json').then(r => r.json()).then(list => { hideLoader() setComments(list) }) Fetch + loader 23
  24. 24. showLoader() fetch('/comments.json').then(r => r.json()).then(list => { hideLoader() setComments(list) }).catch(err => { if (isNoNetwork(err)) { showNetworkError(err) } else { showServerError(err) } }) Fetch + loader + error handling 24
  25. 25. Local connection in development Image author: Nikita Prokopov 25
  26. 26. Real connection in production Image author: Nikita Prokopov 26
  27. 27. Complexity curve with AJAXComplexity Features 27
  28. 28. More complicated problems Deduplication Relevance Protocol version validation Conflicts 28
  29. 29. Better world SPA Live Updates Offline 29
  30. 30. Logux goals 1. Reduce code size 2. Support current ecosystems 3. Live updates out of the box 4. Optimistic UI & Offline-first 30
  31. 31. Idea Chapter 2 31
  32. 32. Saint Petersburg —best bars in Russia 32
  33. 33. { title: " ", likes: 50 } { title: " ", likes: 51 } Conflict Images author: Nikita Prokopov ? 33
  34. 34. Solution “Bad programmers worry about the code. Good programmers worry about data structures” — Linus Torvalds Source: https://lwn.net/Articles/193245/ 34
  35. 35. ["post:title", " "] ["likes:set", 51] ["likes:remove", 1] ["post:title", " "] ["likes:set", 51] ["post:title", " "] Event sourcing Images author: Nikita Prokopov 35
  36. 36. CRDT,2009 hal.upmc.fr/inria-00555588/document 36
  37. 37. Conflict-free Replicated Data Types Op-based counter G-Counter PN-Counter Non-negative Counter LWW-Register MV-Register G-Set 2P-Set LWW-element-Set PN-Set OR-Set Add-only monotonic DAG Add-remove Partial Order Replicated Growable Array Continuous sequence 37
  38. 38. CRDT in JS Swarm.js @gritzko 38
  39. 39. Event sourcing is everywhere Redux DevTools log CRDT log Backend DB oplog 39
  40. 40. Log must be a first-class citizen 40
  41. 41. Logux inspiration Redux Swarm.js + 41
  42. 42. Actions log on client { type: "CHANGE_NAME", user: 13, name: "New name" } Images author: Nikita Prokopov 42
  43. 43. Actions log on server Images author: Nikita Prokopov 43
  44. 44. 44
  45. 45. Synchronize logs Images author: Nikita Prokopov 45 WebSocket
  46. 46. Synchronization is simple 1 2 46 3 4 5 Images author: Nikita Prokopov — Give me new actions since “4”
  47. 47. Server actions Images author: Nikita Prokopov 47
  48. 48. Between clients 48 Images author: Nikita Prokopov
  49. 49. Problems and Solutions Chapter 3 49
  50. 50. How to write open source Step 1 Create an idea Step2 Implement it 50
  51. 51. Problem 1: order of actions A AB B State: B State: A Images author: Nikita Prokopov 51
  52. 52. Sort by time? { action }, { time } 52
  53. 53. Distributed time is сomplicated 53
  54. 54. Questions about time: 1 const time1 = Date.now() const time2 = Date.now() time2 !== time1 54
  55. 55. A millisecond is a lot of time Millisecond Millisecond Actions 55
  56. 56. Questions about time: 2 const time1 = Date.now() const time2 = Date.now() time2 >= time1 56
  57. 57. CloudFlare leap second problem Source: blog.cloudflare.com/how-and-why-the-leap-second-affected-cloudflare-dns/ 57
  58. 58. Questions about time: 3 const client = await client.askTime() const server = Date.now() diff(client, server) < HOUR 58
  59. 59. Wrong time zone Source: commons.wikimedia.org/wiki/File:Standard_World_Time_Zones.png 59
  60. 60. Solution 1: action ID id: [1489328408677, "10:bfj58s0w", 0] Milliseconds Unique Node ID User ID Random string 60
  61. 61. Timestamp always increases if (now < prevNow) { now = prevNow } prevNow = now 61
  62. 62. Sequence number [1489328408677, "10:…", 0] [1489328408677, "10:…", 1] [1489328408678, "10:…", 0] Same milliseconds 62
  63. 63. Server sends current time [ "connected", [0, 0], // Protocol version "server:h4vjdl", // Server unique ID [ 1475316481050, // "connect" message was received 1475316482879 // "connected" message was sent ] ] 63
  64. 64. Client calculates time difference const roundTrip = now - startTime - authTime const timeFix = startTime - receivedTime + roundTrip / 2 64
  65. 65. Client applies time difference { // Received id, time: id[0] + timeFix } { // Sent id, time: id[0] - timeFix } 65
  66. 66. Chinese Internet 40% packet loss 66
  67. 67. Problem 2: disconnect detection ws.onclose = function () { // Could be never called } 67
  68. 68. Solution 2: ping command > ["ping", 120] < ["pong", 130] 68
  69. 69. Live connection status if (loguxClient.connected) { // Connection was tested // at least 5 second ago } 69
  70. 70. Problem 3: tabs conflict Images author: Sebastien Gabriel & Nikita Prokopov Duplicate Action Saved 70
  71. 71. I hate programming I hate programming I hate programming It works! I love programming 71
  72. 72. Solution 3: only the leader tab keeps WS Images author: Sebastien Gabriel & Nikita Prokopov leader follower 72
  73. 73. Synchronized state between tabs 73
  74. 74. Modern front-end Expectation Reality 74
  75. 75. Other problems of distributed systems Problems Firewalls and WS Log cleaning Scaling Outdated clients Deduplication Solutions Force WSS Action’s reasons of life Peer-to-peer protocol Subprotocol verification Action ID 75
  76. 76. Logux API Chapter 4 76
  77. 77. API “Talk is cheap. Show me the code.” — Linus Torvalds Source: lkml.org/lkml/2000/8/25/132 77
  78. 78. Client: we care about client JS size logux + redux ≈ 17 KB 78
  79. 79. Client: Redux compatible API import { createLoguxStore } from 'logux-redux' const store = createLoguxStore(reducers, preloadedState, undefined, { url: 'wss://logux.example.com/', userId: user.id, subprotocol: '1.1.5', credentials: user.token }) 79
  80. 80. Client: for “your friend”without Redux import Client from 'logux-client/client' const logux = new Client({ url: 'wss://logux.example.com/', userId: user.id, subprotocol: '1.1.5', credentials: user.token }) 80
  81. 81. Client: local actions dispatch({ type: 'MENU_OPEN' }) 81
  82. 82. Client: cross-tab actions add({ type: 'READ_NOTIFICATION', id: notification }, { reasons }) 82
  83. 83. Client: server actions add({ type: 'CHANGE_NAME', user, name }, { sync: true, reasons }) 83
  84. 84. Client: instead of AJAX showLoader() fetch('/profile', { credentials: 'include', method: 'POST', form }).then(r => { hideLoadaer() }).catch(e => { … }) add({ type: 'CHANGE_NAME', user, name }, { sync: true, reasons }) 84
  85. 85. Client: Optimistic UI by default case 'CHANGE_NAME': return { name: action.name, ...user } 85
  86. 86. Optimistic UI Image author: Denys Mishunov 86
  87. 87. Client: server could undo action on error { type: 'logux/undo', id: [1489328408677, '10:bfj58s0w', 0], reason: 'error' } 87
  88. 88. Logux Status: widget 88
  89. 89. Logux Status: favicon Normal Offline Error 89
  90. 90. Logux Status: warning 90
  91. 91. Client: action storage Local Cached data Not synchronized yet Images author: Nikita Prokopov 91
  92. 92. Client: Pessimistic UI 92
  93. 93. Client: ask server for changes add({ type: 'ASK_PAY' }) … case 'ASK_PAY': return { payment: 'waiting' } 93
  94. 94. Client: wait for server answer case 'PAID': return { payment: 'paid' } 94
  95. 95. Server: Node.js framework import { Server } from 'logux-server' const app = new Server({ subprotocol: '1.2.0', supports: '1.x', root: __dirname }) 95
  96. 96. Server: actions handling app.type('CHANGE_NAME', { access(action, meta, userId) { return userId === action.user } process(action, meta) { … } }) 96
  97. 97. Server: use any DB or send any requests process(action, meta) { return db.user.id(action.user).then(u => { if (isFirstOlder(u.lastChange, meta)) { return u.changeName(action.name) } }) } 97
  98. 98. Server: send actions to client at any time app.log.add({ type: 'CHANGE_NAME', name: 'Looser', user: user.id }) 98
  99. 99. RESTful vs.Logux LoguxRESTful URL, HTTP method action.type POST form, GET query Action object Request happened now Action could be created in the past 99
  100. 100. Wrap legacy back-end (PHP,Ruby) process({ user, name }) { return send('POST', `user/${ user }/change.php`, { name }) } 100
  101. 101. Logux Protocol is open github.com/logux/logux-protocol 101
  102. 102. Backend languages plan 102
  103. 103. What is Logux? Replaces AJAX and RESTful Synchronizes logs (like Redux actions) between client and server 103
  104. 104. Why Logux? Less code Live updates out of the box Optimistic UI & Offline-first Redux API on the front-end Similar to RESTful on the back-end 104
  105. 105. Trade-offs Chapter 4 105
  106. 106. Problem 1: Complexity Complexity App Net Logux CleaningApp 106
  107. 107. Right case for Logux Complexity App Net Logux CleaningApp 107
  108. 108. Problem 2: under construction 0.1 preview protocol, core components end-user API channels, docs 0.2 autosubscribe, scaling 108 0.3
  109. 109. already uses it in productionAmplifr 109
  110. 110. 30 contributors 110
  111. 111. Want to reduce the code now? Relay 111
  112. 112. Relay-like API for Logux is planned 112
  113. 113. Want to be Offline-first now? Firebase PouchDB Gun.js 113
  114. 114. Want CRDT now? Swarm.js 114
  115. 115. Questions? @logux_io @evilmartians @andreysitnik evilmartians.com 115

×