Flutter开源项目 - appFlowy 真的是 Notion 的替代品? 一周暴涨 star 9k 多! flutterrust

文章图片

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/frontendmake install_rustsource $HOME/.cargo/envmake install_cargo_makecargo make install_targets

1. 切换 flutter dev

flutter channel devorfvm 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开源项目 - appFlowy 真的是 Notion 的替代品? 一周暴涨 star 9k 多!

文章图片

文章图片

代码架构

技术选型
- flutter: 多端适配
- rust: ffi 平台接口、服务端
flutter 端 frontend/app_flowy

文章图片

前端业务 rust 层 frontend/rust-lib

文章图片

共享库 shared-lib shared-lib

文章图片

后端 rust api backend

文章图片

参阅技术说明 doc

系统设计说明 doc/APPFLOWY_SYSTEM_DESIGN.md

FrontendFLowySDK │┌─────────┐ │┌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:

User click on the Widget(The user interface) that invokes the Bloc actions
Bloc calls the repositories to perform additional operations to handle the actions.
Repository offers the functionalities by combining the event, defined in the FlowySDK.
Events will be passed in the FlowySDK through the FFI interface.
Dispatcher parses the event and generates the specific action scheduled in the FlowySDK runtime.
Dispatcher find the event handler declared by the modules.
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()); // Alternatively you could write it if you don't like global variables GetIt.I.registerSingleton(AppModel()); }// 使用MaterialButton( child: Text("Update"), onPressed: getIt().update// given that your AppModel has a method update ),

总结