LoginSignup
13
12

More than 5 years have passed since last update.

Angular2系向けFluxライブラリのWaltsを使ってみた

Last updated at Posted at 2016-10-03
1 / 15

自己紹介

  • twitter: @_sisisin
  • github: @sisisin
  • 普段触ってる技術
    • 仕事では主にAngular1.4系でSPA開発
    • 個人では主にReact,Node.js.最近はちょろっとRuby
    • Angular2系は7月のハンズオンに参加した程度であまり触ってない

アジェンダ

  • Waltsとは?
  • モチベーション
  • デモ
  • 所感
  • まとめ

Waltsとは

@armorik83 さん作のAngular2系でFluxするライブラリ

詳細は以下の記事にて
Walts - Angular 2向けFluxライブラリを作った


Waltsとは

先程の記事に、

ここはワルツと呼んでもらいたい。View -> Action -> Store、この三角の動きを三拍子に見立てて名付けたものだ。

とあるように、この3つがほぼ全てといっていいライブラリになっている


Waltsとは

  • Actionでstateを更新する関数を定義
  • StoreではViewへstateを渡すためのobservableを定義
  • ViewはStoreの定義しているobservableをsubscribeして状態を取得

Waltsとは

ライフサイクルはシンプルにこれだけ!
もともとFlux自体が複雑な概念じゃないので、難しいことはない
React+Fluxを触ったことがある人には馴染みやすい世界になります


Waltsとは

理解の助けになる最小構成のアプリ(@ovrmrw さん作)
https://github.com/ovrmrw/angular-walts-increment


モチベーション

  • Angularには状態管理の設計方針がない
  • Reactで書くときと比較すると、状態管理に迷わなきゃいけなかったのが大変嫌だった
  • そこにあのはちさんがFluxのライブラリを用意したと言うじゃないか

デモ

リポジトリ:https://github.com/sisisin-sandbox/gh-issues-ng2

GitHub Pages: https://sisisin-sandbox.github.io/gh-issues-ng2/


所感

ポジ

  • Dispatcher,Actionという考え方とDIの相性が良い
  • 型定義ファイルであまり消耗せずにすむ
  • Reactよりtemplateの自由度が高いなどのAngularの特徴が強い
  • Rxについて考える層がバッチリ薄くなりそうで良さみ(多分

所感

ネガ

  • Dispatcherの役割の少なさ
  • this.delayedが最初ピンとこなかった(applyじゃなくてresolveの方がわかりやすいかも?)
  • 割と書き手の良心に委ねられてるので好き放題出来そう

まとめ


Flux最高〜↑


Happy Hacking!

13
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
12