alchemy-book - GitLite

KO | EN

gitlite — search

#javascript #typescript #llm #go #android #machine-learning #deep-learning #linux #docker #nodejs #awesome-list #vue #ios #openai

alchemy-book

(★ 104)

Collaborative text editor written in Elixir/Phoenix, running at alchemy.digitalfreepen.com

파일 탐색기

최종 버전 다운로드 (.zip)

- config.exs
- dev.exs
- prod.exs
- test.exs
- - endpoint.ex
  - repo.ex
- alchemy_book.ex
- - errors.pot
- - seeds.exs
- config.exs
- - document_controller_test.exs
  - page_controller_test.exs
- - mocks.ts
  - setup-browser-env.js
- - test_char.ts
  - test_crdt.ts
  - test_decimal.ts
  - test_editor_history.ts
  - test_editor_sync.ts
- - document_test.exs
- - channel_case.ex
  - conn_case.ex
  - model_case.ex
- - error_view_test.exs
  - layout_view_test.exs
  - page_view_test.exs
- test_helper.exs
- - document_channel.ex
  - presence.ex
  - user_socket.ex
- - auth.ex
  - document_controller.ex
  - page_controller.ex
  - report_error_controller.ex
  - session_controller.ex
  - user_controller.ex
- - document.ex
  - document_registry.ex
  - document_session.ex
  - user.ex
- - document_view.ex
  - error_helpers.ex
  - error_view.ex
  - layout_view.ex
  - page_view.ex
  - session_view.ex
  - user_view.ex
- gettext.ex
- router.ex
- web.ex
.babelrc
.gitignore
alchemybook.gif
LICENSE
mix.exs
mix.lock
package.json
README.md
tsconfig.json
tslint.json
webpack.config.js

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/rudi-c/alchemy-book

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd alchemy-book

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. 공식 설치 스크립트

쉬움 추천

사전 준비물

Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다.

npm install -g tslint typescript

npm 레지스트리에 배포된 패키지를 전역으로 설치합니다. 소스 클론이 필요 없습니다.

npm install -g ava

npm 레지스트리에 배포된 패키지를 전역으로 설치합니다. 소스 클론이 필요 없습니다.

✅ 설치 후 새 터미널을 열고, 프로그램의 버전 확인 명령(예: --version)으로 정상 설치됐는지 확인하세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

3. Node.js

쉬움

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install -g tslint typescript

npm 레지스트리에 배포된 패키지를 전역으로 설치합니다. 소스 클론이 필요 없습니다.

npm install -g ava

npm 레지스트리에 배포된 패키지를 전역으로 설치합니다. 소스 클론이 필요 없습니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![Alchemy Book](https://raw.githubusercontent.com/rudi-c/alchemy-book/master/alchemybook.gif)

# The Alchemy Book

This application is a toy collaborative editor that demonstrates using
Conflict-Free Replicated Data Types (CRDTs) to achieve real-time synchronization. The server 
is written in  Elixir and mostly of the CRDT logic is written in Typescript.

The aim of this project is educative and optimized for understandability rather
than performance. The blog post that explains the intuition behind this technique
can be found at
[A simple approach to building a real-time collaborative text editor](http://digitalfreepen.com/2017/10/06/simple-real-time-collaborative-text-editor.html).

I named the project Alchemy Book since I thought it would look nice with a blackboard
theme. Since this is not going to compete with Google Docs/Dropbox Paper/etc anyway, practicality
is not a concern.

## Setup

Assuming you have Elixir installed, and Postgres installed and running
(see Elixir & Phoenix [setup guide](https://hexdocs.pm/phoenix/up_and_running.html))

```
mix deps.get
mix ecto.create
mix ecto.migrate
```

Run with

```
mix phoenix.server
```

## Typescript

Install the Typescript compiler and linter globally

```
npm install -g tslint typescript
```

and run the linter with `npm run lint`

## Testing

We use Ava

```
npm install -g ava
```

which you can run with `npm test`

## Elixir static checking

Use `mix dialyzer` to do static checking with Dialyzer. The first time should
take a lot of time as it runs on the dependencies too, although the results will
be cached. Note that there are still a lot of (what I think are) spurious
warnings. This is to be fixed later.

## Deploying

There's two ways to deploy to production.

1) The simple way is to checkout this repository (or your fork) within your
server and setup Erlang, Elixir, and all the appropriate tools (this is the
same as running it a prod build locally).

2) Send the self-contained package in `alchemy_book.tar.gz` to your server,
unpack and run. This is less work than (1) and can be done with uncommited
changes which can be useful for testing. The thing I haven't figured out with
this approach is how to include and run the ecto migrate script, in the package,
so I still do (1) when I need to run `mix ecto.migrate`.

In either case, you'll want to make a production build. Create a symbolic link
to your `prod.secret.exs` file (and maybe to your deploy script too):

```
ln -s <path>/prod.secret.exs config/prod.secret.exs
```

with

```
config :alchemy_book, AlchemyBook.Endpoint,
  secret_key_base: "<secret key>"

# Configure your database
config :alchemy_book, AlchemyBook.Repo,
  adapter: Ecto.Adapters.Postgres,
  username: "<username>",
  password: "<password>",
  database: "alchemy_book_prod",
  pool_size: 20
```

Compile a production build with.

```
MIX_ENV=prod mix phoenix.digest
MIX_ENV=prod mix release --env=prod
```

The database will need to be created and migrated in production mode too:
```
MIX_ENV=prod mix ecto.create
MIX_ENV=prod mix ecto.migrate
```

And run with

```
PORT=8080 _build/prod/rel/alchemy_book/bin/alchemy_book <console/foreground/start>
```

# Technical notes

## Logoot

This repository contains a mostly faithful implementation of [Logoot](https://hal.archives-ouvertes.fr/inria-00432368/document).
Note that Logoot was not originally designed for real-time editing. It was designed as a way
to implement a decentralized Wikipedia with a unique ID for each line and sending line
insertion/removals. I just changed it to be character-based (send individual character changes). This
means that the memory overhead is huge (10x the size of the text itself)
but that should be ok as most people don't write text documents of more than a few megabytes.

Logoot is supposed to work in the absence of a central server, and I think it should
still be possible here, with some minor changes. The current implementation uses a
centralized server though to relay messages between clients.

## Phoenix Presence CRDT

The presence indicator (that shows who else is present in the document) as well as cursor position is implemented using the Presence library that ships with Phoenix. Fun fact, Presence is itself a CRDT.

## Notes about the code

I tried to keep a reasonably good code quality and write comments so that it's easy
for people to poke around the code. However, a couple of heads-up:

- There is some unused code laying around for signing up, logging in and creating documents
per user. It originally started that way, but I figured that it's simpler to just have
anonymous document sessions for the purpose of a demo.

- There's an unfinished attempt at using a more efficient order statistics tree for storing
CRDT characters. I left it there since it makes the array-based implementation better abstracted
even if it's not used.

- I used immutable data structures where possible (it's hard when CodeMirror is inherently
stateful). It's not really necessary, but you'll notice there's a bit of functional-style
programming inspired from OCaml at places.

## Things that would be nice to implement

- [ ] Re-enable user login and implement access control
- [ ] Linting for .tsx and .ex files
- [ ] Upgrade to Elixir 1.5 and Phoenix 3
- [ ] Having characters fade-in and fade-out when remote changes arrive would be cool
- [ ] Fuzzy testing for the CRDT logic