2015年5月時点の雑感。
最近のとあるスタートアップ製品でDart&Cordovaが採用されていることを知り、気を良くしたので布教活動です。
Cordova
プロダクトの性質とロードマップによっては、Cordovaの選択が良い場合はある
- iOS先行リリースで、すぐにAndroidへも展開するケース
- iOSとAndroidではUIを実装する方法が違い過ぎる（両方を一人のエンジニアが担当するのは些か酷。React Nativeで変わるかもしれない）
- iOS/Androidに加えBlackberryやwindows phoneへも展開するケース（あまりないと思うが）
- Web/Chrome Apps/iOS/Androidに共通したUIのベース実装を持つ場合。製品ごとに多少のカスタマイズを加えて使いまわすケース
Cordovaのよくある勘違い
たまに勘違いしている人を見掛けるので。
JavaScriptだけでなんでもできる（間違い）
Cordovaは、JavaScriptだけでなんでもできる魔法ではありません。
Nativeのコードが書けないと、Cordova pluginのバグすら回避できません。
少しでもパフォーマンスを要する機能は、Nativeコードで実装するべきです。
それなりの覚悟は必要
いくらプラットフォームの差異をCordovaが吸収してくれるとはいえ、プラットフォーム別の分岐処理は不可避でしょう。
このプラットフォーム別の分岐処理は、コードの見通しをかなり悪くし、技術的負債になりやすい部分です。
CordovaをやめてNativeコードで置き換えたくなるケースは出てくると思う。その時のための資金は計画しておきましょう。
Dart
Dartのココが使える
ちなみに最初の2つは、筆者がDartからTypeScriptへ移らない主な理由になっています。
実行環境がある
Dartランタイムを搭載したChromiumの、DartiumでDartを直接実行できる。
もちろんエラー箇所の行数はソースコードと一致していて、対話型Dartインタプリタも使える。
例えばAngular Dartなど大きなフレームワークになるほどdart2jsのビルド時間は長くなる。
コーディングのテンポが良く快適になるので、エディタで保存してすぐに実行結果を得られるメリットは大きい。
標準ライブラリがあり、ドキュメントがある
基本的なcollectionパターンですら自分で探して評価して（あるいは都度実装し）テストし続ける、というのは辛すぎるので、標準ライブラリがあるのはありがたい。
非同期処理のサポートが強力で、await syntaxやdart:asyncライブラリの恩恵は大きい。
標準のパッケージ管理システムがある
トレンドが変わるということもなく、標準でパッケージ管理ツールが用意されているのは、非常にありがたい。
ある時点のバージョン/構成を恒久的かつ容易に再現できるシステムは、受託案件でも採用しやすい。
dart2js
「おかしければビルドが通らない」というのは「間違いにすぐ気づける」という点で重要です。
Dartライブラリも含めて一つのJavaScriptファイルを生成する、という動作はJavaScriptのロード順といった心配事を減らしてれます。
依然としてJavaScriptの知識は必要なものの、特にプラットフォームの違いに関する気遣いをしなくてもよく、より確実なコードを生成してくれます。
dart2jsの信頼性は かなりある と感じています。
自分が実装したコードについてJavaScriptコードを確認しなければならない、ことは皆無です。
dart2jsに起因する場合は、、、もちろん自動生成されたコードを読まなければなりません。
型システムがある
Dartでは完全ではないですが、それでもないよりはマシです。
残念なところ
型システムが不完全
盲目的に信用すると「わけの分からない動作」に感じることがあります。
重要なのが、dart2jsのチェックを通過した後の、JavaScriptの実行時においては型システムは存在しない、ということです。
当たり前のことなのですが、忘れて小一時間をムダにすることがあるので、注意。
Shadow DOMがSafariで使えない
これはDartではなくHTML5の範疇ですが。
Shadow DOMはWeb Componentsを実現する構成要素の一部で、DOMツリーをカプセル化して、あるDOMノードにスコープを閉じ込めることができます。
Angular DartのComponent機能では、Shadow DOMの使用を選択できます。
この機能が非常に便利なのは、あるコンポーネント限定で必要になったカスタムのCSSを他のノードへ影響を与えずに書けることです。
他のノードへ影響を与えないことから、追加したCSSをCSS全体の一部として管理する必要がなくなり、テンプレート内やDartコードの近くにカスタムCSSを置いても管理上の問題が発生しません。
Safariが描画パフォーマンスを優先してShadow DOMを捨てたことで、iOSを含むターゲット向け製品には使えなくなってしまいました。
Chrome Apps限定なら活用できます。
直近の展望
Virtual DOMが、Dartにも来ている
今後、「プロダクトの性質によってAngular OR Virtual DOMを選択可能」というパターンがエンジニアが用意しておくメニューとして、技術保持のコストパフォーマンスが効率的な戦略のひとつになり得ると思う。
基本的にAngularはサイズが大きくビルド時間も含めてあらゆる動作が重くなるので、Virtual DOM系に変えただけでVirtual DOMの効果をさしおいても、劇的に軽くなる。
DartでのVirtual DOMは、ロシアのBoris Kaul氏がこの半年ほど精力的にVirtual DOM関連を実装していて、VDomをベースに始まり、Liquidを経て、現在はuixが進行中である。
まだVirtual DOMを触ってない人は一度触っておいた方がいい。
Angular 2
これまでは、Angular JSとAngular Dartが別々に進行していたせいで機能がちぐはぐになっており、あの機能使いたいけどこっちでは使えない、という状況になっていました。
現在はリソースが統合されたので、よりクオリティの高いものになるでしょう。
Angular 2には、おそらくVirtual DOMは入らないです。