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.

1. A new way of client-server conversation
Andrey Sitnik,Evil Martians
1

2. Russia is fun
2

3. 3

4. 4

5. Evil Martians front-end open source
Animakit Autoprefixer
PostCSSAnyCable
5

6. My first pull request …
Source: github.com/hagenburger/lemonade/pull/13
6

7. …was not that successful
Source: github.com/hagenburger/lemonade/pull/13
7

8. Revenge from Autoprefixer
Source: github.com/Compass/compass/commit/dd74a1cfef478a896d03152b2c2a3b93839d168e
8

9. An issue for Rework …
Source: github.com/reworkcss/rework/pull/70
9

10. …was not successful either
Source: github.com/reworkcss/rework/pull/70
10

11. Rework is dead
Source: github.com/reworkcss/rework/issues/190
11

12. Open source advice
Maintainer — be polite
Contributor — don’t be afraid to fail
12

13. Front-end architecture …
State
Reducers Components
13

14. …is great
State
Reducers Components
14

15. Back-end …
State
Reducers Components
View
Controller Model
15

16. …is great too
State
Reducers Components
View
Controller Model
16

17. But the problem lies in between
State
Reducers Components
View
Controller Model
Communication
17

18. AJAX Requests
Chapter 1
18

19. Websites
Static pages
DHTML & jQuery
SPA
Live updates
Offline
New
synchronization
AJAX
19

20. Two-field form
<form>
<input name="name"…>
<input name="colour"…>
</form>
20

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. fetch('/comments.json').then(r => r.json()).then(list => {
setComments(list)
})
Simple fetch
22

23. showLoader()
fetch('/comments.json').then(r => r.json()).then(list => {
hideLoader()
setComments(list)
})
Fetch + loader
23

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. Local connection in development
Image author: Nikita Prokopov
25

26. Real connection in production
Image author: Nikita Prokopov
26

27. Complexity curve with AJAXComplexity
Features
27

28. More complicated problems
Deduplication
Relevance
Protocol version validation
Conflicts
28

29. Better world
SPA
Live Updates
Offline
29

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. Idea
Chapter 2
31

32. Saint Petersburg —best bars in Russia
32

33. {
title: " ",
likes: 50
}
{
title: " ",
likes: 51
}
Conflict
Images author: Nikita Prokopov
? 33

34. Solution
“Bad programmers worry about the code.
Good programmers worry about
data structures”
— Linus Torvalds
Source: https://lwn.net/Articles/193245/
34

35. ["post:title", " "]
["likes:set", 51]
["likes:remove", 1]
["post:title", " "]
["likes:set", 51]
["post:title", " "]
Event sourcing
Images author: Nikita Prokopov
35

36. CRDT,2009
hal.upmc.fr/inria-00555588/document
36

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. CRDT in JS
Swarm.js @gritzko
38

39. Event sourcing is everywhere
Redux
DevTools
log
CRDT
log
Backend DB
oplog
39

40. Log must be a first-class citizen
40

41. Logux inspiration
Redux Swarm.js
+
41

42. Actions log on client
{
type: "CHANGE_NAME",
user: 13,
name: "New name"
}
Images author: Nikita Prokopov
42

43. Actions log on server
Images author: Nikita Prokopov
43

44. 44

45. Synchronize logs
Images author: Nikita Prokopov
45
WebSocket

46. Synchronization is simple
1
2
46
3
4
5
Images author: Nikita Prokopov
— Give me new actions since “4”

47. Server actions
Images author: Nikita Prokopov
47

48. Between clients
48
Images author: Nikita Prokopov

49. Problems and Solutions
Chapter 3
49

50. How to write open source
Step 1 Create an idea Step2 Implement it
50

51. Problem 1: order of actions
A
AB
B
State: B State: A
Images author: Nikita Prokopov
51

52. Sort by time?
{ action }, { time }
52

53. Distributed time is сomplicated
53

54. Questions about time: 1
const time1 = Date.now()
const time2 = Date.now()
time2 !== time1
54

55. A millisecond is a lot of time
Millisecond Millisecond
Actions
55

56. Questions about time: 2
const time1 = Date.now()
const time2 = Date.now()
time2 >= time1
56

57. CloudFlare leap second problem
Source: blog.cloudflare.com/how-and-why-the-leap-second-affected-cloudflare-dns/
57

58. Questions about time: 3
const client = await client.askTime()
const server = Date.now()
diff(client, server) < HOUR
58

