DartでWebアプリ その利点と課題

Dart Meetup Tokyo #1資料　http://dartisans-jp.connpass.com/event/15246/

Transcript

1. DartでWebアプリ その利点と課題 @ntaoo (https://twitter.com/ntaoo) 2015/06/06
2. TOC 1. なぜDartなのか 2. 開発の振り返り 3. 利点と課題
3. なぜDartなのか
4. なぜDartを採用したか 現在開発しているアプリの特徴 Client, Server双方でDOM Treeをヘビーに探 索、操作する Kindle Cloud Readerのような感じ 多プラットフォーム(iOS, Android, Win, Mac...)対応 デバイスAPIは使わない（今のところ）
5. なぜDartを採用したか Client, Serverで同一の言語、APIを使用可能 • Client : dart:html • Server : package:html (package:html5 -> package:htmlに改名)
6. なぜDartなのか - 高い生産性 • リッチな標準API DOM API(html), Future, Stream, Lazy Iterable, etc... https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/home • Pub package manager, serve, build, run, transformer https://pub.dartlang.org/ https://www.dartlang.org/tools/pub/assets-and-transformers.html (良くも悪くも) ライブラリ選定に悩む必要なし
7. なぜDartなのか - 高い生産性 • 型アノテーション, Optional Types 基本的に型宣言をするべき。必要があれば緩くする。ローカル変数へはお好みで省略。 https://www.dartlang.org/articles/optional-types/ • 静的解析ツール（analysis server） http://htmlpreview.github.io/?https://github.com/dart- lang/bleeding_edge/blob/master/dart/pkg/analysis_server/doc/api.html • analysis server等ツールのIDEへの統合 WebStormが素晴らしい! (https://www.jetbrains.com/webstorm/) dartfmt (https://www.dartlang.org/tools/dartfmt/)
8. TypeScript? 良い選択肢ですね！
9. Dart おさらい • シンプルで洗練された言語仕様（ここに価値を見いだせるかどうか） • 評価が定まっていない、または複雑性が増す仕様の採用には慎重 • Optional Types • 学習コスト低（特にJavaとJavaScriptのプログラマーにとって） • 容易な環境構築 • 高い生産性（読みやすい、書きやすい、デバッグしやすい、コンパイル早い) • 今日使えるFuture(Promise), Stream, async/await, Lazy Iterable • WebComponents library (WebUI -> PolymerDart)
10. DartVM on Chrome
11. DartVM Chromeへの搭載は見送り どこで使う？ • 開発用ブラウザー（Dartium） • Server • Mobile(!?) • Embed(!?) http://embeddeddart.blogspot.jp/2015/05/dart-on-pi-getting-started.html
12. 開発の振り返り
13. 開発の振り返り
14. 構造 Client (SPA) : • 98% Dart 一部 JavaScript • polymer_dart(v0.5.5), core_elements, paper_elements • 自前Client side routing(package: route_hierarchicalをwrap) • core-ajax未使用 View (Html, PolymerDart) <web-app> ViewModel (PolymerDart) Model (Dart domain model) Resource, Cache (Dart) </web-app> JSON request / response
15. 構造 Server FrontEnd: GAE Python (default module) • JSON API for client • DataStoreの操作 BackEnd: Dart on Appengine ManagedVMs • DOM Tree探索、操作等 • frontend serverからのrequestを受けて responseを返す関数。 Dart on appengineはまだβ版のため、いざとなれば Compute Engine 版に切り替えられるように設計。 BackEnd その他modules FrontEnd: Python default module BackEnd: Dart module その他modules JSON request / response JSON request / response Datastore
16. 開発ワークフロー (Dart client) • pub serve • ブラウザのreloadでコードの反映 ◦ Dartium(1秒ほど。非常に早い) ◦ 他のモダンブラウザ(10秒ほど。自動的にJSのコンパイ ルが入るため) ローカル環境での開発中では、Nginx等を使用して各開発サーバー(pub dev server、GAE dev server、etc...)へのリクエストの振り分けを行う。
17. 開発ワークフロー (Dart client) Debugger • WebStormを使おう • DartEditorは引退 Build (Compile to JS, prepare for deployment) 1. pub build --mode=release(30秒) 2. gulp (imagemin, rev, etc...) * 必要ならば $ pub build --mode=release && gulp Grinderが将来Dartのgulp的存在になる？ https://github.com/google/grinder.dart
18. PolymerDart • PolymerJSをpolymer_interlop packageでwrapしたもの • Dartで扱いやすいように記法を改善している • 2015/06/06現在、PolymerJSv0.5.5対応 • paper-elements, core-elementsについてもwrapしてpub packageで提供 • Polymer Gestures未対応 PolymerJSv1.0　おめでとうございます PolymerJSがv1.0に到達して仕様が安定してからPolymerDartもupdateさせる方針 のようだったので、これからPolymerDartの1.0対応が始まる。
19. PolymerDart • モチベーション -> paper-elements, core-elementsを使いたい • PageごとにそのPage全体を司る一つのcustom elementを作成 • 全てをcustom elementで…とはしていない。core-ajaxとかcore-local-storage とか使ってない • Persistence(cache) layerやresource layerを作っている • Client side routingもcustom elementでなくroute_hierarchicalをwrapした自前 のcodeで表現 • まだ不安定版なのでバグを警戒(いろいろ怪しかったりピーキーだったり) • Custom elementsの作成は必要最小限に留める (v1.0まち)
20. PolymerDart • Model層にドメインモデルを構築して必要ならば@observableで変更をviewに 伝播させる class Foo extends Object with Observable { @observable bool isChosen = false; ... • テーマを適用するため、CoreStyle（外部cssをshadow dom内に適用）必須(v0. 5.5時点) • SCSS使用可能(pub sass transformer) • pub serve, pub build時にいろいろwarningを出してくれる https://www.dartlang.org/polymer/reference/error-messages/
21. 硬く書く • factory constructor, static async construct methodを活用する • 基本immutable objectにする
22. AngularDart? 様子見 (PolymerDartとDartSDKで概ね間に合っ ている) PolmyerDartとともに待ち望まれるクライアントサイ ドのキラーフレームワーク その他E2Eフレームワークの萌芽
23. 利点と課題
24. 利点 • 型宣言、静的解析 • リッチなSDK, Pub package manager • First iteration cycle。コード変更の反映が早 い。1秒でブラウザに反映 • シンプルで洗練された言語仕様（悩まない） • EcmaScript NextをDartで先取り
25. 課題 Buildで生成されるサイズ • index.htmlとindex.html.polymer.bootstrap.dart.js ◦ PolymerDartを使用すると500KB~。gzipして150KB~ ◦ 現在1000KB超。gzipして300KB ◦ gzipして300KBくらいを保つのが目標 ◦ かなりマシになったとはいえ ◦ PolymerDartのvulcanizeではcommentをstripするoption(--strip-comments)がない ◦ PolymerJSv1.0対応で改善を期待 将来のdart2jsの改善, Dart Dev Compilerの開発による問題の軽減 そもそも信頼できるCache機構がWeb platformにあればこの問題は大幅に軽減される
26. 課題 モバイル環境での初回load、cache問題 Dartだけでない。Webプラットフォームの課題 不安定な(モバイル)ネットワークへの対応。 Offline戦略重要 • ServiceWorkerによるcache -> 期待大。しかしMobile Safariに実装されるのはいつ？ • 起動に必要な部分のみ切り出し、残りは遅延ロードする方向性 Dynamic HTML Import (lazy loading) REF: io2015 Polymer session. https://www.youtube.com/watch?v=fD2As5RmM8Q • サーバーサイドプリレンダリング？ • Cordovaなどでネイティブアプリ化し assetsを永続化 -> Webの利点（インストール操作なし、審査なし、いつでも最新版）を損なう
27. 壁 • ライブラリ、フレームワークの革新がJS側で活発 • DartでJSのライブラリを書くことが事実上不可能 • 既存のJSのコードベースを段階的にDartに移行することが 困難 -> dart2jsの改善、Dart Dev Compiler https://www.youtube.com/watch?v=2Ef3ALvbkhA https://www.youtube.com/watch?v=FiXiI2Atexc • 英語の壁？
28. おまけ DEP(Dart Enhancement Proposal) Non-null Types and Non-null By Default (NNBD) https://github.com/chalin/DEP-non-null/blob/master/doc/dep-non-null- AUTOGENERATED-DO-NOT-EDIT.md