+ = より快適なSPA開発

「Angular 4 の最新動向と、2017年再注目のDart、そしてAngular Dart 」Dart の部 2/3

HRMOS事業部 小林 達at BizReach on 2017.3.6

自己紹介

✓ 小林 達 (こばやしさとし)

✓ HRMOS[ハーモス]プロダクト開発部

✓ HRMOS(の前身のスタンバイ)にAngularを導入した

● 2014/5当時は、まだReactは冒険

✓ Angular 1.4 で知識が止まっている...

▶ 今日は、Angular 2 のおさらいと、プラス Dart 部分少しという内容

Angular Dart とは

AngularDart の歴史

2016/10にリリース。今は全て Dart で書かれている。途中からTypeScript版と

分離し制約がなくなった反面、取り残される可能性も。

✓ 2017/03 現在3.0開発中。α1が出たくらい

✓ 2017/02 2.2 リリース

✓ 2016/11 2.1リリース

✓ 2016/10 2.0リリース @ Dart Developer Summit

✓ 2016/03 Angular本体からの(公式の)分離決定

公式サイト

https://webdev.dartlang.org/angular Angular本体とは分離

AngularDart のコンセプト

AngularDart は、生産性、性能、安定性 にフォーカスしたウェブフレームワーク。数百

人のGoogleエンジニアがミッションクリティカルで多大な収益を生むアプリを構築して

いる

AngularDart is a web app framework that focuses on productivity, performance, and

stability. Hundreds of Google engineers use AngularDart to build the sophisticated,

mission-critical apps that bring in much of Google’s revenue.

※ Dart自体と同じ方向性で、「ビジネスに使える」ことにフォーカス

(再掲)2017年、Dart 復権の兆し

✓ TIOBE Indexによると2016年に

”0.95%増加したDartは 〜 26位から17位へ急上昇”

✓ AdSense/AdWordsは、全面的にAngular Dartでリプレイス

2017年、Dart 復権の兆し

(再掲)Google AdSense のリニューアル

The new Google AdSense user interface: built with AngularDart

(2016/10 の意訳)

✓ 初版は2003年リリース。Google Web Toolkit (GWT) で作られていた

✓ 開発者は全体で100人近く、およそ25%がDartを使っていた

✓ Dart部分は、16万行

✓ 開発始めて2.5年、Dartを使って1.5年、Material Design化を8ヶ月

✓ コンパイルは8倍、開発時のページ読み込みは6-7倍、生産性は全体で2倍

2017年、Dart 復権の兆し

(再掲)Google AdWords のリニューアル

The new AdWords UI uses Dart — we asked why

(2016/3 の抜粋)

✓ Q: Why not Closure lib? GWT? TypeScript? Vanilla JS?

✓ (前略) 〜 巨大でミッションクリティカルなアプリケーションを作れる能力があるかど

うか、つまり、よいUXで、低遅延で、機能追加も継続的にできること。UXデザイナー

に十分な柔軟性を与えられるかどうか 〜 ワールドクラスの低遅延を実現できるか

どうか。多くの顧客が一日中、膨大なデータを処理するので速いことは超重要〜

(後略)

Angular Dart をサッと見る

フレームワークの全体像

AngularDart がいろいろ用意

開発者がよく作るところ

Component

Angular のUIの基本単位で、Dart、HTML、

CSSの3ファイルで構成されることが多い。

✓ バインドは片方向・双方向の

バリエーションがある

✓ Metadataはアノテーションのこと

✓ CSSもモジュール化できる

※絵的には、狭義のComponentはDart部分

のみ？広義は右の全体で。

Component: Template

テンプレートの部分。最初はなれないAngular記法

<div id="search-component" >

<h4>Hero Search</h4>

<input #searchBox id="search-box"

(keyup)="search(searchBox.value)" />

<div>

<div *ngFor="let hero of heroes | async"

(click)="gotoDetail(hero)" class="result" >

{{hero.name}}

</div>

</div>

</div>

Component: Template

ComponentからTemplateへの値のバインドと

TemplateからComponentへのイベントのバインド。↓が分かりやすい。

<div id="search-component" >

<h4>Hero Search</h4>

<input #searchBox id="search-box"

(keyup)="search(searchBox.value)" />

<div>

<div *ngFor="let hero of heroes | async"

(click)="gotoDetail(hero)" class="result" >

{{hero.name}}

</div>

</div>

</div>

Component: Metadata

Metadataはアノテーションで定義。通常使うのは数種類。非常にシンプルになっ

た。次頁のComponentクラスに付与する。

@Component(

selector: 'hero-search',

templateUrl: 'hero_search_component.html',

styleUrls: const ['hero_search_component.css'],

providers: const [HeroSearchService]

)

Component: Component

Dartのコード ! いわゆるControllerと呼ばれたりする部分

class AppComponent {

final List<Hero> heroes = mockHeroes;

Hero selectedHero;

void onSelect(Hero hero) {

selectedHero = hero;

}

}

Service

UIに関係しないコードを書く部分。

✓ @InjectorでDIする。シングルトンとしてインス

タンス化される

✓ 呼び出すときは@Componentで、providers属

性に記述し、コンストラクタで受ける

✓ v1のときのProvider、Service、Factoryという

