作者: mlwmlw

react flux 之謎

04/042015

B1HqOE0IgAAlPe4flux 由幾項元件組成

  • Action：動作，由使用者觸發 UI 所發起，為了重複利用會再包成 actionCreator 轉呼叫 dispatcher
  • Dispatcher：調度者，註冊 action 的事件並對 store 做操作
  • Store：儲存資料，只有 read only 的 api，要修改一律透過 dispatcher 的事件。
  • View(React)：透過自己的狀態或參數（或者從 Store 得來）繪製介面。

1. 為什麼要有 Dispatcher，不能爽爽的 UI 一觸發事件就去改 Store 嗎，幹麼那麼拐彎抹角

「所有電腦科學領域的問題都可以用抽象化來解決」Dispatcher 抽象化了什麼？

只有 dispatcher 才能透過 event 來修改 store 的資料，Single Source Of Truth，只要資料變了，去 dispatcher 找就知道為甚麼惹。

原本 web 的 SPA 都是綁了一堆事件在 dom 上，到處都可以 bind 到處都可以改，透過 flux 資料流或者說依賴 dispatcher，就不會找不到為什麼資料變動了。

依然是 event 的架構，但是 event 的接受者從一個黑洞，轉成一個中心點了。

2. 又包了 flux 的 action 跟 store， UI 到底是怎麼重用啦！

Container Pattern，由兩個元件組成一個是 Container 在外層是老爸，一個是 Component 在內層當兒子，Container 把狀態都存在 states，Component 的狀態都在 props，由 Container 負責接收 Store 跟觸發 action，Component 作為原始的 React View。

Component 依然是定義乾淨可重用的 view，其他事情交給老爸處理。

3. 一堆 flux 專案，到底要挑哪一個拉？

不知欸.. https://github.com/voronianski/flux-comparison 來這裡挑挑看吧

4. reflux  都沒有 dispatcher 耶？

reflux http://spoike.ghost.io/deconstructing-reactjss-flux/

所以有些專案都把 dispatcher 拿掉了，沒關係嗎。。。

因為 facebook 的架構很大很複雜，所以需要很大的彈性來處理，但是大家都很懶，覺得不需要這層抽象來處理，所以就讓 dispatcher 消失了，透過 action 跟 store 直接的溝通，簡化了繁雜的流程跟程式，但是也讓這層通訊的黑洞又出現了，要怎麼拿捏呢？

所以天曉得中間發生了什麼事情。

alt.js https://github.com/goatslacker/alt

而 altjs 就是取一半，你可以不要用到 dispatcher 讓他幫你決定預設的行為，或者自己叫出 dispatcher 來決定要怎麼做，只是都這樣了…還有差嗎@Q@?

5. ajax 要寫在哪阿阿阿阿

大都寫在 action creator，資料抓完再發回 store，維持 store 的單純性，反正 actionCreator 本來就沒什麼職責，處理 ajax 蠻適合的。

links

mongodb group by

03/212015

SQL-to-MongoDB2
目前在日常生活偶爾會使用 mongodb 做一些開發或存一些 log，除了基本的 json query 以外，偶爾需要用到如 mysql 的 group 功能，剛開始覺得好像沒有辦法直接用 query 做很困擾，實際做過一次複雜的 query 以後才發現 mongodb 的彈性實在是強大不少，除了語法不相容要重學以外。

舉一個實際的例子，有一個表存了 web 的 access log，然後想找到哪個頁面(page)最常被存取，按照頁面的存取次序排序，每一個人在一天存取同個頁面多次都只能算一次（不重複的工作階段 in GA），而且要排除特定 IP 不被計算（自己）。

在 SQL 裡面直覺寫出來大概會是這樣：

SELECT page, count(*) count FROM access_log 
WHERE IP != '192.168.1.1' 
GROUP BY page
ORDER BY count DESC
limit 10

雖然簡單，但是這個寫法沒有過濾掉，不重複計算同個人的重複瀏覽，所以直覺也是用子查詢才能解決這個問題。
Continue reading…

hackathon.tw 心得

02/062015

IMG_1224
上禮拜(2015.01.31) 第一次去參加了一場由 hackathon.tw 所舉辦的黑客松，所謂的黑客松像是工程師的馬拉松，從發想、實作到介紹連續三十小時不間斷的寫程式，透過短暫密集的與一大群人（一兩百人）一起在同一個環境裡，並與自己組員高度密集的討論協作。

工作了約一年的時間，從學生變成了上班族，寫程式的心態也不斷的被挑戰與改變，在一個半新創（快過新創期了）的公司，跟在學校的做事方法有點類似，但是心態、目的與方法都有很大的落差，參加這場活動讓我重新體驗並反思了寫程式的目的與方法。
算是一個蠻有趣的經驗吧…？
Continue reading…

SauceLabs selenium testing with selenium-webdriver

10/282014

selenium 是用來做瀏覽器測試的工具，讓你可以安排一個流程在真實瀏覽器上運行來測試結果是否如預期，已經被大量用在 Web 的測試上，這已經許多年，也有許多教學了。

而在 selenium 的測試上，最方便的是能跨瀏覽器測試，但是最麻煩的是你要安排有很多瀏覽器的機器（或虛擬機器），並把環境部屬好，供 selenuim 運行。

而 saucelab 是一個雲端的測試平台，就是用來解決這個問題，他提供了隨時供你取用的運算資源，讓你隨時可以模擬各種平台不同版本的作業系統與瀏覽器，他是一個付費的服務，但是有免費試用的額度可以玩玩看。

這篇文章紀錄從頭到尾透過 nodejs 在本機建立建立一個 selenuim 的測試環境，最後在透過 saucelab 來測試其他作業系統與瀏覽器。
Continue reading…