uniyehの投稿 - Crieit

Dartを使った大規模なアプリ開発

2022-01-20T19:00:13+09:00

こんにちは、Quireです。

Quireは、Dartで開発された初めてのWebアプリケーションではありませんが、クライアントとサーバーの両方でDartをふんだんに使ったものとしては、初めてかもしれません。

動作の軽い、徹底して階層構造のタスク管理ツールです。このプロジェクトはDartコードで合計53992行、1620 KB。コミュニティーからのオープンソースライブラリも使っています。

私たちについて

このプロジェクトを開始するまで、私たちはRikuloというDartファンの集まりでした。Rikuloはこれまで、UIフレームワークやUIライブラリ、Webサーバー、メッセージサーバー、DBクライアントなどのDartライブラリをリリースしています。
Dartが2011年に初めてリリースされたとき、すぐに将来性を感じ、さっそく小規模のプロジェクトに着手。その後、ほとんどDartで書かれた大規模アプリの開発へと進みました。今回はそのときの経験をお話しします。Dartによる開発に興味を持っていただければ幸いです。

なぜDartか

私たちがDartを選んだ理由はたくさんありますが、以下に大きなものを挙げてみます。
- 強く型付けされていて、無数の小さなミスを防ぐことができる。公式IDEのDart Editorは、タイプミスへの即時フィードバックやオートコンプリート機能を備えており、トラッキングも容易。
- 継承がクラスベースで、プロトタイプベースよりも直感的に使える。
- クライアントとサーバーの両方で同じ言語が使えて、データモデルやコードベースを共有できる。
- JavaScriptの問題点をほぼ解消。完全ではないが、以前にあった問題の99％には対応している。
- JavaScript Harmonyで人気の特徴をいくつか備えている。例えばFuture（Promise）パターン、矢印関数など。
- 強力なチームの後ろ盾があり、ハイクオリティーな公式ライブラリや使いやすいAPIを利用できる。まだ開発途上ながら、仕様はすでにかなり安定している。
- サーバーサイドではマルチスレッドではなくイベントループ方式で、好みだった。
- JavaScriptへのコンパイル時にTree Shakingできる（下記参照）。

もちろんデメリットもあります。以下に挙げてみます。

コミュニティーがJavaScriptよりも圧倒的に小さい。
DartとJavaScript間の通信が自明でない。
強い型付けなので、APIのPolyfillが面倒。
Dart Editorの性能が（今のところ）大規模プロジェクトに適さない。

強い型のサポートにより、書くプロセスがJavaScriptよりもずっとロバストです。また、Javaよりもシンプルで、Vanilla JavaScriptと比べてもシンプルなことがあります（関数の書き方など）。全体的にDartは扱いやすい言語ですが、以下のような例外はあります。

コンストラクタのボディよりも先にイニシャライザでFinalフィールドを初期化する必要がある。
ミックスインの仕様が使いにくく、2.0まで改善されそうにない。
ジェネリック型パラメータがクラスにしかなく、関数宣言にない。（そのためコンパイラの負荷が増す）。

クライアントサイド

Dart VMがChromeに統合される日まで、JavaScriptにコンパイルして作成することになります。JavaScriptにコンパイルする言語はたくさんありますが、Dartには以下のような独自のメリットがあります。

私たちは開発時、Dart VMを内蔵したChromiumベースのブラウザー、DartiumでDartをネイティブに実行している。このイテレーションではコンパイルが不要で、スムーズに進めることができる。
テストとプロダクションの段階でJavaScriptにコンパイルし、すべてのメジャーなブラウザーで実行する。このとき使用するコンパイラがTree Shakingを行い、不要なコードを除去するため、JavaScriptのコードサイズを小さくできる。

サーバーサイド

サーバーサイドについてはあまりコミュニティーで話題になりませんが、私たちは以下の理由から、Dartはサーバーサイドのプログラミング言語に入ると考えています。

Webサービスは本質的に非同期なため、イベントループ方式と相性がいい（マルチスレッドと比べて）。
クライアントサイドよりもサーバーサイドのほうが、よりロバストで安全なコードが必要。強い型付けの言語はこの点において有利。

