ng-kyoto Angular Meetup #4 資料

dexie.js

import Dexie from 'dexie';

const dbName = 'dexie-suburi';
const dbVer  = 2;

window.indexedDB.deleteDatabase(dbName);
const dexieDb = new Dexie(dbName);

dexieDb.version(dbVer).stores({
  user: '++id,name',
  task: '++id,userId,text'
});

dexieDb.transaction('rw', [dexieDb.user, dexieDb.task], () => {
  dexieDb.user.add({name: 'Jose'});
  dexieDb.user.add({name: 'Michael'});

  dexieDb.task.add({userId: 1, text: 'Buy milk'});
  dexieDb.task.add({userId: 1, text: 'Buy egg'});
  dexieDb.task.add({userId: 2, text: 'Visit a hospital'});
});

dexieDb.user
  .each((user) => {
    console.log(`Dexie     user id: ${user.id} value: ${JSON.stringify(user)}`);
  });

dexieDb.task
  .each((task) => {
    console.log(`Dexie     task id: ${task.id} value: ${JSON.stringify(task)}`);
  });

indexeddb.js

const dbName = 'indexeddb-suburi';
const dbVer  = 1;

const idbReq = (() => {
  window.indexedDB.deleteDatabase(dbName);
  return window.indexedDB.open(dbName, dbVer);
})();

idbReq.onupgradeneeded = (ev) => {
  const db = ev.target.result;
  const userStore = db.createObjectStore('user', {keyPath: 'id'});
  const taskStore = db.createObjectStore('task', {keyPath: 'id'});
}

idbReq.onsuccess = (ev) => {
  const db = ev.target.result;

  const transaction = db.transaction(['user', 'task'], 'readwrite');
  const userStore   = transaction.objectStore('user');
  const taskStore   = transaction.objectStore('task');

  userStore.add({id: 1, name: 'Jose'});
  userStore.add({id: 2, name: 'Michael'});

  taskStore.add({id: 1, userId: 1, text: 'Buy milk'});
  taskStore.add({id: 2, userId: 1, text: 'Buy egg'});
  taskStore.add({id: 3, userId: 2, text: 'Visit a hospital'});

  userStore.openCursor().onsuccess = (userStoreSuccessEv) => {
    const cursor = userStoreSuccessEv.target.result;
    if (cursor) {
      console.log(`indexedDB user id: ${cursor.key} value: ${JSON.stringify(cursor.value)}`);
      cursor.continue();
    }
  };

  taskStore.openCursor().onsuccess = (taskStoreSuccessEv) => {
    const cursor = taskStoreSuccessEv.target.result;
    if (cursor) {
      console.log(`indexedDB task id: ${cursor.key} value: ${JSON.stringify(cursor.value)}`);
      cursor.continue();
    }
  };
};

text.md

Angular 2でアプリ作ってみた

armorik83

• 奥野 賢太郎
  • 京都市出身
  • ChatWork株式会社
  • ng-kyoto代表, ng-japanスタッフ

スライドは？

• 無い
  • 今日発表するアプリの実装に全ステータスを振った
  • すまん

話すこと

• Angular 2ではどういうアーキテクチャがいいの？
• Angular 2でFlux作ってみた
• IndexedDBでアプリを作ってみた

Angular 2ではどういうアーキテクチャがいいの？

MVVMではない

• https://speakerdeck.com/laco0416/angular2tomvvm

どちらかというとMVC

• Serviceに値を置いていって、DIしてその値を使う
  • Angular 1でいうSharedServiceの概念
  • MVCってあちこちでゴチャゴチャにデータフローが発生して煩雑だからFluxという一方向アーキテクチャが提唱されたのでは？

Flux

• Angular 2はコンポーネント指向かつ高速
• イベント中心に設計できる（正確に言うとRxJSによるstream）
  • Rxこじらせられる

Angular 2でFlux作ってみた

参考にした話

Redux

• あれはReactのためのもの
  • React勢の中でもこじらせてる派閥のもの
  • なんかやけに話を複雑にしてそうで疑心暗鬼
    • みんな流行ってるという言葉だけで飛びついてない？
    • あれで多くのユースケース想定したときスケールしねぇ…って思ったんだけど私だけ？
• とはいえ、詳しくないのでmizchiさんに聞いたら詳しいと思った

Savkin's Angular 2 Flux

• http://victorsavkin.com/post/137821436516/managing-state-in-angular-2-applications
• まぁわかる
  • わかるけど、やっぱり話を複雑にしすぎてね？
  • 本質の部分だけパターン化すればよくね？

Almin.js

• http://azu.github.io/slide/2016/child_process_sushi/almin-javascript-architecture.html
• ドメイン駆動系のアーキテクチャ
  • 先日のchild_process_sushiで教えてもらった
  • まったくの偶然だけど、私が2週間前から作っていたAngular 2 Fluxの構想と本質がとても似ていた

Walts

• Angular 2用Fluxフレームワークを作った
  • React用って腐るほどあるでしょ
  • Angular 2用もきっと腐るほど出るよ（もう出てる？知らない）
• 自分の経験をベースにSavkin's FluxとAlmin.jsを参考にしている
• もうちょい安定させたらOSS化
  • 自分がいろいろなアプリで使う用 && 晒し用
  • 入社8ヶ月の業務での知見と地雷経験がふんだんに活かされている
  • 何かの参考になれば

三拍子

• View -> Action -> Store
• ここからはコード見てもらったほうが早い

Demo

• （よくあるincrementsの例を見せる）
• （フレームワーク側の実装と、extendsの使用例を見せる）
  • （Viewからの発火）
  • （データフローと逆転のコールバックフロー）
  • （型保護とGenerics）
• （incrementsのイベントを多重発火させたときの挙動を見せる）
• （complete subjectの挙動を見せる）

IndexedDBでアプリを作ってみた

IndexedDB?

• http://caniuse.com/#feat=indexeddb
• Web SQLなんてなかった
• オブジェクトに対する高速なインデックス処理と検索を可能にするローカルデータベース

Demo

• （importのインタフェースをDirectiveで作った話を見せる）
• （importを見せる）
• （カテゴリの変更を見せる）
• （ソースで解説）

他にいろいろハマったところ

• ChangeDetectorRef
• styles

アプリのソースコード

• https://github.com/armorik83/reveal-wealth