Bacon.js 0.7: カウンター
ã—ã°ã‚‰ã Bacon.js ã‹ã‚‰é›¢ã‚Œã¦ã„ãŸã®ã§ã€å¾©ç¿’ã™ã‚‹ã“ã¨ã«ã—ãŸã€‚ <div> <button id="up"> Up </button> <button id="down"> Down </button> <span id="counter"> 0 </span> </div> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bacon.js/0.7.73/Bacon.min.js"></script> <script> var up = $('#up').asEventStream('click'); var down = $('#down').asEventStream('click'); v
リアクティブプãƒã‚°ãƒ©ãƒŸãƒ³ã‚°ã®æŠ€è¡“を用ã„ã¦ãƒžã‚¦ã‚¹ã‚¹ãƒˆãƒ¼ã‚«ãƒ¼ã‚’実装ã™ã‚‹ - ã¯ã“ã¹ã«ã£ã ♨
å¤ã良ãインターãƒãƒƒãƒˆã‚¢ãƒ—リケーションã§ã‚るマウスストーカー*1をリアクティブプãƒã‚°ãƒ©ãƒŸãƒ³ã‚°ã®æŠ€è¡“を活用ã—ã¦å®Ÿè£…ã—ã¦ã¿ã‚‹ã¨ã„ã†å–り組ã¿ã‚’ã—ã¾ã—ãŸã®ã§ã”紹介ã—ã¾ã™ã€‚リアクティブプãƒã‚°ãƒ©ãƒŸãƒ³ã‚°ã¨ã„ã†ã¨ä¸»èªžãŒå¤§ãã‚ã§ã™ãŒã€ã“ã“ã§ã¯bacon.jsを使ã£ã¦ã‚‹ãらã„ã®æ„味ã§ã™ã€‚ ã§ããŸã‚‚ã® ã¾ãšã¯å®Œæˆã—ãŸãƒžã‚¦ã‚¹ã‚¹ãƒˆãƒ¼ã‚«ãƒ¼ã‚’紹介ã—ã¾ã™ã€‚ãƒã‚§ãƒ¼ãƒ³ã®ã‚ˆã†ã«é€£ãªã£ãŸæ˜ŸãŒãƒžã‚¦ã‚¹ã‚«ãƒ¼ã‚½ãƒ«ã®è»Œè·¡ã‚’辿ã£ã¦ã¤ã„ã¦ãã¾ã™ã€‚工夫ã—ã¦ã†ã”ã‹ã™ã¨ãªã‹ãªã‹ç¶ºéº—ã§ã™ã€‚下ã®ãƒœã‚¿ãƒ³ã‚’押ã™ã¨å®Ÿéš›ã«ã“ã®ç”»é¢ã§ãƒžã‚¦ã‚¹ã‚¹ãƒˆãƒ¼ã‚«ãƒ¼ã‚’有効ã«ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™(requestAnimationFrameã«å¯¾å¿œã—ãŸPCブラウザã®ã¿)。ã„ã‚ã„ã‚å‹•ã‹ã—ã¦éŠã‚“ã§ã¿ã¦ãã ã•ã„。 ã“ã®ãƒšãƒ¼ã‚¸ã§ãƒžã‚¦ã‚¹ã‚¹ãƒˆãƒ¼ã‚«ãƒ¼ã‚’有効ã«ã™ã‚‹ 実装 ã“ã®ãƒžã‚¦ã‚¹ã‚¹ãƒˆãƒ¼ã‚«ãƒ¼ãŒã©ã®ã‚ˆã†ã«å®Ÿè£…ã•ã‚Œã¦ã„ã‚‹ã‹ç´¹ä»‹ã—ã¾ã™ã€‚ソースコードã¯GitHubã«å…¬é–‹ã—ã¦ã„ã¾ã™ã®ã§ã€é©å®œã”å‚ç…§ãã ã•ã„。手元
Start FRP
13. JavaScript ã§ã®å®Ÿè£…例 - イベント駆動 function onChange() { var a = Number($("#val1").val()); var b = Number($("#val2").val()); var c = a + b; $("#val3").text(c); } $("#val1").change(onChange); $("#val2").change(onChange);
Bacon.js ã¨è‡ªä½œHTMLスライドライブラリã«ã¤ã„ã¦ç´¹ä»‹ã—ãŸ
久々ã«LTçš„ãªã“ã¨ã‚’ã—㟠プライベートãªå‹‰å¼·ä¼šã¿ãŸã„ãªã‚„ã¤ã§ HTML/Markdown スライドライブラリ㮠ahomu/Talkie を宣ä¼ã—ã¤ã¤ã€ãã“ã§ä½¿ã£ã¦ã¿ãŸ baconjs/bacon.js ã«ã¤ã„ã¦ç°¡å˜ãªçŸ¥è¦‹ã‚’共有ã—ãŸã€‚ Talkie.js ã«ã¤ã„ã¦ã¯ã€ã¾ãŸæ©Ÿä¼šã‚’改ã‚ã¦ï¼ˆã‚‚ã†ã¡ã‚‡ã£ã¨æ•´ãˆã¦ã‹ã‚‰ï¼‰ã¡ã‚ƒã‚“ã¨è©³ã—ã紹介ã—よã†ã‹ã¨æ€ã†ã€‚ 抜粋 Bacon.js ã¯æ˜¨ä»Šã® JavaScript ライブラリã®æ–‡è„ˆã«åˆã‚ã›ã¦è¨€ãˆã°ã€ŒObserver 㨠Promise ã¨è¶³ã—ã¦ã‚ã‚ã›ãŸã‚„ã¤ã€ã¨ã„ã†æ„Ÿã˜ã€‚スーパーãªã‚„ã¤ã€ã¨è¡¨ç¾ã—ãŸã„æ°—ã‚‚ã™ã‚‹ãŒã€ã“ã‚Œã¾ãŸæ˜¨ä»Šã®æ–‡è„ˆã«ãŠã„ã¦ã¯å¤ãã‹ã‚‰å˜åœ¨ã—ã¦ã„ã‚‹ã‚ã‚Šã«æµè¡Œã£ã¦ã¯ã„ãªã„ã—ã€ä½•ã‚‰ã‹ã®éšœå£ãŒæ¨ªãŸã‚ã£ã¦ã‚‹ã‚ˆã†ã«æ€ã†ã€‚ ã¨ã‚‚ã‹ãã€ãƒ¦ãƒ‹ãƒ¼ã‚¯ãªè€ƒãˆæ–¹ (FRP) ã«åŸºã¥ã„ãŸãƒ©ã‚¤ãƒ–ラリã§ã¯ã‚ã‚‹ã—ã€è©¦ã—ã¦ã¿ã‚‹åˆ†ã«ã¯ãŠã™ã™ã‚ã§ãる。 ã“れをç†è§£ã™ã‚Œã° OK ãªè¦ç´
(* programming -> girl -> ? *) | æ¥å‹™ã‚¢ãƒ—リ実装ã«FRP使ã£ã¦ã¿ãŸ
Bacon.jsã¨ã„ã†ã€Functional Reactive Programming ã®Frameworkを使ã£ãŸJava Scriptライブラリを使ã£ã¦æ¥å‹™ã‚¢ãƒ—リを書ã„ã¦ã¿ã¾ã—ãŸã€‚関数型ã®è€ƒãˆæ–¹ã‚’ãµã‚“ã ã‚“ã«ä½¿ã„ã¤ã¤ã‚‚ã€GUIãªã©ã®ãƒ¦ãƒ¼ã‚¶å…¥åŠ›ã‚’ä¼´ã†ã‚ˆã†ãªå‡¦ç†ã«æŸ”軟ã«å¯¾å¿œã—ã¦ã„ã‚‹ã€ãƒžã‚¤ãƒŠãƒ¼ãªãŒã‚‰å„ªã‚ŒãŸãƒ©ã‚¤ãƒ–ラリã§ã™ã€‚ 実際ã«Bacon.jsを使ã£ã¦å®Ÿè£…ã—ã¦ã¿ã¦ã€ä½•ãŒè‰¯ã‹ã£ãŸã‹ãªã£ã¦ã¨ã“ã‚を〠ã¡ã‚‡ã£ã¨ç´ 人ãªã‚Šã«è‰²ã€…ã¨è€ƒãˆã¦ã¿ã¾ã—ãŸã€‚ 1. 出ã¦ãるワードãŒç›´æ„Ÿçš„ã§ã‚ã‚‹Baconã§ã¯ã€EventStream, Propertyãªã©ã¨ã„ã£ãŸç‹¬è‡ªã®ãƒ¯ãƒ¼ãƒ‰ãŒã„ãã¤ã‹å‡ºã¦ãã¾ã™ã€‚　ライブラリをèªã‚“ã§è‰²ã€…ã¨ä½¿ã†ã®ã¯å¤§å¤‰ã ãªã‚ã¨å€‹äººçš„ã«ã¯ã‚ˆãæ€ã„ã¾ã™ãŒã€Baconã«é–¢ã—ã¦ã¯ã€æ–°ã—ã„概念をå–り入れã¦ã„ã‚‹ã®ã«ã‚‚é–¢ã‚らãšã€éžå¸¸ã«ç›´æ„Ÿçš„且ã¤ã‚¤ãƒ¡ãƒ¼ã‚¸ãŒã¤ãã‚„ã™ã„ワードをé¸æŠžã—ã¦ã„ã‚‹ã®ã§ã€é ã®ä¸ã«æ§‹é€ ã‚’æãã‚„ã™ã„仕
モジュールã®å…¬é–‹ I/F ã« Bacon.Bus 便利ã£ã½ã„
続・Bacon.js ã‚る処ç†ã‚’連çµã—㟠EventStream ã«å¤–ã‹ã‚‰å€¤ã‚’æµã—込んã ã‚Šã€å‹•ä½œã®èµ·ç‚¹ã«ãªã‚‹ãƒ¦ãƒ¼ã‚¶ãƒ¼ã‚¢ã‚¯ã‚·ãƒ§ãƒ³ï¼ˆevent）をã¤ãªãŽãŸã„ã¨ãã®è©±ã€‚全体ã‹ã‚‰ã®æŠœç²‹ã‚³ãƒ¼ãƒ‰ã§èª¬æ˜Žã—ã¦ã‚‹ã®ã§ã€é›‘ãªæ„Ÿã˜ãªã®ã¯ã”容赦願ã„ãŸã„。 Before スライドã®ã‚³ãƒ³ãƒˆãƒãƒ¼ãƒ«ã‚’ã—ã¦ãれるモジュールã§ã€é©å½“㪠EventStream ã‚„ Property を公開ã—ã¦ã„ãŸã®ã§ã™ãŒè‚心ã®ã‚¹ãƒ©ã‚¤ãƒ‰ã‚’ next, prev ã•ã›ã‚‹ãƒ¦ãƒ¼ã‚¶ãƒ¼æ“作を外ã«å‡ºã›ã¦ã„ãªã‹ã£ãŸã€‚ // スライドã®ãƒšãƒ¼ã‚¸é€ã‚Šã¨ã‹ã‚’ã—ã¦ãれる // 公開ã—ã¦ã„ã‚‹ EventStream ã¯ç¾åœ¨ã®ãƒšãƒ¼ã‚¸ç•ªå·è¡¨ç¤ºã¨ã‹ã‚’æ›´æ–°ã™ã‚‹ãŸã‚ã®ã‚‚ã® export default function(options) { let right = control.key('right'); let left = control.key('left'); righ
æ—¢å˜ã‚³ãƒ¼ãƒ‰ã¸ã® Bacon.js 導入サンプル
é©å½“ãªã‚µãƒ³ãƒ—ルをBacon.jsã«ã—ã¦ã¿ãŸ ã“ã‚“ãªæ„Ÿã˜ã®ã€ãƒœã‚¿ãƒ³ã‚’押ã—ãŸã‚‰ã‚¹ãƒ©ã‚¤ãƒ‰ãŒåˆ‡ã‚Šæ›¿ã‚ã‚‹ã ã‘ã®ã‚µãƒ³ãƒ—ルを用æ„ã—ã¦ã€Bacon.js ã«ç„¡ç†ã®ãªã„範囲ã§ã®æ›¸ãæ›ãˆã‚’試ã¿ã¦ã¿ãŸã€‚ã”時世柄ã€jQueryã¯æœªä½¿ç”¨ã€‚ See the Pen raGLMd by Ayumu Sato (@ahomu) on CodePen. 生ã®JavaScriptã‹ã‚‰ã‚¹ã‚¿ãƒ¼ãƒˆ ã©ã†ã› Bacon.js ã§ç½®ãæ›ãˆã‚‹ã“ã¨ã«ãªã‚‹ã®ã§ã€ã‚µãƒ³ãƒ—ル時点ã§ã‚‚æ§‹é€ åŒ–ã—ãªã„ã§æ‰‹ç¶šãをダラダラã¨æ›¸ã„ã¦ãŠã„ãŸã€‚ document.addEventListener('DOMContentLoaded', function() { getById('prev').addEventListener('click', function() { moveSlide(-1); }); getById('next').addEventList
Flux inspired reactive data flow using React and Bacon.js - Reaktor
A few years ago I got introduced to reactive programming and Bacon.js, a FRP (functional reactive programming) library for Javascript. I got fond of it very fast, as it allowed you to create highly reactive UI’s with ease. While it works great in propagating changes to your views, it was still rather cumbersome to attach all the data flows to individual DOM nodes and properties. React solved that
1
ランã‚ング
ランã‚ング
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
fluxstream
Philip Roberts: Enemy of the state: An introduction to Functional Reactive Programming and Bacon.js
Bacon.js - Bus, Functional Reactive Programming | Jari Timonen
bacon.js ã® README ã®ç¿»è¨³
{{#tags}}- {{label}}
{{/tags}}