Logux is a new way to connect client (webapp, mobile app) and server. Instead of sending HTTP requests (e.g., AJAX, REST, and GraphQL) it synchronizes log of operations between client, server, and other clients through WebSocket.
It was created on top of CRDT, with ideas of having live updates and optimistic UI, and being offline-first by design.
- Built-in optimistic UI will improve UI performance.
- Built-in live updates allow to create collaborative tools (like Google Docs).
- Built-in offline-first principle respect will improve UX on unstable connection. It is useful both for the next billion users and New York subway.
- Compatible with modern stack: Redux API, works with any back-end language and any database.
Ask your questions at our Gitter
Commercial support: [email protected]
- Logux Architecture
- Starting Logux Project
- Core Concepts
- Recipes
- Logux Protocol
- Logux Back-end Protocol
Docs are under construction
React/Redux client
Using @logux/redux:
export const Counter = () => {
// Will load current counter from server and subscribe to counter changes
const isSubscribing = useSubscription(['counter'])
if (isSubscribing) {
return <Loader />
} else {
const counter = useSelector(state => state.counter)
const dispatch = useDispatch()
return <>
<div>{ counter }</div>
// `dispatch.sync()` instead of Redux `dispatch()` will send action to all clients
<button onClick={ dispatch.sync({ type: 'INC' }) }>
</>
}
}Pure JS client
Using @logux/client:
log.on('add', (action, meta) => {
if (action.type === 'INC') {
counter.innerHTML = parseInt(counter.innerHTML) + 1
}
})
increase.addEventListener('click', () => {
log.add({ type: 'INC' }, { sync: true })
})
log.add({ type: 'logux/subscribe' channel: 'counter' }, { sync: true })Node.js
Using @logux/server:
server.channel('counter', {
access () {
// Access control is mandatory. API was designed to make it harder to write dangerous code.
return true
},
async init (ctx) {
// Load initial state when client subscribing to the channel.
// You can use any database.
let value = await db.get('counter')
ctx.sendBack({ type: 'INC', value })
}
})
server.type('INC', {
resend () {
return { channel: 'counter' }
},
access () {
return true
},
async process () {
// Don’t forget to keep action atomic
await db.set('counter', 'value += 1')
}
})Ruby on Rails
Using logux_rails:
# app/logux/channels/counter.rb
module Channels
class Counter < Logux::ChannelController
def initial_data
[{ type: 'INC', value: db.counter }]
end
end
end# app/logux/actions/inc.rb
module Actions
class Inc < Logux::ActionController
def inc
# Don’t forget to keep action atomic
db.update_counter! 'value += 1'
end
end
end# app/logux/policies/channels/counter.rb
module Policies
module Channels
class Counter < Policies::Base
# Access control is mandatory. API was designed to make it harder to write dangerous code.
def subscribe?
true
end
end
end
end# app/logux/policies/actions/inc.rb
module Policies
module Actions
class inc < Policies::Base
def inc?
true
end
end
end
endAny other HTTP server
You can use any HTTP server with Logux WebSocket proxy server. Here is a PHP-like pseudocode example:
<?php
$req = json_decode(file_get_contents('php://input'), true);
if ($req['password'] == LOGUX_PASSWORD) {
foreach ($req['commands'] as $command) {
if ($command[0] == 'action') {
$action = $command[1];
$meta = $command[2];
if ($action['type'] == 'logux/subscribe') {
echo '[["approved"],';
$value = $db->getCounter();
send_json_http_post(LOGUX_HOST, [
'password' => LOGUX_PASSWORD,
'version' => 1,
'commands' => [
[
'action',
['type' => 'INC', 'value' => $value],
['clients' => get_client_id($meta['id'])]
]
]
]);
echo '["processed"]]';
} elseif ($action['type'] == 'inc') {
$db->updateCounter('value += 1');
echo '[["approved"],["processed"]]';
}
}
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent