🧊

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

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

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

で、作ったアプリ。

まとめると、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ぽい何かを作るものなのでは?!!

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

Httpの話 by @shin_v1

Angular 2のhttp部分の話。

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

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