サポートライブラリ

Quireは約30のライブラリをインポートしています。そのうち10ライブラリはコミュニティーからで、残りはDartからリリースされたものです。Dartに詳しい方ならAngularDARTとPolymer.dartがあると思うかもしれませんが、実はどちらも使っていません。

AngularDARTを使わない理由は、以下のとおりです。

DOMを細かく制御したい。
私たちはクライアント構造の構築に独自のアーキテクチャガイドラインを使用しており、そのパラダイムがAngularのロジックと異なる。
AngularDARTについて調べたとき、コンパイルされたJavaScriptのコードサイズにかなりのオーバーヘッドが生じた。ただし、これはその後かなり改善された。

私たちは以下の理由から、Polymer.dartも使っていません。

カプセル化とイベントリターゲティングのため、ShadowDOMはBootstrapのようなセレクター指向のフレームワークと併用できない。
ShadowDOMの外部からスタイルを適用できない。サードパーティーのコンポーネントセットがPolymerで作成されている場合、ユーザーが見た目や感じを変えることは不可能に近い。(更新：2013年12月時点で、内部のスタイルを外部から変更可能。Shadow DOM 201を参照。)

DQuery＆Bootjack

私たちのクライアントサイドスタックの基盤は、Rikuloリリースのオープンソースプロジェクト、DQueryとBootjackです。
- DQueryはjQueryの一部、特にイベントデリゲートの仕組みの部分をDartに移植したものです。
- BootjackはBootstrap 3の完全な移植で、CSS およびAPIとほぼ同じです。

このようにアプリケーションスタックを構築して、JavaScriptについて知っていること、できることを活用しています。

Stream

私たちのWebサーバーは、Dartのみで書かれ、ルーティング、フィルター、サーバーサイドMVCなどを備えたStreamです。イベントループ方式とシームレスに連携して動作します。リクエストハンドラーも、ノンブロッキングのルーチンをつなげるだけで書くことができ、従来のマルチスレッド方式よりも生産的かつ快適に仕事ができます。私たちは、Webサービスをスケールし、nginxでHTTPSを処理し、Streamにリクエストをデリゲートしたりもしています。このアーキテクチャによりDart VMを個別にSpawn／Despawnでき、サーバーのアップグレードもユーザーの使用を妨げずに実施できます。

終わりに

Dartは使い勝手の良い言語です。この記事がDartコミュニティー成長の一助となることを願っています。最後に、Dartで何ができるか興味のある方は、ぜひQuireを試してみてください。

Flutterベースのモバイル向けタイムラインの作成

2022-01-07T16:19:06+09:00

Quireタイムライン（モバイル向け）の構造を初公開

2018年に初めてFlutterベースのアプリを作ったときは、とても楽しく興奮しました。それから3年経ち、Quireアプリもかなり充実して、従来のモバイル向けプロジェクト管理アプリの域を超えるまでになりました。Quireモバイルアプリの現行バージョンは、階層表示、ボード表示だけでなく、タイムライン表示にも対応しています。

モバイルアプリ向けのタイムライン表示の作成を決めたときは、簡単にできるとは思いませんでした。当時は類似の既成コンポーネントもなかったためですが、驚いたのは、インターネットでタイムライン表示の構造についての情報も見当たらなかったことです。そこで、いちかばちか、自分たちで作ってみることにしました。

Quireモバイルアプリ用のタイムラインでは、以下を計画していました。

横方向への無限日付スクロール
レンダリングオンデマンド（ROD）。ビューポートにあるときのみ実行されるWidgetのState
任意の位置に素早く配置
操作がかんたんで使いやすいインターフェースと、スムーズなユーザーエクスペリエンス

数週間で初期開発が完了し、以下のような構造になりました。

タイムラインペインのコアベース（週、週末のセクションなど）
タスクリスト（階層構造のタスクリスト）
タイムラインペインのビューポートベース双方向リスト
1ペインのみのとき、2ペインにまたがるときの両方に対応した期間の横棒
期間の横棒上の固定ラベル