59. Wrong time zone
Source: commons.wikimedia.org/wiki/File:Standard_World_Time_Zones.png
59

60. Solution 1: action ID
id: [1489328408677, "10:bfj58s0w", 0]
Milliseconds Unique Node ID
User ID Random string
60

61. Timestamp always increases
if (now < prevNow) {
now = prevNow
}
prevNow = now
61

62. Sequence number
[1489328408677, "10:…", 0]
[1489328408677, "10:…", 1]
[1489328408678, "10:…", 0]
Same
milliseconds
62

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. Client calculates time difference
const roundTrip = now - startTime - authTime
const timeFix = startTime -
receivedTime +
roundTrip / 2
64

65. Client applies time difference
{ // Received
id,
time: id[0] + timeFix
}
{ // Sent
id,
time: id[0] - timeFix
}
65

66. Chinese Internet
40% packet loss
66

67. Problem 2: disconnect detection
ws.onclose = function () {
// Could be never called
}
67

68. Solution 2: ping command
> ["ping", 120]
< ["pong", 130]
68

69. Live connection status
if (loguxClient.connected) {
// Connection was tested
// at least 5 second ago
}
69

70. Problem 3: tabs conflict
Images author: Sebastien Gabriel & Nikita Prokopov
Duplicate
Action
Saved
70

71. I hate programming
I hate programming
I hate programming
It works!
I love programming
71

72. Solution 3: only the leader tab keeps WS
Images author: Sebastien Gabriel & Nikita Prokopov
leader follower
72

73. Synchronized state between tabs
73

74. Modern front-end
Expectation Reality
74

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. Logux API
Chapter 4
76

77. API
“Talk is cheap. Show me the code.”
— Linus Torvalds
Source: lkml.org/lkml/2000/8/25/132
77

78. Client: we care about client JS size
logux + redux ≈
17 KB
78

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. 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. Client: local actions
dispatch({ type: 'MENU_OPEN' })
81

82. Client: cross-tab actions
add({
type: 'READ_NOTIFICATION',
id: notification
}, {
reasons
})
82

83. Client: server actions
add({
type: 'CHANGE_NAME',
user, name
}, {
sync: true,
reasons
})
83

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. Client: Optimistic UI by default
case 'CHANGE_NAME':
return { name: action.name, ...user }
85

86. Optimistic UI
Image author: Denys Mishunov
86

87. Client: server could undo action on error
{
type: 'logux/undo',
id: [1489328408677, '10:bfj58s0w', 0],
reason: 'error'
}
87

88. Logux Status: widget
88

89. Logux Status: favicon
Normal Offline Error
89

90. Logux Status: warning
90

91. Client: action storage
Local
Cached data
Not synchronized yet
Images author: Nikita Prokopov
91

92. Client: Pessimistic UI
92

93. Client: ask server for changes
add({ type: 'ASK_PAY' })
…
case 'ASK_PAY':
return { payment: 'waiting' }
93

94. Client: wait for server answer
case 'PAID':
return { payment: 'paid' }
94

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. Server: actions handling
app.type('CHANGE_NAME', {
access(action, meta, userId) {
return userId === action.user
}
process(action, meta) {
…
}
})
96

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. Server: send actions to client at any time
app.log.add({
type: 'CHANGE_NAME',
name: 'Looser',
user: user.id
})
98

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. Wrap legacy back-end (PHP,Ruby)
process({ user, name }) {
return send('POST',
`user/${ user }/change.php`,
{ name })
}
100

101. Logux Protocol is open
github.com/logux/logux-protocol
101

102. Backend languages plan
102

103. What is Logux?
Replaces AJAX and RESTful
Synchronizes logs (like Redux actions)
between client and server
103

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. Trade-offs
Chapter 4
105

106. Problem 1: Complexity
Complexity
App Net
Logux CleaningApp
106

107. Right case for Logux
Complexity
App Net
Logux CleaningApp
107

108. Problem 2: under construction
0.1 preview
protocol, core components
end-user API
channels, docs
0.2
autosubscribe, scaling
108
0.3

109. already uses it in productionAmplifr
109

110. 30 contributors
110

111. Want to reduce the code now?
Relay
111

112. Relay-like API for Logux is planned
112

113. Want to be Offline-first now?
Firebase PouchDB Gun.js
113

114. Want CRDT now?
Swarm.js
114

115. Questions?
@logux_io
@evilmartians
@andreysitnik
evilmartians.com 115