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

実家に帰るついでに行ってきた && 話してきました。

話した資料はこちらです。

知ってて得するVanilla JS

以降、他の皆さんの発表メモ。
電池がアレなのでLT分はありません！

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は自分で指定しないとダメ

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