Flutter開源專案 - appFlowy 真的是 Notion 的替代品? 一週暴漲 star 9k 多!

會煮咖啡的貓發表於2021-12-03
FlutterAPP

視訊

https://www.bilibili.com/vide...

git

https://www.appflowy.io/

https://github.com/AppFlowy-I...

也就 1 周 star 9.8k，我以為他是刷的。

目標&特色

  • 目標替代 Notion
  • 資料 100% 自己管理
  • 開源方式提供，你可以自己改
  • 多平臺支援
  • 原生體驗，估計是用了 flutter 關係

編譯執行

    1. git clone
git clone https://github.com/AppFlowy-IO/appflowy.git
    1. 安裝 rust

cd appflowy/frontend

make install_rust

source $HOME/.cargo/env

make install_cargo_make

cargo make install_targets
    1. 切換 flutter dev
flutter channel dev

or

fvm use dev
fvm global dev
    1. flutter 啟用 desktop
# for windows
flutter config --enable-windows-desktop

# for macos
flutter config --enable-macos-desktop

# for linux
flutter config --enable-linux-desktop
    1. 用 vscode 或者其它 idea 開啟
open appflowy/frontend

程式碼架構

  • 技術選型

    • flutter: 多端適配
    • rust: ffi 平臺介面、服務端
  • flutter 端 frontend/app_flowy

  • 前端業務 rust 層 frontend/rust-lib

  • 共享庫 shared-lib shared-lib

  • 後端 rust api backend

參閱技術說明 doc

  • 系統設計說明 doc/APPFLOWY_SYSTEM_DESIGN.md
                        Frontend                                                     FLowySDK
                                                             │                                              ┌─────────┐
                                                             │                                          ┌7─▶│Handler A│
                                                             │                                          │   └─────────┘
                                                             │                             ┌─────────┐  │   ┌─────────┐
┌──────┐    ┌────┐    ┌──────────────┐                       │                        ┌───▶│Module A │──┼──▶│Handler B│
│Widget│─1─▶│Bloc│─2─▶│ Repository A │─3─┐                   │                        │    └─────────┘  │   └─────────┘
└──────┘    └────┘    └──────────────┘   │                   │                        │                 │   ┌─────────┐
                      ┌──────────────┐   │    ┌───────┐    ┌─┴──┐     ┌───────────┐   │    ┌─────────┐  └──▶│Handler C│
                      │ Repository B │───┼───▶│ Event │─4─▶│FFI │─5──▶│Dispatcher │─6─┼───▶│Module B │      └─────────┘
                      └──────────────┘   │    └───────┘    └─┬──┘     └───────────┘   │    └─────────┘
                      ┌──────────────┐   │                   │                        │
                      │ Repository C │───┘                   │                        │    ┌─────────┐
                      └──────────────┘                       │                        └───▶│Module C │
                                                             │                             └─────────┘
                                                             │
                                                             │

Here are the event flow:

  1. User click on the Widget(The user interface) that invokes the Bloc actions
  2. Bloc calls the repositories to perform additional operations to handle the actions.
  3. Repository offers the functionalities by combining the event, defined in the FlowySDK.
  4. Events will be passed in the FlowySDK through the FFI interface.
  5. Dispatcher parses the event and generates the specific action scheduled in the FlowySDK runtime.
  6. Dispatcher find the event handler declared by the modules.
  7. Handler consumes the event and generates the response. The response will be returned to the widget through the FFI.

The event flow will be discussed in two parts: the frontend implemented in flutter and the FlowySDK implemented in Rust.

  • linux 編譯說明 doc/BUILD_ON_LINUX.md
  • windows 編譯說明 doc/BUILD_ON_WINDOWS.md
  • 貢獻參與說明 doc/CONTRIBUTING.md
  • DDD 設計說明 doc/DOMAIN_DRIVEN_DESIGN.md
    ┌──────────────────────────────────────────────────┐         ─────────▶
    │                Presentation Layer                │──┐      Dependency
    └──────────────────────────────────────────────────┘  │
                              │                           │
                              ▼                           │
    ┌──────────────────────────────────────────────────┐  │
    │                Application Layer                 │  │
    └──────────────────────────────────────────────────┘  │
                              │                           │
                              ▼                           │
    ┌──────────────────────────────────────────────────┐  │
    │                   Domain Layer                   │◀─┘
    └──────────────────────────────────────────────────┘
                              ▲
                              │
    ┌──────────────────────────────────────────────────┐
    │               Infrastructure Layer               │
    └──────────────────────────────────────────────────┘

Presentation Layer:

  • Responsible for presenting information to the user and interpreting user commands.
  • Consists of Widgets and also the state of the Widgets.

Application Layer:

  • Defines the jobs the software is supposed to do. (Shouldn't find any UI code or network code)
  • Coordinates the application activity and delegates work to the next layer down.
  • It doesn't contain any complex business logic but the basic validation on the user input before
    passing to the other layer.

Domain Layer:

  • Responsible for representing concepts of the business.
  • Manages the business state or delegated to the infrastructure layer.
  • Self contained and it doesn't depend on any other layers. Domain should be well isolated from the
    other layers.

Infrastructure Layer:

  • Provides generic technical capabilities that support the higher layers. It deals with APIs, persistence and network, etc.
  • Implements the repository interface and hiding the complexity of the Domain layer.
  • 編輯器 doc/EDITOR.md
  • roadmap

https://trello.com/b/NCyXCXXh...

看看本地檔案在哪裡

  • 找到 sqlite

  • 搜尋本地
find ~ -iname 'flowy-database.db'

~/Library/Containers/com.appflowy.macos/Data/Documents/flowy/fd3ada7d-7653-4196-90e1-7de0019627bc/flowy-database.db

flutter 外掛

  • flutter-quill

https://github.com/singerdmx/...

富文字編輯器

  • freezed

https://pub.flutter-io.cn/pac...

資料 model 生成器，支援註解方式

  • flutter_colorpicker

https://pub.flutter-io.cn/pac...

顏色選取工具

  • styled_widget

https://pub.flutter-io.cn/pac...

簡化小元件定義

Icon(OMIcons.home, color: Colors.white)
  .padding(all: 10)
  .decorated(color: Color(0xff7AC1E7), shape: BoxShape.circle)
  .padding(all: 15)
  .decorated(color: Color(0xffE8F2F7), shape: BoxShape.circle)
  .padding(all: 20)
  .card(
    elevation: 10,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
    ),
  )
  .alignment(Alignment.center)
  .backgroundColor(Color(0xffEBECF1));
  • get_it

https://pub.flutter-io.cn/pac...

全域性訪問你的業務物件，你可以拆分業務和 UI

// 定義

final getIt = GetIt.instance;

void setup() {
  getIt.registerSingleton<AppModel>(AppModel());

// Alternatively you could write it if you don't like global variables
  GetIt.I.registerSingleton<AppModel>(AppModel());
}

// 使用

MaterialButton(
  child: Text("Update"),
  onPressed: getIt<AppModel>().update   // given that your AppModel has a method update
),

總結

  • 看到人家的架構，感覺自己弱爆了，我還是先領域分層設計做做乾淨
  • flutter bloc , rust ffi web protobuf 感覺還是成熟的選擇
  • 如果持續更新的話，我也很想看看架構的演變
  • 現階段估計還是在測試架構設計，應該不會上很多功能

© 貓哥

相關文章