[ Javascript ] CTJS Note

Redux設計概念與實戰

Redux
簡報: http://slides.com/dmoon/redux-intro#

Why
  SPA more complecated
  data跟view分開, 類似angular, data只有一份,data changed -> view changed

React:
  data and view bind

Problem:
  props傳遞地獄

Redux
  predictabble state container

 三大原則

  • Single source of truth 單一資料來源
    • 整個應用的state存在一顆object tree中,並放在唯一的container(state)內
  • State is read only
    • 唯一改變state的方法就是觸發action(修改資料唯一方法)


Redux Flow

   Produc -> 畫面需要改變 -> 產生action
                                                                  |
                                          Server <- action -> dispatch -> reducer
                                                                                                           |
                                                                                          return newState -> 資料變更&view重繪

Action

  • js obj
  • type是必要的,表示 要執行的動作
  • 包含事件的描述與更新state所需要的相關資料

Action Creter

  • pure function, return an action
  • dispatch到reducer

Reducer

  • pure function
  • return new state
Store

  • 存放共用state的容器
  • immutable
    • 更新的時候都時回傳新的資料,不去污染舊的資料
Time Travelling Debugger (時間旅行除錯

--------------------------------------------------------------------------------------------------------------

Node.js and BOT

簡報 : http://slides.com/simonsun2001/bots#/

--------------------------------------------------------------------------------------------------------------

Angular 2

  支援Server-side render
  Augury - 開發工具
  支援多平台

  從框架轉向平台

  組成
    所有東西都是元件 Componet
  頁面的組成
     應用程式元件＋樣板＋樣式

  元件的組成

Template 範本
   HTML
Class         類別


  • Angular CLI （套件
    •   ng new demo1
    •   cd demo1
    •   npm install
    •   {{}} -> data binding
    •   [href]="item.href" -> property binding
    •   [(ng-model)] = "property" -> event binding
    •   (click) -> on click



--------------------------------------------------------------------------------------------------------------

React Native Intro

--------------------------------------------------------------------------------------------------------------

Nodejs 自動化

speaker: Spooky

lean production

  • transportation dev -> production
  • waiting -> 規格不清楚...etc
  • defects -> 透過QA,其他人在測試code
持續改善

  • 透明
    • 資料庫版控(Schema版控)
      • Sequelize
    • 環境版控
      • docker
    • 測試案例版控
      • Mocha
    • 建置指令的版控
      • npm, gulp, makefile (unix), package.json
    • 生產流程版控
  • jenkins 2 pipeline


Lightning talk

WebdriverIO
Common.js
Vue.js

Redux thunk
thunkify

thunk = delay
處理非同步的action






################### Hackpad Backup ###################

CTJS2016
歡迎大家參加這次中台灣JS Conf

hi 請問 slack 怎麼加入？是否有邀請自己的網址，謝謝。
開了一個 gitter: https://gitter.im/tcf2e/ctjs2016

  • JokerCatz : yooo 網路很卡甚至不通，但請不要再打 WIFI AP 出來，改用藍芽影響較小，感恩（現場線路沒5G且沒全吃頻寬，應該無解，倒是乖乖聽課啦？）
  •  ↑有帶線就插線吧，可是再插ap又會貴2.4G圈真亂G_Gby亞所
  • RayWay: wifi炸裂,、教網也炸裂，已放棄使用。求5G
  • 看不懂slack怎麼登入.....
  • 所以slack可以用？
  • 求slack邀請
  • 網路狀況已解決 請大家再試一次
  • 求slack邀請, too.



  • Redux 設計概念與實戰 Dmoon
為什麼需要 Redux ? 因為 SPA 越來越複雜

props 傳遞地獄，因為 react 元件中的 state 彼此獨立，無法達到中心化的管理。
中間如果有一層傳錯或者忘了傳，造成畫面不如預期的效果。

what is Redux?
Design Pattern
將 state 集中管理，javascript 狀態容器

single source of truth
將所有 app 需要的狀態存放在一顆 object tree 中,並放在唯一的container(store)內


state is read-only
唯一改變 state 的方法就是發起一個 action

Redux Flow

product -> PM -> Eng

view -> 畫面需要改變 -> 發出 action -> request -> dispatch -> Reducer -> Store -> （資料改變）-> view（重繪）
  • "Redux doesn't have a Dispatcher or support many stores" ->提供已經有看過其他Flux架構的人一點參考，基本上就是要改變view時，比方說按下某個按鈕呼叫action creator(function) -> 產生 action 物件 -> 把 action 物件丟給 reducer -> reducer 會把算完之後新的 state 拿去更新 store -> store 被更新後通知 view更新

  • Action
  • js object
  • type 必要的 key（表示要執行的動作）
  • 包含事件的描述與更新state所需要的相關資料
  • Action Creactor
  • pure function
  • 將 action dispatch 到 reducer
  • 以ajax為例子的話，action creator裡面可能包含了ajax請求本身，然後在最後success callback的地方產生一個action物件，再丟給reducer，記住reducer是一個pure function，所以就直接把action物件傳過去就好

  • Node.js 與 Bot 月牙天衝
簡報支援
gitbug支援

事前準備
★一張信用卡
  1. server - DigitalOcean
  1. Domain - GoDaddy
  1. SSL - GoGetSSL
  1. Line developer
  1. Facebook developer
  • LINE developer要有SSL才能用(所以一定要有domain)，我忘了LINE developer能不能用Let's Encrypt，Let's Encrypt是免費的SSL，滿方便的
  • 感謝幫問QQ，講師和台下互相補充，聽起來LINE和Facebook好像都可以用Let's Encrypt的證書了 LINE在4/18加入let's encrypt

  • 新手上路之 40 分鐘學會 Angular 2 網站開發框架 Will保哥

之前的Slide(加減看)

NG2新特色
  • 偵測變更：比 ng1 快 10 倍
  • 渲染速度：比Ｂ ng1 快 5 倍
  • support pre-compiled templates
  • support server-side render ( node.js, asp.net )
  • 多平台

官方建議使用 typeScript 開發

NG2 組成：元件 component
Page = Component + Template + Style (最外層是App component)
Component = Template + Class + Metadata (p.13)

建立 ng2 開發環境

  • node.js 6.2.2
  • angular CLI
  • ng new yourProject

Component 要記得import，VS code整angular2整超好！

[innerHTML]=""輸出HTML內容

callCheckInApi

元件化的好處在於，好管理好修改。

  • React Native intro (chentsulin)

Release:
  • iOS 2015/01
  • Android 2015/09
  • 2 小時可以做出 Hello word app
  • 不用 build
  • iOS 更新 code 沒煩惱
  • 上述兩點限制於 JS 的部分，如果有用到 java / obj-c 的第三方原生模組，還是需要重新build
  • 爆炸性成長
  • 一年 98 次 release
  • 同一個 app 在 iOS 與 Android 中你的 Redux 只需要寫一次 !! （因為架構一樣啊）
  • StyleSheet: css inline style use flexbox
  • 支援 hot reload，甚至使用 chrome dev Tools 來 debug
  • 歡迎大家一起幫忙翻譯 React 生態相關文件。
  • 肌肉學習法?

  • 為 Node.js 專案打造專屬管家進行開發流程整合及健康檢測 Spooky蹤影
效率 ＝ 產出/投入





The 7 Wastes
1. Defects
2. Overproduction
3. Transportation
4. Waiting
5. Inventory
6. Motion
7. Processing

資料庫版控
Node.js Sequelize Module

環境版控
Docker
測試案例版控 Testing is memory/ Using Mocha


建置指令版控 Bulid>Deploy>Test>Release
NPM、GULP、WEBPACK、MAKEFILE

生產流程版控
Jenkins2、Pipeline

CI/CD
永生
快速迭代驗證
累積開發能量
有效溝通

Checking

可視化

測試覆蓋率

Pull request trigger Jenkins auto testing 

Slack + Github + JenKins to auto publish message to relative developer about testing result

參考資料：


留言

張貼留言

這個網誌中的熱門文章

[MySQL] schema 與資料類型優化

圖片
選擇優化的資料類型 原則: 越小越好 因為會佔用最小的磁碟、記憶體與CPU快取。 越簡單越好 操作整數比操作字串代價低，因為字串排序規則 ex: 儲存ip應該用 unsigned int - 4 bytes, 用 varchar 會用到 15 bytes 儲存時間應該用 mysql 內建的時間類型 DATETIME, TIMESTAMP可以儲存相同資料：時間日期，精確到秒 TIMESTAMP 只用 DATETIME 一半的儲存空間，根據時區自動變化 TIMESTAMP 允許的時間範圍比 DATETIME 小很多 避免 NULL 在 innodb 上有單獨的 bit 儲存 null 值，但在 myisam，但還是盡量避免 整數類型 tinyint - 8 bits smallint - 16 bits mediumint - 24 bits int - 32 bits bigint - 64 bits 如果是有正負數的，會因為 1 bits 會用來記錄正負，故範圍為 -2^(n-1) ~ 2^(n-1) unsigned 的範圍則是 -2^n ~ 2^n MySQL 可以為整數指定寬度，例如 INT(11)，其實沒什麼意義，11只是表示與 MySQL 相關工具(client 端的 cli) 用來顯示的長度，對於儲存與計算來說，INT(1)與INT(20)是一樣的。 實數類型 decimal(M,N) - M: 最大位數, N: 小數點後有幾位 ex: decimal(18, 9) => 9位數字.9位數字，總共使用 9 個 bytes float => 4 bytes double => 8 bytes decimal的計算雖然比較精確，但需要額外，但需要額外的空間與計算開銷，資料量較大時，可以用 bigint 代替 decimal，假設需要精準到萬分之一，則可以將數字*1百萬，將結果存在 bigint 內，可以同時避免福點數計算不精準與 decimal 計算代價太高。 字串類型 VARCHAR row_format=fix，這樣就都會固定長度，沒意義 varchar會需要額外1~2 bytes記錄長度, 假設用 latin1 charset, varchar(10) => 11 bytes, varchar(1000) => 1002...
閱讀完整內容

[翻譯] 介紹現代網路負載平衡與代理伺服器

圖片
原文(Source): https://blog.envoyproxy.io/introduction-to-modern-network-load-balancing-and-proxying-a57f6ff80236 什麼是網路負載平衡 (network load balancing) 與 代理伺服器的代理行為 (proxying)? 維基百科是這樣定義負載平衡的 > 負載平衡藉由工作量分配到多台運算資源, 例如: 主機, 主機叢集, 網路連結, CPU,  硬碟等. > 負載平衡盡量最佳化資源的使用, 最大化每個最大化每個資源的吞吐量(生產能力), 最小化反應時間, 避免單一資源工作量過重 > 使用多個資源來當負載平衡來提升可靠與高可用而不是單一個資源 > 負載平衡總是使用獨立的軟體或硬體, 例如獨立的 multilayer switch, 或是 DNS主機的程式 上面的定義用於各資訊領域的各方面, 不單單只有網路而已. 作業系統使用負載平衡在實體處理器去分配運算任務, 容器編排服務像是K8S使用負載平衡在不同的主機叢集中去分配任務, 而網路負載平衡器則是將網路上進來的任務分配給可用的後端主機們. 剩下的文章主要都是講解關於網路負載平衡. 圖1 圖1展示了從應用層來看網路負載平衡. 許多的用戶端(Client)透過只需要向 load balancer 請求, load balancer就會將這些request, 也就是上述提到的任務分配給可用的後端服務. Load balancer位於Client 與後端之間執行幾個重要的任務: 服務發現 (Service discovery) 後端的服務在系統的哪裡, 他們的IP(位置)是什麼? (也就是load balancer該如何與後端主機溝通) 服務的狀態檢查 (Health checking) 現在的服務是否是可接受請求的 負載平衡 (Load Balancing) 該用什麼樣的演算法去平均將request分配給可用的服務 在分散式系統使用負載平衡主要有幾個好處: 主機抽象 (Naming abstraction): 每個client 不需要知道每個後端服務在哪, 只需要利用預先定義好的機制向負載平衡器...
閱讀完整內容