Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Bacon.jsではじめる関数型リアアクティブプログラミング入門 with ES6

SCRIPTY #4 on 2015-12-15で発表したスライドです。
Bacon.jsを使ったFRPのサンプルと期待する効果を解説しています。

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

Bacon.jsではじめる関数型リアアクティブプログラミング入門 with ES6

  1. 1. SCRIPTY #4 2015-12-15 Bacon.jsではじめる
 関数型リアクティブ プログラミング入門 With ES6 1 株式会社gumi 原口剛
  2. 2. 自己紹介 原口 剛 Sr. Front-End Engineer Unity3D, C#, JavaScript 2
  3. 3. Agenda ES6とFRPの紹介 Bacon.js FRPに期待すること 3
  4. 4. 4
  5. 5. ECMAScript6 クラス、モジュール、イテレータ、for/ofループ、 Pythonスタイルのジェネレータ、
 アロー関数、2進数および8進数の整数リテラル、 Map、Set、WeekMap、WeekSet、プロキシ、テン プレート文字列、let、const、型付き配列、デ フォルト引数、Symbol、Promise、分割代入、可変 長引数 5
  6. 6. y=f(x) 6
  7. 7. Functional Reactive Programing 7
  8. 8. FRP 関数型プログラミングと
 リアクティブプログラミングの
 両パラダイムの特徴を組み合わせ 8
  9. 9. Functional Progra!"ing 9
  10. 10. 原則 変数は変更されない 関数は処理順や状態に関係なく、
 同じ引数に対して戻り値を返す 処理順が非同期 10
  11. 11. Reactive Programing データの流れを通じて変更を自動的に
 伝搬することによって成り立つ実行モデル var a = 1;
 var b = a + 2;
 a = 3;
 console.log(b); !# 結果は、5 11
  12. 12. FRPは言語に依存 しないパラダイム 12
  13. 13. Bacon.js
 library for FRP 13
  14. 14. 基本的な実装方針 常に入力→変換→出力(→消費)を
 行うストリームを定義していく 14
  15. 15. Event Stream 15
  16. 16. 時間の経過過程で発生した イベントの無限長コレクション(配列) 16 ——|Click|—|Click|——|Click|---|Click|##$ ———————————————-——時間—————————————————>
  17. 17. demo 17
  18. 18. 18
  19. 19. and more! "assign", "awaiting", "buffer", "bufferWithCount", "bufferWithTime", "bufferWithTimeOrCount", "combine", "concat", "constructor", "debounce", "debounceI!"ediate", "decode", "delay", "dependsOn", "deps", "desc", "diff", "doAction", "endOnError", "errors", "filter", "flatMap", "flatMapFirst", "flatMapLatest", "fold", "hasSubscribers", "inspect", "internalDeps", "log", "map", "mapEnd", "mapError", "merge", "name", "not", "onEnd", "onError", "onValue", "onValues", "reduce", "sampledBy", "scan", "skip", "skipDuplicates", "skipErrors", "skipUntil", "skipWhile", "sliding Window", "startWith", "subscribe", "subscribeInternal", "take", "takeUntil", "takeWhile", "throttle", "toEventStream", "toProperty", "toString", "withHandler", "withStateMachine", “zip” ….61個 19
  20. 20. 便利な関数が
 っている 20
  21. 21. あらゆるものを Stream化にすると 21
  22. 22. 綺麗なコード ミニマムな関数の集まり 1関数が担う責務を小さくする 責務が小さいと分岐が少なくなる 直列的なコードになり読みやすい 22
  23. 23. 綺麗なコードは速い 無駄な処理を排除して速い! バグの発見が速い! 機能改修による影響の把握が速い! 23
  24. 24. まとめ 非同期処理やイベントを正規化して Streamオブジェクトの流れを考える 限定されたスコープで問題解決 アロー関数やconst定義を用いること によってコードの見通しが良くなる 24
  25. 25. https://gist.github.com/masakielastic/5897831 25
  26. 26. ご清聴ありがとう ございました 26

×