為什麼這篇api串接練習鄉民發文收入到精華區：因為在api串接練習這個討論話題中，有許多相關的文章在討論，這篇最有參考價值！作者Y78 (Y78)看板Soft_Job標題[心得] 30 人免費前端教學心得時間Tue Jun ...
大家好
三個月前，我在這個版上 po 了這樣一篇文：[分享] 免費程式教學(前端)
https://www.ptt.cc/bbs/Soft_Job/M.1488469002.A.E34.html
基本上就是找一些人，然後我會出作業、改作業跟規劃課程，一切都是免費的
如今三個月過去了，課程剛結束兩週左右，我有整理了一篇心得
裡面有我規劃課程的理念跟課程結束後學生給我的回饋
但因為滿長的，而且有滿多連結跟一張圖片，貼到這邊不太適合閱讀
所以我下面只節錄部分心得，有興趣的話可以看原文，先跟大家說聲不好意思
原文：http://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
推 solsiso: 真好，希望我之後也有機會加入0.0 06/27 21:49
推 skyabsence: 推貢獻 06/27 21:50
推 Huffman: 讚 06/27 21:58
推 kingofage111: 推用心 06/27 21:59
→ MOONY135: 重刻有感 06/27 22:01
推 bcew: 推用心 06/27 22:01
推 descent: 真有心 06/27 22:29
推 pathworld: 第一次推文就送給您了!!!希望之後能有緣給您指導^^ 06/27 22:49
推 fouring: 推痛過 06/27 22:50
推 art1: 看第一個影片時，覺得解說時應該多加入一些自問自答的內容 06/27 22:52
推 faintbreeze: 06/27 22:56
推 art1: 在我的想像中，如果是要示範同樣的顯示效果但不同之做法，用 06/27 23:00
→ art1: git的分支是不是會比較好？ 06/27 23:01
如果只是想示範同樣的效果但不同方式，其實也不一定要用 git branch 啦這跟 git 沒什麼關係，反倒是切成兩個檔案我倒覺得比較好一點
但若是想要順便示範一下 git 的分支功能，這倒是個好提議，感謝建議XD
推 a010380: 推用心 06/27 23:06
推 bronx0807: 推認真 06/27 23:09
推 peanut97: 我是學生！胡立真的很擅長把東西講的很簡單。 06/27 23:09
推 vi000246: 推 06/27 23:11
推 xyz2222aqaq: 推 有痛過才有收穫 06/27 23:12
推 motestg: 推!用心 06/27 23:12
推 abc0922001: 這也太用心了吧 06/27 23:13
推 LMGG: 感謝用心教學 06/27 23:27
推 tnstiger: 推用心 06/27 23:28
推 homuhomulol: 推 06/27 23:28
推 goldmouse: 推詳細解說 06/27 23:35
推 whereweare: great!!! 06/27 23:39
推 Kumasan314: 推 06/27 23:41
推 prosea: 推～希望能加入！！ 06/27 23:42
推 ice0803: 推有心人 06/27 23:47
推 call0123: 推用心 06/27 23:47
推 answermangtr: 推 希望可以加入+1 06/27 23:50
推 iamhandsome: huli 的做法真的讓我們臭新手有茅塞頓開感 06/28 00:05
推 DissAivent: 推 06/28 00:07
推 broo: 感謝老師！ 06/28 00:31
推 liuderchi: 推有心 06/28 00:37
推 MIKEmike07: 推有心 06/28 01:07
推 wehuin: 用心推 06/28 01:24
推 No: 有面試到上過課的人，覺得很有潛力和毅力 06/28 02:42
推 frank11118: 推好心人 06/28 02:56
推 catinclay: 推 06/28 03:21
→ pttuser: 不想學，謝謝 06/28 07:17
推 d1288999: 推推～ 06/28 07:21
推 alice822: 想加入～～ 06/28 07:26
推 v86861062: :D 06/28 07:37
推 brainsky2001: 推有心，想加入 06/28 08:15
推 jjwei: PUSH! 06/28 08:31
推 tassadar1: 真有心 06/28 08:32
推 freedls: push 感謝 06/28 08:52
推 mathrew: 超用心 06/28 08:59
※ 編輯: Y78 (39.109.247.62), 06/28/2017 09:07:51推 powerwolf543: 好想學！ 06/28 09:08
推 cww7911: 推 加油 06/28 09:08
推 bill42362: 推! 06/28 10:39
推 IcelFFs: 推個 06/28 11:06
推 QoiiwWe: 推推 06/28 11:14
推 billy4195: 推用心 06/28 11:33
推 Mariobrother: 推 06/28 11:39
→ yesyesyesyes: 推 06/28 11:58
推 chatnoir: 可惡，想學~~~ 06/28 12:26
推 lovdkkkk: (y) 06/28 16:04
推 fcolin1990: 推 06/28 20:03
推 yah0330: 推 06/28 21:08
推 pttrAin: 大推，希望未來也有機會參加課程～ 06/28 22:03
推 guoleo2008: 推推 非常用心 06/28 22:33
→ musie: task runner 應該從Make, Grunt, gulp 這樣卡完整 06/28 22:36
→ musie: Bundler應該從Require.js, Browserify, Wepback, Rollup :P 06/28 22:38
推 darkdanger: 推推!! 06/28 23:26
→ angusyu: 有沒有從0開始的 XD 06/29 00:22
推 yuanyu90221: 推用心 06/29 01:53
推 iitze: 太用心 06/29 09:03
推 maxex0000: 推認真 06/29 09:42
推 lucky9527: 推 餓過才知道食物的珍貴 06/29 10:31
推 PretenderY: 推用心。 06/29 11:09
→ PretenderY: 減少Request是正確的方向，但是不建議 JS inline，而 06/29 11:09
→ PretenderY: CSS inline 則是還有討論的空間 06/29 11:09
→ PretenderY: 如果在意Performance，JS的部分可以考慮async loading 06/29 11:09
推 BoneXD: 希望還有機會可以參與 06/29 11:49
推 Mayeighteen: 推 也想加入學習 06/29 13:39
推 asleisureto: 推～ 06/29 15:46
推 claudia1988: 想加入 06/29 23:09
推 genius945: 推 06/30 00:27
推 canblow: 推 有緣也想加入 07/01 04:39
推 air7755: 推 07/02 08:28
推 Huffman: 台大哲學哥超強 07/02 11:56
推 meteor09887: 想加入+1 07/03 07:44
推 aazz0701: 推 希望能加入 07/04 12:41
推 bowbowlin: 想+++++++++++！ 07/06 10:13
推 janbarry168: ㄊㄨㄟ 07/16 21:44
推 ddtabcd: 推 希望能加入學習！ 07/19 17:10
推 a19897811: 想加入一起學 07/20 18:49
推 boo1024555: 推想加入 05/02 22:56
推 protector123: 推用心 02/21 18:04