ng-kyoto Angular Meetup #4 に行ってきたメモ #ng_kyoto

Observable触らんかね？ by @pastelinc

Angular 2の中で使われてるRx.jsもとい、Observableについて。

• Googleの検索フォームを考える
  • 文字列いれたら動的に表示するやつ
• 実装するなら
  • クエリをサーバーに投げる関数を用意
  • keyupでその関数を叩く
• リクエスト飛びまくるのでタイマー制御をしよう
  • キー入力があったらタイマー止めておく
• 同じクエリになる場合は無視したい
  • クエリと結果のキャッシュをもっておいて、随時チェック
• リクエストした順で、表示も保証したい
  • つらそう
• 複数のプロセスでも状態の同期が必要そう

そこでObservable！
これは、DOMイベントやタイマーなどのpush型のイベントソースをモデル化する概念。

GitHub - Reactive-Extensions/RxJS: The Reactive Extensions for JavaScript のREADMEによると、

const $input = $('#input');
const $results = $('#results');

/* Only get the value from each key up */
var keyups = Rx.Observable.fromEvent($input, 'keyup')
  .pluck('target', 'value')
  .filter(text => text.length > 2 );

/* Now debounce the input for 500ms */
var debounced = keyups
  .debounce(500 /* ms */);

/* Now get only distinct values, so we eliminate the arrows and other control characters */
var distinct = debounced
  .distinctUntilChanged();

function searchWikipedia (term) {
  return $.ajax({
    url: 'https://en.wikipedia.org/w/api.php',
    dataType: 'jsonp',
    data: {
      action: 'opensearch',
      format: 'json',
      search: term
    }
  }).promise();
}

var suggestions = distinct
  .flatMapLatest(searchWikipedia);

suggestions.subscribe(
  data => {
    $results
      .empty()
      .append($.map(data[1], value =>  $('<li>').text(value)))
  },
  error=> {
    $results
      .empty()
      .append($('<li>'))
        .text('Error:' + error);
  });

こういう感じ。

• まだ仕様は提案中なので、ライブラリが必須
  • 上述のRxJSとか
  • ちなみにECMAのObservableとRxJSのAPIはまだ同等ではないので注意

Angular 2のテンプレートからもさくっと`subscribe()`できるそうな。

Angular 2 でアプリ作ってみた by @armorik83

スライドはない！が、Gistはある！

ng-kyoto Angular Meetup #4 資料 · GitHub

• Angular 2でもアプリは作れまぁす！
• ただどう作るか
• MVVMではなさそう
  • Angular2とMVVM // Speaker Deck
• Fluxなのでは
  • 10分で実装するFlux
  • Reactみたいな描画速いやつだから使えるパターンでもある
  • Angular 2も速いよ！
• Angular 2 x Fluxの先駆け
  • Managing State in Angular 2 Applications | Victor Savkin
  • でも複雑・・
• Almin.js | JavaScriptアーキテクチャ も参考に
• そして自分でも作った(そのうち公開)

作ったWalts(そのうち公開)について。

• View / Action / Store の3拍子
  • 概観はまぁふつうのFlux
• Action叩くと同期でも常にPromiseが返るようにしてる
• 描画のイベントはRxJSで間引くことでパフォーマンス担保

で、作ったアプリ。

• 使ったお金を管理するアプリ
• indexedDBつかった
  • Dexie.js - Minimalistic IndexedDB Wrapper
  • それでも正規化しまくると大変でAsync/Await祭になる

まとめると、Scoped Stylesいいよ！

Angular 2 のRendererをイジってみる by @_likr

Not yet documentedなAngular 2のRendererについて。

• RootRenderer
• Renderer
  • デフォルトはDomRenderer
  • WorkerRenderer とかも用意されてる
  • 抽象化されてるので自分でも実装できる
• ただし20近いAPIが必要・・・
  • `createElement()`とか
• 実装すれば3Dグラフィックも出せるのでは！
• THREE.jsベースのRenderer作ってみた
  • ChangeDetectionも効く！
  • ngForで書ける！
  • イベント拾ってどうこうも同じようにできる
• Angular 2: One Frameworkとは
  • UIぽい何かを作るものなのでは？！！

でもこういうことするものじゃないとのことｗ

Httpの話 by @shin_v1

Angular 2のhttp部分の話。

• `http.get(url).subscribe(res)`する
• Angular 1のときはPromiseだったが2ではObservable
  • `http.get(url).toPromise()`もできる
• Content-Typesは自分で指定しないとダメ

ソースを読めばわかる！らしい。