jasonmit / logux

Replace AJAX-REST by Redux actions synchronization between client and server

Logux

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 ideas of CRDT to have live updates, optimistic UI, and offline-first by design.

• Built-in optimistic UI will improve UI performance.
• Built-in live updates allows 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.

Ask your questions at our Gitter
Commercial support: [e-mail]

Getting Started

1. Logux Architecture
   1. Core Concepts
   2. Using Concepts in Practice
   3. What Problems does Logux Solve
   4. Comparing Logux with AJAX and GraphQL
   5. Parts
   6. Choosing Right Architecture
2. Starting Logux Project
   1. Starting Logux Server Project
   2. Creating Logux Proxy
   3. Starting Logux Redux Project
   4. Replacing Redux to Logux Redux
3. Core Concepts
   1. Nodes
   2. Actions
   3. Meta
   4. Application State
   5. Channels and Subscriptions
   6. Cleaning Log and Action Reasons
   7. Subprotocols
4. Recipes
   1. Authentication
5. Logux Protocol
6. Logux Back-end Protocol

Docs are under construction

Client Example

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 })

Server Example

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
end

Any other HTTP server

You can use any HTTP server with Logux WebSocket proxy server. Here PHP pseudocode:

<?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"]]';
      }
    }
  }
}