[心得] 30 人免費前端教學心得

[Y78 (Y78)]

大家好

三個月前，我在這個版上 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
推 skyabsence: 推貢獻
推 Huffman: 讚
推 kingofage111: 推用心
→ MOONY135: 重刻有感
推 bcew: 推用心
推 descent: 真有心
推 pathworld: 第一次推文就送給您了!!!希望之後能有緣給您指導^^
推 fouring: 推痛過
推 art1: 看第一個影片時，覺得解說時應該多加入一些自問自答的內容
推 faintbreeze:
推 art1: 在我的想像中，如果是要示範同樣的顯示效果但不同之做法，用
→ art1: git的分支是不是會比較好？
如果只是想示範同樣的效果但不同方式，其實也不一定要用 git branch 啦
這跟 git 沒什麼關係，反倒是切成兩個檔案我倒覺得比較好一點
但若是想要順便示範一下 git 的分支功能，這倒是個好提議，感謝建議XD
推 a010380: 推用心
推 bronx0807: 推認真
推 peanut97: 我是學生！胡立真的很擅長把東西講的很簡單。
推 vi000246: 推
推 xyz2222aqaq: 推 有痛過才有收穫
推 motestg: 推!用心
推 abc0922001: 這也太用心了吧
推 LMGG: 感謝用心教學
推 tnstiger: 推用心
推 homuhomulol: 推
推 goldmouse: 推詳細解說
推 whereweare: great!!!
推 Kumasan314: 推
推 prosea: 推～希望能加入！！
推 ice0803: 推有心人
推 call0123: 推用心
推 answermangtr: 推 希望可以加入+1
推 iamhandsome: huli 的做法真的讓我們臭新手有茅塞頓開感
推 DissAivent: 推
推 broo: 感謝老師！
推 liuderchi: 推有心
推 MIKEmike07: 推有心
推 wehuin: 用心推
推 No: 有面試到上過課的人，覺得很有潛力和毅力
推 frank11118: 推好心人
推 catinclay: 推
→ pttuser: 不想學，謝謝
推 d1288999: 推推～
推 alice822: 想加入～～
推 v86861062: :D
推 brainsky2001: 推有心，想加入
推 jjwei: PUSH!
推 tassadar1: 真有心
推 freedls: push 感謝
推 mathrew: 超用心
※ 編輯: Y78 (39.109.247.62), 06/28/2017 09:07:51
推 powerwolf543: 好想學！
推 cww7911: 推 加油
推 bill42362: 推!
推 IcelFFs: 推個
推 QoiiwWe: 推推
推 billy4195: 推用心
推 Mariobrother: 推
→ yesyesyesyes: 推
推 chatnoir: 可惡，想學~~~
推 lovdkkkk: (y)
推 fcolin1990: 推
推 yah0330: 推
推 pttrAin: 大推，希望未來也有機會參加課程～
推 guoleo2008: 推推 非常用心
→ musie: task runner 應該從Make, Grunt, gulp 這樣卡完整
→ musie: Bundler應該從Require.js, Browserify, Wepback, Rollup :P
推 darkdanger: 推推!!
→ angusyu: 有沒有從0開始的 XD
推 yuanyu90221: 推用心
推 iitze: 太用心
推 maxex0000: 推認真
推 lucky9527: 推 餓過才知道食物的珍貴
推 PretenderY: 推用心。
→ PretenderY: 減少Request是正確的方向，但是不建議 JS inline，而
→ PretenderY: CSS inline 則是還有討論的空間
→ PretenderY: 如果在意Performance，JS的部分可以考慮async loading
推 BoneXD: 希望還有機會可以參與
推 Mayeighteen: 推 也想加入學習
推 asleisureto: 推～
推 claudia1988: 想加入
推 genius945: 推
推 canblow: 推 有緣也想加入
推 air7755: 推
推 Huffman: 台大哲學哥超強
推 meteor09887: 想加入+1
推 aazz0701: 推 希望能加入
推 bowbowlin: 想+++++++++++！
推 janbarry168: ㄊㄨㄟ
推 ddtabcd: 推 希望能加入學習！
推 a19897811: 想加入一起學
推 boo1024555: 推想加入
推 protector123: 推用心