DartでWebアプリを

リリースした話

Me

https://mylexicon.io
Angular (Dart) : 自社プロダクトにて採用済み🤗
Angular (TypeScript) : お客様プロダクトにて採用済み😇
Dart、Angularのご相談、導入支援承ります

@ntaoo (twitter, github, etc)

アジェンダ

なぜDartなのか
Dart for WebとAngularDart
Flutter
事例紹介: MyLexicon ( https://mylexicon.io )

なぜDartなのか

アプリケーション開発の大統一言語となれる潜在能力
- Web : AngularDart, JavaScript compilers
- Native App : Flutter for Android, iOS, and...
- Server, Cli : dart:io
バランスのとれた実用的な言語仕様
充実したスタンダードライブラリ
各分野で、キラーフレームワーク、ライブラリが提供
Dart Team以外によるライブラリ開発も活発化

なぜDartなのか

学習コスト低
- Java、JavaScriptを学んだプログラマーにとって違和感がないように配慮
- 両言語のイケてない点は引き継がず
- 産業界での評価が確立された要素を手堅くまとめたシンプルな言語仕様
- Dartの経験が浅くともすぐに高い生産性を出せる
- Don't surprise the programmer

なぜDartなのか

DX (Developer Experience) 最高
- 言語仕様が安定。やみくもに仕様を膨らませない強い意志
- 安定してハイパフォーマンス
- 環境構築が非常に楽。つまずかない
- スタンダードライブラリのDoc Commentが充実
- スタンダードライブラリのソースコードを読もう！
  - Dartコードのお手本

なぜDartなのか

DX (Developer Experience) 最高
- 型安全性が高く、なおかつコンパイルが速い
- Edit & Refresh開発余裕
- Hot Reloading (Flutter)
- Dartanalyzerによるエディタサポート
  - 静的解析による瞬時のエラーフィードバック
  - 補完、リファクタリングサポート
  - 柔軟なlint、dartfmt、etc...
  - ビルド職人不要

なぜDartなのか

非常に活発なSDKの開発
すでに5万commits以上
"Dart is an ambitious, long-term project." (from https://www.dartlang.org/)

なぜDartなのか

Javaの皮を被ったSmalltalk（だった）
- Dart1.0の言語デザイナーがSmalltalker
- コアメンバーにSmalltalk VM研究の経歴など
- (ほぼ)全てがObjectへのMessage送信で動く世界
- 初期は明らかに、DartVMによってSmalltalkの世界をWebにもたらそうとしていた
  - DartEditor + Debugger, ChromeDevEditor
  - Snapshot
  - Mirror based reflection
  - 動的言語 + Optional Pluggable Type System
  - Live Programming, etc...

なぜDartなのか

Javaの皮を被ったSmalltalk（だった）
- ChromeへのDartVM非搭載の決定により方針変更😢
- 型安全性とAoTコンパイル重視へ(Strong mode)
- デプロイ後にDartVM上で動作するのは今のところServer SideおよびCliコードのみ
- Flutterは開発時はDartVMで動作させ、リリース時にネイティブコードにAoTコンパイル
- Web向けはdartdevc(開発)およびdart2js(リリース)

なぜDartなのか

JavaScriptの
- 基礎が杜撰で混沌とした言語仕様が嫌いな人
- さまざまな罠ともう付き合いたくない人
- 移りかわりの激しいエコシステムに疲れた人
- 環境構築で疲弊したくない人
シンプルでプラグマティックな言語が好きな人
Javaの経験がある人
プログラミング初心者

Dartを試してみましょう

なぜDartなのか

Dartに向かない人
- 欠点を含めてJavaScriptを愛している人
  - JavaScriptグル
  - JavaScriptソムリエ
  - バッドノウハウ収集に妖しい魅力を感じる人
- メジャーな言語が好きな人
  - (日本語)の情報がたくさんある
  - すぐに周りの人に聞ける (大事なことですよね）
- ドラフト版WebAPIをいち早く評価してみたい人
  - 最近dartdevcが安定してきたので、あえてDartからinteropコードを書いて試してみるのもあり？

Dart for WebとAngularDart

Dart for Web

Dartdevc (DDC)
- 開発用コンパイラ
- ES6がコンパイルターゲット
- 最近安定してきた
- コンパイル速度とデバッガビリティ重視
- 1秒から10秒ほどでコンパイル
  - AngularDartでのユースケースでもうすこし速くなって欲しい

Dart for Web

dart2js
- リリース用コンパイラ
- パフォーマンスとサイズを最適化
- コンパイルに30秒から90秒ほどかかる

Dart for Web

dart:html
- Dartから自然に扱えるように整備されたWebAPI
- 大部分はWebIDLから生成されたJS Interop API
- Experimentalなドラフト版WebAPIを使いたければ、自分でpackage:jsを使ってInteropコードを書く必要あり

    final div = new DivElement()
      ..id = "anElementId"
      ..classes.addAll(['aClass', 'anotherClass'])
      ..style.color = 'red'
      ..children.add(new Element.span()..text = 'The inner text.')
      ..onClick.listen(handleOnClick);

class ScrollPreventing {
  final Element _element;
  final List<int> _targetKeyCodes = const [
    KeyCode.SPACE,
    KeyCode.PAGE_UP,
    KeyCode.PAGE_DOWN,
    KeyCode.END,
    KeyCode.HOME,
    KeyCode.LEFT,
    KeyCode.UP,
    KeyCode.RIGHT,
    KeyCode.DOWN
  ];
  StreamSubscription<Event> _eventSubscription;
  bool _isPreventing = false;

  ScrollPreventing(String selector) : _element = querySelector(selector);

  bool get isPreventing => _isPreventing;

  set isPreventing(bool prevent) {
    if (prevent) {
      _eventSubscription = StreamGroup.merge<Event>([
        _element.onMouseWheel,
        _element.onTouchMove,
        _element.onKeyDown.where((e) => _targetKeyCodes.contains(e.keyCode))
      ]).listen((e) => e.preventDefault());
    } else {
      _eventSubscription?.cancel();
    }
    _isPreventing = prevent;
  }
}

Dart for Web

dart:htmlで、KeyCodeを始め

さまざまなconstantを定義済み

dart:asyncが標準でStreamを提供

package:async (from Dart Team)

Event propertyも定義済み

DOM APIとDartの自然なシナジー

ElementStream<KeyboardEvent>

Dart for Web

XSS対策 -- NodeValidator, NodeTreeSanitizer
- ホワイトリスト方式
- dart:htmlにて標準装備
- AngularDartを使用してもこういった低水準DOM APIを活用するユースケースは存在

final sanitizer = new NodeTreeSanitizer(new NodeValidatorBuilder()
    ..allowHtml5()
    ..allowElement('XREF'));

element.setInnerHtml(htmlString, treeSanitizer: sanitizer);

Dart for Web

DOMを扱うのが

格段に楽になる

ほんとうに楽

AngularDart

もうひとつのAngular
15ヶ月ほど前にAngular(TypeScript)からFork
- AngularJS
- -> AngularDart (ver 1)
- -> Angular (ver 2) with TypeScript
- -> AngularDart (ver 2~)
Angular または AngularDartと呼ばれる
複雑な経緯

AngularDart

Angular (TypeScript)チームとは相互に成果を共有
基本的な思想、大部分のAPIはTypeScript版と同じ
最近は徐々に離れていっている印象
TypeScript版を知っていればDart版も分かる。逆も同じ
dart:htmlの基盤の上に構築
Dartの充実したスタンダードライブラリとエコシステムを利用
既に大規模開発の実績
AdWords, AdSenseというGoogleの収益にとってクリティカルなアプリがAngularDartでリニューアルされた

AngularDart

AngularComponents : TypeScript版のmaterial2に相当
SSRの仕組み無し😇😇😇
- SPAとしてのパフォーマンス向上を優先し、TypeScript版にあるような抽象化層を除去
- Issueは上がっている

AngularDart

SSR 😟😤😟
本質的に、必要？
- たしかにマシンリーダブルなwebとの親和性は低くなる
- そもそもBot側がJSを理解すべき？
- Webアプリの起動時間が長い現在のブラウザの仕組みが貧弱なのでは
とはいえ、現状のwebでは需要は高い
- 過渡期
SEOという、ビジネスの収益に大きな影響が出る要素
UXとSEOの間のジレンマ
奇妙すぎる

Flutter

Dartによるネイティブアプリ開発フレームワーク
iOS, Androidに対応
シングルコードベース
ネイティブプラットフォームのUIライブラリのバインディングでなく、Dart製独自UIライブラリを整備
iOSのUIの仕様追加、変更にも迅速に対応
Flutterチームへの信頼感がある
同カテゴリにはReact Native, Xamarin, Cordova等

Flutter

最高！
絶賛の声が多い
盛り上がっている感がある
まだα版

MyLexicon

https://mylexicon.io
英語力の基礎となる語彙力、表現力等を最小の労力で増大させる学習アプリ
現実世界の英文を読むことを通じ、そこで出会う分からない単語、表現等、覚えたいもののみ登録し、学習対象にする
SRSでリマインド
主にESL(English as a Second Language) Learner 向け
日本人で英語を学んでいる人ももちろん対象
Native Speakerでも、６〜１８歳くらいの語彙を構築中の子供に刺さる可能性

MyLexicon

https://mylexicon.io
AngularDart SPA
AngularDart Chrome Extension
Dart server
Flutter (予定)

Webページを読んでいるときに出会う知らない単語、表現等を選択して、MyLexicon Dictionary ChromeExtensionを起動すると、その定義と例文が表示される。

さらにそれをそのコンテキスト（センテンス、ページURL、ページタイトル）と共にMyLexiconに登録する。

定義が辞書になくても、英文であればなんでも登録可能。

真似したい言い回し等覚えたいものをかたっぱしから登録しまくる。

MyLexicon

間隔を空けてReviewを繰り返し、記憶に定着させる（SRS)

MyLexicon Dictionary = 英英辞典と登録済みLexical Itemsおよびその学習状況の表示を統合

MyLexicon

今後の開発予定
- UI for Mobile Web 😅
- Much Better landing page
- Ads
- Review system ver.2
- Web push notification for the review.
- Web payments support for the subscription service
- Flutter (including adding a lexical item feature)
- Web Extension for Firefox, Edge
- Much much more...
収益化をめざしてやっていく

MyLexicon

Dartを選択した理由
- すべての領域に対応可能
  - Web, Native Mobile, Server, Cli
  - スモールスタートからダイキボ開発まで
- 言語の統一による
  - コードの共通化
  - 言語間思考コンテキストスイッチの無さ
- Dart自体の快適さ、高生産性。DXが最高

MyLexicon Architecture

package:

web_app

AngularDart

package:

web_extension

AngularDart

Flutter

　(予定）

package:

shared_components

AngularDart

Plain Dart, without dart:html

(But, still depends on Angular DI)

package:model

App models
Entities
Values
Repositories

Firebase

For Static Hosting, Authentication

package:server

On GCP

Communicate with other API services

package:

client_server

MyLexicon

web_appとweb_extensionでcomponentsを共有
- MyLexicon Dictionaryの機能、UIはそれなりに複雑
- しかしweb_appでもweb_extensionでもほぼ同じ
- Componentsとmodelを共有したい！
- -> package:shared_components

<mylexicon-dictionary></mylexicon-dictionary>

MylexiconDictionary componentおよび

MyLexicon

Flutter対応をにらみ、ViewControllerとModelを厳格に分離したい
- -> package:modelに分離
- しかしAngularからDI機能が分離されていないので、いまのところpackage:modelはpackage:angularに依存

MyLexicon

package:modelとpackage:serverでコードを共有したい
- -> package:client_server
- Entity schema interfaces and some methdos
- Validation rules
- Other constants

MyLexicon

Firebase最高
- package:firebase
- firebase APIのJS Interop
- Dart TeamメンバーとFirebaseメンバーが協力してメンテナンス
- firebaseのアップデートにきちんと対応してメンテナンスされている安心感
- Flutter用firebase packageもアクティブにメンテナンスされている

MyLexicon

ツラミの共有 - Chrome Extension
- package:chromeを利用してJS Interop
- コード変更内容の反映にはpub buildが必要
  - debug buildでもbuild時間60秒。辛い
  - dartdevcは機能せず
    - dartdevcでもbuildに60秒かかる
    - DOMの構築に失敗しruntime errorになる
  - Browser ActionのAngularによるUI Component部分はあらかじめpackage:web_appで構築、確認しておくと良い

MyLexicon

ツラミの共有 - package:chromeのバグ
- chrome.runtime.sendMessage, chorme.runtime.onMessageが動かない
  - browser action, event page, content script間の通信を司るクリティカルなAPI
  - かなり前からissueがopenのままfixの気配なし
  - WebIDLからinterop codeを自動生成しするワークフローのため、bug fixのcontributeが困難
  - 自力でinteropコードを書いて解決
- package:chrome ドッグフーディングされていないのでは😅

MyLexicon

それでもAngularDartとpackage:chromeでChrome Extensionを作る理由
- 型システムの支援が受けられる
- Angular componentsの共有によりbrowser actionのUI構築が辛くない

MyLexicon

package:chromeはたぶんWeb Extensionに対応していない
- 名前空間が異なる
- いざとなったら自力でinterop codeを書く
  - そんなに難しくない
  - けっこう簡単

MyLexicon

Chrome Extension Inline Installationに対応するDart APIが見当たらなかった
- Chrome専用の「ブラウザ」API
- package:chromeは対応していない
  - chrome appおよびextension用packageなので
- dart:htmlも対応していない
  - Chrome専用APIだから？
- 自力でinteropコードを書いて検証した
- 詳しくは以下の記事にまとめた
- https://qiita.com/ntaoo/items/7b66c2448b5c47c2bbb4

MyLexicon

Angular UI Componentライブラリの不足
- package:angular_components
  - AngularDart用google公式package
    - 現在もまだ基礎的なcomponentsが不足
    - コードの質は高いがいまのところStyleのカスタマイズ性が低い
      - ::ng-deepを使いまくってしのぐ😇
    - 最近まで、一年以上preview releaseのままだった

MyLexicon

Angular UI Componentライブラリの不足
- package:angular_componentsが充実するまでの間は、angular/material2からcomponentを移植してしのいでいた
  - 今でもMyLexiconのcomponentにはmaterial2由来のcomponentが複数存在
  - レイアウト系componentsは安易に外せない
    - UX、Layout、Styleへのインパクトが大きいため
- 良い勉強になった😇
- 他、汎用UIコンポーネントを独自開発
  - そんなに難しいことはしていない

MyLexicon

DartiumとDartdevc
- Dartium
  - 最新のChromeからver10くらい遅れている
  - Dartiumで動いてChromeで動かなかったり表示が崩れたりを複数回経験
  - とはいえコードの変更反映の更新は非常に速いので重宝していた
  - Dart2.0で引退予定とアナウンス済み
  - 代わりに、Dartdevcを使う

MyLexicon

DartiumとDartdevc
- Dartdevc
  - 最近までやや不安定。最近やっと安定してきた印象
  - Dartiumと同等の1秒以下での更新を期待
  - MyLexiconでは現状、5~10秒かかっている
    - AngularDartでしかもpackageを分けているので依存関係が影響している？
    - もっと速くなってほしい
  - * 注）個人の印象です

まとめ

Dart良い
過小評価されすぎ
今が始めどき
Dartはこれから人気がでそう
コミュニティの盛り上がりもこれから
AngularDartとFlutterという２大キラーフレームワーク
まだ辛いところもあるけど、なんとかなる（なった）
一緒にDartで楽をしましょう

DartでWebアプリを

リリースした話

Me

アジェンダ

なぜDartなのか

なぜDartなのか

なぜDartなのか

なぜDartなのか

なぜDartなのか

なぜDartなのか

なぜDartなのか

なぜDartなのか

なぜDartなのか

なぜDartなのか

なぜDartなのか

Dart for WebとAngularDart

Dart for Web

Dart for Web

Dart for Web

Dart for Web

Dart for Web

Dart for Web

AngularDart

AngularDart

AngularDart

AngularDart

Flutter

Flutter

MyLexicon

MyLexicon

MyLexicon

MyLexicon

MyLexicon

MyLexicon Architecture

MyLexicon

<mylexicon-dictionary></mylexicon-dictionary>

MyLexicon

MyLexicon

MyLexicon

MyLexicon

MyLexicon

MyLexicon

MyLexicon

MyLexicon

MyLexicon

MyLexicon

MyLexicon

MyLexicon

まとめ

AngularDartでWebアプリをリリースした話

More from ntaoo