上図のように、タスクごとにタイムラインペインが割り当てられ、すべてのタイムラインのスクロール位置は互いに同期されます。

インデックスベースのスクロールビュー

Google Flutter Widgetに似たインデックスベースのスクロールビューを作るために、Centerに引数のあるカスタムスクロールビューを使用します。実装すると、任意の位置まで素早くスクロールできるようになります。スクロール中のどの時点でも、各位置とインデックスを表示できます。

イメージ的には、少しスクロールした時点で、新しいCenterの引数でタイムラインをリロードしてビューポートの外に移し、またスクロールするとビューポート内に配置される、という感じです。

タイムラインペイン

タイムラインをスムーズに使えるように、インデックスベースのスクロール表示と似た発想で、横方向にスクロールできるカスタム「無限双方向スクロールビュー」を実現しました。実装すると、タイムラインをなめらかにスクロールできます。

無限双方向スクロールビューには、Flutterの強力なViewportの考え方を活用しました。そして、Backwardリストのインデックスを-1から始まる負の数に変更しました。Index 0に当たる日付が分かるようにフラグも設定して、任意の日付まで素早くスクロールできるようにしました。

Widget forwardList = SliverList(
  delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
    return cellBuilder(context, _getIndex(forward: true, index: index));
  })
);

Widget backwardList = SliverList(
  delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
    return cellBuilder(context, _getIndex(forward: false, index: index));
  }),
);

Scrollable(
  viewportBuilder: (BuildContext context, ViewportOffset offset) {
    return Viewport(
      offset: offset,
      center: forwardListKey,
      slivers: [
        backwardList,
        forwardList,
      ]
    );
  },
)

2ペインにまたがるときの問題と解決方法

ビューポートには無限のリスト2つがスクロールされるため、期間の横棒が2つのリストにまたがることもあります。そこで、どちらのリストにも完全に同じ期間の横棒を作成し、ぴったり重ねて、リストがビューポートの外に移動してもリスト内のアンカーが壊れないようにしました。

固定ラベルで解決

モバイル機器の小さい画面ではプロジェクトのどこを見ているかが分かりにくく、使っていると混乱してきます。この問題は、できるだけ多くの情報を提供することで軽減できます。そこで便利なのが固定ラベルです。

最初はとにかくシンプルにするため、スクロールビューのスクロール通知に従って、位置を取得してから配置されたラベルに設定していました。固定ラベルを各タイムラインペインの開始位置に表示するには、期間の横棒の現在位置の計算がベースとなります。

しかし、新しく配置されたラベルは次のフレームまでしか更新されず、スクロールビューと同じ時間枠で同期されないため、ずれて見えてしまいました。

幸いFlutterコミュニティーが、レンダリングレイヤー固定ヘッダーというすばらしい解決方法を教えてくれました。つまりレイアウトのタイミングによる方法です。レンダリングレイヤーにすべてのWidgetをサイズとともに入れるだけでなく、そのピクセルすべてを計算する必要があります。最後にlocalToGlobal関数を、スクロール位置、および2ペインにまたがるときのペイン切り替えに基づいた演算操作と置き換えて、パフォーマンスを向上させました。

始まりはこれから

今は大変な時代ですが、だからこそテクノロジーの分野で貢献したいと考えています。タイムライン表示の作成でまず考えたのは、どうやってFlutterの強力なフレームワークを活用して、ビューコンポーネントを一から作り直すことなく、軽く安定したゴージャスなUIを実現するか、ということでした。

各日付単位はインデックスとして、FlutterのSliverに組み込まれています。ほとんどのものはWidgetレイヤーの高レベルの開発概念に留まり、固定ビューのときのみレンダリングレベルに移動します。

Quireアプリをインストールして、Flutterベースのモバイルアプリを使ってみませんか。Quireタイムラインについて気になることは、コメントを投稿するか、@quire_ioでツイートしてお知らせください！

※転載許可済み: https://zenn.dev/quireteam/articles/2b2c44c3e49fac