Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

naotohc

June 06, 2015
Tweet

More Decks by naotohc

Other Decks in Programming

Transcript

  1. なぜ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 (良くも悪くも) ライブラリ選定に悩む必要なし
  2. なぜ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/)
  3. Dart おさらい • シンプルで洗練された言語仕様(ここに価値を見いだせるかどうか) • 評価が定まっていない、または複雑性が増す仕様の採用には慎重 • Optional Types •

    学習コスト低(特にJavaとJavaScriptのプログラマーにとって) • 容易な環境構築 • 高い生産性(読みやすい、書きやすい、デバッグしやすい、コンパイル早い) • 今日使えるFuture(Promise), Stream, async/await, Lazy Iterable • WebComponents library (WebUI -> PolymerDart)
  4. 構造 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
  5. 構造 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
  6. 開発ワークフロー (Dart client) • pub serve • ブラウザのreloadでコードの反映 ◦ Dartium(1秒ほど。非常に早い)

    ◦ 他のモダンブラウザ(10秒ほど。自動的にJSのコンパイ ルが入るため) ローカル環境での開発中では、Nginx等を使用して各開発サーバー(pub dev server、GAE dev server、etc...)へのリクエストの振り分けを行う。
  7. 開発ワークフロー (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
  8. 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対応が始まる。
  9. 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まち)
  10. 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/
  11. 利点 • 型宣言、静的解析 • リッチなSDK, Pub package manager • First

    iteration cycle。コード変更の反映が早 い。1秒でブラウザに反映 • シンプルで洗練された言語仕様(悩まない) • EcmaScript NextをDartで先取り
  12. 課題 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にあればこの問題は大幅に軽減される
  13. 課題 モバイル環境での初回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の利点(インストール操作なし、審査なし、いつでも最新版)を損なう
  14. おまけ 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