InkRows 背后的技术栈
Source: Dev.to
概览
InkRows 是一个现代笔记应用，旨在在 Web 和移动平台上无缝工作。其简洁直观的界面背后是一套优先考虑开发者体验、性能和用户参与度的技术栈。让我们一起探讨支撑 InkRows 的技术架构。
⚛️ Frontend – React 19 + TypeScript
- React – 为应用提供动力的 UI 库。
- TypeScript – 提供静态类型，在项目规模扩大、重构或更新依赖时变得极其宝贵。
🏗️ 构建系统 – Vite 7 + SWC
- Vite – 快速的开发服务器，具备即时启动和热模块替换。
- SWC – 用于转译，取代 Babel，使构建时间极快。
📱 跨平台移动 – Capacitor 8
Capacitor 让我们只用 React/TypeScript 编写一次应用，即可部署到 web、iOS 和 Android，无需维护多个代码库。插件在 web 与原生 API 之间搭桥，提供对相机、文件系统以及其他原生功能的访问。
🎨 Styling – Tailwind CSS 4 + PostCSS
- Tailwind CSS – 实用优先的样式方案，消除对命名类或管理大型 CSS 文件的需求。
- 与 Vite 集成，并通过 PostCSS 处理，以实现精简构建。
🧠 状态管理 – Zustand
Zustand 提供了一个轻量级的 store（存储），无需 Redux 风格的样板代码。状态被划分为多个 slice（例如 userSlice、todosSlice、tagsSlice、settingsSlice），以实现可预测且可测试的变更。
✍️ 富文本编辑 – Lexical
Lexical（Meta 出品）为笔记编辑器提供动力。它的插件系统使得添加自定义格式、表格以及您能想象的任何其他功能变得轻而易举。
💾 数据持久化 – 多层结构
☁️ 后端 – Supabase
- PostgreSQL 数据库
- 身份验证与 Edge Functions
- S3 文件存储
- 实时订阅以实现实时同步
🏠 本地存储 – Dexie
Dexie（IndexedDB 的包装器）在离线时存储数据，并在网络可用时与 Supabase 同步，从而实现乐观 UI 更新。
🔍 数据查询 – TanStack Query
管理服务器状态缓存、后台重新获取以及乐观更新，以提供响应式 UI。
💰 变现 – Stripe 集成
Stripe 处理支付；Supabase Edge Functions 验证 webhook 并管理订阅。
🧩 UI 组件库 – HeroUI
HeroUI 提供可访问的预构建组件，可即插即用地与 Tailwind CSS 配合使用。
✨ 动画与交互
- Framer Motion – 流畅的动画和手势。
- dnd‑kit – 可访问的拖放，用于列表排序和其他交互。
📊 分析与反馈
- PostHog – 产品分析。
- Supabase function – 自定义反馈收集。
🌐 渐进式网络应用 (PWA)
InkRows 作为 PWA 可离线工作，具备：
- Service Worker – 离线功能。
- App Manifest – 可安装体验。
- Workbox – 高级缓存策略。
Source:
🏛️ 架构亮点
📦 模块化组织
src/
├── features/ # Feature‑specific modules
├── shared/ # Reusable components, hooks, utils
├── services/ # API and external service integrations
├── app/ # Application state and handlers
└── config/ # Centralized configuration🛡️ 类型安全
使用 TypeScript（skipLibCheck: false）我们可以获得：
- 端到端的类型安全。
- 自动生成的 Supabase 类型。
- Props 验证和更丰富的 IDE 支持。
🛠️ 开发体验
- 通过 Vite 原生 ES 模块实现快速 HMR。
- 为 Web、iOS 和 Android 提供独立的构建配置。
- 支持移动端开发的实时重载。
- 使用
loadEnv管理环境变量。
npm run dev # Web 开发
npm run ionic:dev:ios # iOS 开发并实时重载
npm run ionic:dev:android # Android 开发并实时重载
npm run build # 生产构建🚀 部署
- Web – 静态站点托管（Netlify）。
- iOS – 通过 Xcode 的 TestFlight 与 App Store。
- Android – 通过 Gradle 构建发布至 Google Play Store。
🏁 结论
InkRows 技术栈反映了开发过程中做出的实际选择：
- React 负责 UI。
- Capacitor 管理跨平台部署。
- Supabase 提供后端。
每个库的选择都是为了在开发者生产力、用户体验、代码质量以及在不维护多个代码库的情况下跨多个平台发布之间取得平衡。
如果你正在构建跨平台应用，或对现代 Web 架构感兴趣，这套栈提供了一个扎实的真实案例。
平衡性能、可维护性以及跨多个平台的发布。
如果你想使用一款与众不同的笔记应用，check InkRows！
⭐ 一如既往，如果你喜欢这篇内容，欢迎在 X 和 LinkedIn 上关注我，获取更多更新、见解和讨论！