使い分けはない

Service

Component側

@Component(

providers: const [HeroService] )

class DashboardComponent {

final HeroService _service;

List<Hero> heroes;

DashboardComponent( this._service);

Future<Null> fetch() async {

heroes = (await _service.getHeroes()) ;

}}

Service側

@Injectable()

class HeroService {

Future<List<Hero>> getHeroes() async {

final res = await _http.get(_heroesUrl);

final heroes = _extractData(res)

.map((value) => new Hero.fromJson(value))

.toList() ;

return heroes;

}

}

Dartのコード ! いわゆるControllerと呼ばれたりする部分

Model

絵にはないが、モデル達も使われる。より型安全にするための重要な要

素。

✓ fromJSON、toJsonなどを持つことも多い

● 取得したJSONにオブジェクトにして返すなど

つまり、典型的な開発では、

✓ Component を作る

● Template を作る (と、CSSを書く)

● 双方向バインドの作法を知る

● *ngFor、*ngIf などの既成のDirectiveを利用する

● Component を作る

● TemplateやServiceとのインタラクションを書く

● Metadataを書く

● 使うTemplateやCSS、Directive、Serviceを定義する

✓ Service を作る

✓ Model を作る

ほとんど普通のAngularの話かな？Dartは？

Stagehand でテンプレート生成

Yeomanみたいなもの。IntelliJのプロジェクト新規作成相当のことがコマンドラインからで

きる (いまのところ、それぐらい)。

$ pub global activate stagehand

$ stagehand web-angular

$ pub get

$ pub serve

# テンプレート作成

# npm install 相当

# スタブサーバ立ち上げ

AngularDart Components

独自UIにこだわらないのであれば、結構使えるかも。

✓ 純正のMaterialDesignコンポーネント群 (デモ)

✓ AdSense や AdWords が使っている

✓ 全てDartで書かれている

✓ Google社内では100種類以上あるらしい

✓ 2017/3現在アルファだが、計画された23個中18個まである

✓ IE11は対象外 (Edgeは対象)

✓ ドキュメントは、まだやっつけ感あり

Stream すごい

本家がRxJSでカバーしているところが、言語自体に組み込まれている。シーケンシャル

な非同期処理を制御 (右下の結果のサジェストみたいな処理)

var _searchTerms = new StreamController<String>. broadcast();

void search(String term) => _searchTerms.add(term);

Future<Null> ngOnInit() async {

heroes = _searchTerms.stream

.transform(new Debounce(new Duration(milliseconds: 300)))

.distinct()

.transform(new FlatMapLatest((term) =>

_heroSearchService .search(term).asStream()))

.handleError((e) {}) ; }

Streamの制御

制御対象

一定期間無視

最新だけ返す

IntelliJ すごい

✓ Java/Scalaに近いハンドリングができる

● コード補完が正確 (型をきちんと定義すればだが)

● コンパイルエラーの発生箇所がわかる

● Alt+Enterでimportできる

● Cmd + B で確実にソースに辿れる

● Alt + F7 で参照しているソースもわかる

● リファクタリングもそこそこか。名前変更とかファイル移動とか

✓ Angular まで追っていっても、すべて Dart で読めるのがいい ！

※ Execuse: もう少し本気で使わないと正しい感触とは言えない。。

デバグも分かりやすい

✓ Chromiumでのエラー表示もまあまあわかる

✓ DDC(Dart Dev Compiler)が完成すると更なる改善が期待できる？

※ Execuse: もう少し本気で使わないと正しい感触とは言えない。。

TypeScript 版との比較

本家と比較して何があるのか？ (注: 話半分で聞いてください)

✓ 本家は非同期がvoidになりがち。Dart版は Future<String>などより明確

✓ Dart版は@Input, @Output などテンプレートとのインタラクションが明確

✓ Dart版の await/async は then より見通しがよくなる。

✓ Dart版ではアノテーションでもメンバーがサジェストされる

✓ package.json より pubspec.yaml が全然シンプル

※ Heroチュートリアル比較にて

※ Execuse: もう少し本気で使わないと正しい感触とは言えない。。

実際、まだそんなに本家との違いはない

✓ AngularDart として、 本家 Angular からの違いはまだあまりない

(知らないだけかもしれない)

✓ とはいえ、Dart を自由に使えるという部分は既に大きな利点かも

(DDCがリリースされればより大きな利点に)

✓ 今後は、Dart の特色を追加していくらしい

(次が3.0.0のメジャーバージョンアップなので期待していい？)

まとめ

まとめ

✓ JavaScript のこととか何も考えなくていいのは嬉しい

● トランスパイル後をどれだけ考慮すべきか否かの感触はまだ不明

● モダンな開発をしたいけど、自分でいろいろなツールを判断(し続け)する工数

が取れない場合にはいいと思う

✓ 型がある感触は嬉しい (TypeScript より更に Javaっぽい)

● Dart Dev Compiler が出れば独自のChromiumから離れて、型付けも強化され

るようなので、より快適さはあがりそう

✓ 将来性は？。TS/JS版と分かれたことが吉と出るか凶と出るか

● TSも型付けは強化してきているので差があまり、、

● JSもES2015以降は良くなってきた差があまり、、