【從學員練習影片觀察到一個關於 TDD 的有趣現象】
極速開發的課後練習作業，雖說重點是放在極速開發要學習的技巧與刻意練習的模型，但開發的方式、順序也是刻意安排成類似 TDD 的進行方式，來讓生產力最大化（TDD 本來就是幫助開發的，不是幫助測試的）
我從2位第一次上我課的學員（當然就是 #極速開發，代表他們沒上過#單元測試 跟 #TDD與持續重構），雖然他們是照著示範影片、上課教學用 TDD 在寫整個 tennis 的過程，但從他們執行測試的時間點就可以發現：
「他是用測試來驗證 production code 的正確性」，即使他先寫了測試，也不先執行，沒有看到紅燈，每次都等到 production code 寫完了，應該要綠燈時，才執行測試。
而其他上過 TDD 課的同學 ，或是上過單元測試的同學，知道測試是用來描述情境，如果現在「加入的這個情境是新的需求或需求異動，代表目前 production code 還不支援這個情境，執行測試跑出的紅燈，就是等等 production code 要完成的 #目標」
test-frist 從來都只是 TDD 其中一個小小的衍生產物，而不是全貌。TDD, 測試驅動開發 從來都是一種開發方法，而不是測試方法。
總有些人老愛把 TDD 拿來跟測試相提並論，就總是喜歡把 test-first 當作靶子打，覺得違反人性跟直覺，覺得先寫測試在很多情況下是浪費時間或是不 work，可能拿來跟一堆測試的方法論相提並論，或總是只拿回歸測試的效益來當作 TDD 的整體。抑或是陷入 isolation unit test 與 integration test (其實就是非 isolation 等級、有實際依賴的自動測試）之爭。
```
註：TDD 事實上是可以不是單元測試等級的。
```
要比較正確看待 TDD 的角度，首先要知道它是幫助開發的、它是一種開發方式（當然不是唯一一種，甚至也不會是最好的一種，因為根本沒有最好，只有剛好）
接著要了解 TDD 可能用 IPO 模型還比較貼切，input-process-output，在你開發任何功能之前，你總要先想過這件事。而先想這件事，才是 TDD 的最基本精神。
接著是怎麼把你想好的東西，變成可執行的 spec，我們只是用測試程式來「描述」你腦袋中的「IPO模型」，把 process 的過程當作一個黑箱子。
而這個 IPO 模型在結合成「使用情境」，就會帶來「高易用性 API 的好處」，只有在一開始就先想好怎麼給別人用，最後才會好用。所謂的一開始想好，指的不是預先設計一堆 class，而是 input/output 想清楚期待（一般會結合實例化需求，搭配 Given/When/Then 的 gherkin style 來把前置條件、資料、前提想好，當發生什麼事，應該是怎樣的結果），然後描述它。在紅燈定義清楚目標，綠燈完成 input/output 關係且沒弄壞前面的所有情境後，來針對 process 進行重構（事實上 Kent Beck 的 TDD by Example 更多是用 refactor 來 #完成 process。
```
註：所謂的 output 不一定只有回傳值，包含外部依賴狀態、資料的改變，甚至顆粒度小一點，針對物件導向設計的話，物件內部狀態的改變也算，只是物件內部狀態改變，驗證點要嘛是拿得到內部狀態，要嘛就是要驗證物件哪個行為會因這個內部狀態而有所不同。
```
## 戰 TDD 之前該先做好的功課
要戰 TDD，是不是至少要把 Kent Beck 的 TDD by Example 看完？
要戰 TDD，請不要拿它跟測試方法論來比，那只是一下就被人看破手腳。因為它是個開發方法論。
要戰 TDD，請不要把它的好處只限縮在跟回歸測試、自動測試的比較，因為那只是它的衍生好處，當你試過在白海報紙上 TDD 就懂，TDD 是在釐清你的思緒的同時，又可以以終為始，確保你在 production code 的每一個動作都是為了滿足某個期待的情境。
要戰 TDD，請不要去把 單元測試、整合測試捲進來，那是測試的顆粒度，那是測試的分類，TDD 從來都不是只能限於單元測試。
要戰 TDD，請不要在那邊戰他是 bottom-up ，是直接從程式/class 的角度出發，事實上 TDD 既不是 bottom-up, 也不是 top-down, （書裡面就有講這件事咩），實務上的 TDD 結合倫敦派(GOOS)跟芝加哥派(Classic TDD)，會更像 Outside-In 的進行方式，先定義好驗收情境，接著從最外部（也就是使用者看得到的部份）一路把依賴往另一邊的系統邊界推，直到推到系統以外的依賴資源（persistence 或 external API/service）
```
註： ATDD by Example 中 ATDD by Example, Kent Beck 寫的序最後的一段話。
Kent Beck:
「就像我曾說過的，TDD的一個缺點是，它可能會退化為一種用來滿足開發人員需求的編程技能。某些開發人員從更廣泛的角度來看待TDD，輕易在他們測試的不同抽象級別間跳躍。然而在ATDD中不存在歧義，這是一種加強與非編程人員溝通的技術。我們之間良好的協作關係，以及作為這種關係基礎的溝通，能夠使軟件開發更有效率。採用ATDD是向著溝通更清晰這個目標邁進的重要一步，而此書是一本全面又平易近人的入門讀物。」
```
要戰 TDD，請不要只關注在 test-frist，因為他只是用 test 來幫助你 think-first，不要邊寫邊想。然後不要過份依賴或相信你腦袋的能力，把你想好的東西具體化出來，最好可以被直接執行，最好除了你以外每個人執行出來的結果都會一樣（不管是對的，還是錯的）
要戰 TDD， 請不要把論點放在見樹不見林，如果你有看 TDD by Example 的 Part 1, Part 2 那兩個加起來共 24 個章節，就知道一開始就得把當下想到的全貌紀錄在一個「紙本」的 backlog (所謂的紙本，只是要講這並不依賴於任何工具）
而這個需求輪廓的全貌，會隨著你逐漸完成一部分一部分的情境，設計逐漸浮現後，而隨時跟著增減調整。
但不代表 TDD 就是先想到一個測試案例，就直接先幹下去了，那根本是亂搞。
以上這些，都還不是在列 TDD 的好處，而是針對那些從來沒搞懂 TDD 但又愛戰 TDD 的人一點提醒，你戰的很可能是「你誤解的 TDD」。
TDD 還有許多實務上的用途，列上我在譯者序中的一小段：
>> 測試驅動開發（Test-Driven Development, TDD）！一種以測試為開發輔助、以測試來描述需求情境、以測試來當作目標、以測試來表達期望、以測試來驗證疑問、以測試來實驗學習、以測試來溝通協作、以測試來協助設計高易用性 API 的「開發方法」。
譯者序有開放給大家看，請見：https://tdd.best/book/tdd-by-example/
拜託，要戰之前去看一下祖師爺 Kent Beck 對 TDD 的原始見解：https://www.tenlong.com.tw/products/9789864345618?list_name=srh
如果你想正確的使用 TDD 來幫助你在實務上產生許多的價值，帶來許多的好處，尤其是需求釐清、持續重構、小步快跑的部份，最好理解的培訓課就在這：https://tdd.best/courses/classic-tdd-by-example-video-training/
最後我想講一段話：
TDD 從來都不該被導入到團隊中，但它是一種很好的自我鍛鍊與學習的方式，也是一種能用很低的成本來帶來很多好處的開發方法（見下方註腳），然而它也不是適用所有的情況，但它可以讓『完美』變成一個動詞，而非不變的形容詞。
```
註：
Kent Beck 在 DHH 靠腰：《TDD is Dead》 之後寫的一篇反串文：《RIP TDD》
https://www.facebook.com/notes/1063422864115918/
我幾年前的簡易翻譯，通常也是 TDD 可以幫助你解決的問題，如下：
- Over-engineering （過度設計）
- API feedback （改善API的設計與可用性）
- Logic errors （想的跟寫的不一樣，寫的跟需求不一樣）
- Documentation （寫跟維護文件是痛苦的）
- Feeling overwhelmed （找不到切入點）
- Separate interface from implementation thinking （抽象設計）
- Agreement （確保已修正問題的證據）
- Anxiety （改東壞西的擔心受怕）
```
很久沒對 TDD 發表這種長篇大論了，因為不理解、不想理解、不同角度理解的人居多，能真的到各自的塔上用不同角度來看原義，以及實務上用它來幫助解決的問題有哪些的人，真的太少。
大部分人只想針對這個詞彙來攻訐以博得流量跟吸引目光，而不是想著「我可以用它來幫助我什麼」
問題跟需求是中性的，解決問題跟滿足需求的手段與方式有千萬種，不會只有一種，也不會有所謂的對錯，多點角度去了解不同的方法、方式，然後融會貫通，發揮綜效，在實務上用最少的成本與風險來產生最大的價值，這才是真正的目標。
導入敏捷不該是目標，導入 TDD 也不該是目標，目標永遠都是在實務上產生價值、解決問題、滿足需求。
api串接練習 在 [心得] 30 人免費前端教學心得- 看板Soft_Job - 批踢踢實業坊 的推薦與評價
大家好
三個月前，我在這個版上 po 了這樣一篇文：[分享] 免費程式教學(前端)
https://www.ptt.cc/bbs/Soft_Job/M.1488469002.A.E34.html
基本上就是找一些人，然後我會出作業、改作業跟規劃課程，一切都是免費的
如今三個月過去了，課程剛結束兩週左右，我有整理了一篇心得
裡面有我規劃課程的理念跟課程結束後學生給我的回饋
但因為滿長的，而且有滿多連結跟一張圖片，貼到這邊不太適合閱讀
所以我下面只節錄部分心得，有興趣的話可以看原文，先跟大家說聲不好意思
原文：https://huli.logdown.com/posts/1913623-frontend-tutorial-experiment
以下節錄部分心得並修改自原文：
==================
這堂課我一開始擬定的大綱長這樣：
1. 練習實作 Twitch 遊戲畫面排版（基本 html, css）
2. 讓畫面變得更動態（css transition）
3. 改用 Less, Sass 或是 Stylus（知css 預處理器的使用）
4. 串接 Twitch API （看懂文件、API 串接、Ajax、CORS）
5. 加上 infinite scroll 與 placeholder
6. 改用 vanilla js 實作
7. 加上多國語言（i18n, library）
8. 把 CSS, JS 全部都 inline 到 html（gulp、為什麼需要 gulp）
9. 我們為什麼需要用 Webpack？
10. 改用 React.js
會擬出這個課程大綱，主要有兩個因素
第一個是因為裡面教的那些東西，剛好都跟我近期的工作內容有相關
因此教起來我會比較得心應手，畢竟自己就在碰這些東西
第二個原因是因為我在工作上接觸到這些東西的時候，我原本也是什麼都不懂
不知道 webpack 跟 gulp 在幹嘛、不知道 infinite scroll 到底怎麼做
可是當我花一段時間理解之後，我知道為什麼當初的我覺得這麼難了
因為我不知道是用在哪裡，我不知道是幹嘛的，或是說，我不知道「我為什麼要用」
我在網路上找了一大堆教學，每一篇都在跟我說「怎麼用」
卻很少有資料能告訴我：「為什麼要用」、「如果不用會怎樣」
在幾次教學經驗的累積過後，我找到一個我認為比較有效的教學方式
原則就是：「要先痛到，才會得到」
這是什麼意思呢？
我有一陣子很喜歡看大公司的一些架構文章
裡面寫說他們怎麼把機器架構調整成適合規模化
講說他們碰到了什麼問題，用什麼解法解決了超大資料量所帶來的 Bug
我一開始覺得很有收穫：「哇，這些感覺好厲害啊，學到很多」
可是過一陣子之後，才發現自己什麼都沒學到
那些東西過一週之後我就全部忘掉了，好像文章根本沒看過一樣。
後來我忘記在哪邊看到一篇文章，裡面有一段傳達的意思我記得特別深刻
（如果有人也看過同樣一篇，麻煩在底下留言，小弟感激不盡）
文章裡面寫說，那些都是大公司的高手們痛苦過、經歷過所淬煉出來的「精華」
你怎麼可能期望你看了十分鐘，就能夠擁有他們十年的功力？
「痛過」，是一件很重要的事。
與其直接教他們寫 SCSS，不如先讓他們寫 CSS
然後一直叫他們改顏色，叫他們改東改西
這時候他們就只能一直用文字編輯器尋找->取代，不斷重複這個循環
等到你確認他們真的痛了，再教他們 SCSS。
這時他們會有種「重獲新生」的感覺
「靠！原來還有這種東西喔，這樣就不用改這麼辛苦了，用變數就可以了」
這樣子的學習方式我認為會比起直接教有效許多。
在教他們一樣東西之前，我一定會想辦法讓他們知道說：「為什麼我需要這個」
我認為當這個問題搞懂也同意之後，才會更有動力去學習
也才能知道自己到底在學什麼，學了之後可以幹嘛。
還有另外一件事，那就是比起每一個不同的小作業
比較好的做法是「一個逐漸加強的作業」
這樣在做作業的時候，學生可以不斷地看見自己的進步，不斷地看見專案的成長
而且最後會做成一個完整的，而不是一堆零碎的、破碎的小專案
因此，我就以這幾個概念規劃出了這些課程大綱，後來有稍作調整：
1. 基本 HTML/CSS 練習：以 Twitch 為例
2. 讓畫面變得更動態：神奇的 CSS transition
3. 寫 CSS 必備神器：CSS 預處理器
4. 從假資料到真資料：Ajax 與 API 串接
5. 讓網頁變得更完整：加上 placeholder 與 infinite scroll
6. 返璞歸真：vanilla js
7. 走向國際：i18n
8. 當我們包在一起：Webpack
9. 節省 Request 的極致：一為全，全為一
10. 改掉你的壞習慣：ESLint 與 standard
第十週原本是 React.js，我後來拿掉了，原因有兩個
第一個是我認為 React 放在這邊不適合，還沒到教的時機點
還不夠「痛」，而且跟前面的也沒有什麼關聯
第二個是我改作業發現很多人的 coding style 不好
所以第十週放這個，前面九週作業寫越醜的要花越多時間改，讓他們「痛」一下
我必須先承認，上面這個規劃並沒有很好地使用「痛到才會得到」這個教學原則
這個是我還可以再做得更好的部分，進步空間還很大很大
而由一個小作業逐漸加強我覺得我算是滿好的掌握到了
一開始先讓他們刻一個靜態版面，再來把 CSS 換成 SCSS
然後把假資料換成真的資料，串 API
接著加上佔位圖以及無限滾動，讓頻道可以一直滾動加載
第六週的作業目的是拋棄 jQuery，節省檔案大小
也讓他們知道原來不靠 jQuery 還是可以寫 JavaScript 的
第七週把中文換成中英雙語，可以支援兩個語言，第八週改用 webpack 實作模組化
第九週用 gulp 讓他們知道原來很多事情都可以自動化
最後一週修正自己的 coding style
這樣子逐漸優化的過程，他們在做下一個作業的時候
就可以直接接續上一個，把一個專案變得越來越完整
如同我一再強調的
寫程式不是重點，重點在「解決問題」，幾乎所有事情的重點都在這個
解決問題又可以分成以下幾點來思考：
1. 你要解決什麼問題？
2. 你用什麼方法解決？
3. 這個方法有什麼優缺點？
我很喜歡一個詞叫做 trade-off，中文可以翻作：權衡、取捨
尤其是在寫程式的領域中，你做什麼事其實都是一種 trade-off
最常見的例子就是時間換空間或空間換時間，沒有那麼好康的事情讓你又有空間又有時間
好啦，其實有，但那都是用錢換來的
我在每一週的作業說明裡面，都會提到說我們這週碰到了什麼問題。那解法呢？
解法當然就是那一週要教大家的東西囉
比起「webpack 是一個打包工具」這種介紹
你讓初學者們知道 webpack 到底是幹嘛的、是要解決什麼問題會有用的多
再次強調，問為什麼很重要，知道為什麼也很重要
知道背後的原因，你就可以決定你要不要用這一套解法
你用一個東西，背後必須要有一個「好理由」。
A：我們改用 TypeScript 吧
B：為什麼？
A：因為潮啊！
如果「潮」這個理由不夠有說服力的話而 A 又提不出其他更好的理由
那就沒有必要改用 TypeScript
之前有一篇很紅的文章，叫做：
在 2016 年學 JavaScript 是一種什麼樣的體驗( https://goo.gl/HM66el )
我覺得有一個很可惜的點，那就是有些人看完之後的心得都只有：
「唉，對啊！前端現在也太複雜了吧！」
但我覺得這篇文章你應該去思考的是：
「裡面那些工具是不是真的需要？那些工具想解決，到底是不是我碰到的問題？」
這才是這篇文章的重點
舉例來說，裡面有一段這樣寫：
「可別用 jQuery！現在哪還有人用 jQuery，
現在是 2016 年了，你絕對應該用 React。」
這個理由跟上面的一樣薄弱，一個字：潮！
當然，他也可能是其他意思，也有可能是想表達說 React 是近年趨勢
jQuery 可能會慢慢被淘汰並且不再維護，以後就有維護性的問題
這時候你就可以考慮說：這樣的情形是不是有可能發生？
如果真的發生的話，會有怎樣的影響？
用 React 帶來的複雜性跟 jQuery 的可維護性哪一個損害較小？
總之呢，重點應該是「你要解決什麼問題，這問題用哪些工具來輔助最適合」
而不是一味的覺得前端怎麼那麼複雜那麼多東西
是啊，本來就一堆東西啊，可是裡面可能有八成你根本用不到啊！
如果你寫一個一頁式的行銷 landing page
還硬要用 React + Redux + Rx + Webpack 的話，那我也是醉了
這堂課程的進行方式如上所述，總共十個作業，每一個作業一週，必須「先做作業」
但做不出來也沒關係
每個禮拜二我會直播講解上一週作業並且實際示範如果是我的話，我會怎麼做
會這樣規劃是因為「自學」無論在哪個領域，都是一個重要的技能
我想先讓同學們對於我要教的內容有概念，甚至是把作業做出來以後，我再重新講解一遍
我覺得唯有這樣，才能讓同學們對我教的東西更熟悉。
這就呼應到我上面提過的「要先痛到，才會得到」
事後有很多同學都反應他們課前預習時覺得有些東西好難，怎麼看都看不懂
可是一看完我的直播教學，就有種茅塞頓開的感覺：「哇！原來這麼簡單」
如果相反過來呢？假如是我先上課，他們就只會覺得：「喔，是這樣寫」
接著寫作業的時候就直接抄我的解法就好了
他們學到了什麼？學到模仿我的程式碼，然後過一個禮拜完全忘記這個解法
為什麼？因為他們沒有痛過，所以沒有去思考
來，再次強調，你寫程式的時候要思考！要思考！要思考！
只有思考過，深思熟慮過的東西才是你的，你才記得住
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 39.109.247.62
※ 文章網址: https://www.ptt.cc/bbs/Soft_Job/M.1498571187.A.3EB.html
這跟 git 沒什麼關係，反倒是切成兩個檔案我倒覺得比較好一點
但若是想要順便示範一下 git 的分支功能，這倒是個好提議，感謝建議XD
... <看更多>