大家好 三个月前，我在这个版上 po 了这样一篇文：[分享] 免费程式教学(前端) https://webptt.com/cn.aspx?n=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://webptt.com/cn.aspx?n=bbs/Soft_Job/M.1498571187.A.3EB.html 如果只是想示范同样的效果但不同方式，其实也不一定要用 git branch 啦 这跟 git 没什麽关系，反倒是切成两个档案我倒觉得比较好一点 但若是想要顺便示范一下 git 的分支功能，这倒是个好提议，感谢建议XD ※ 编辑: Y78 (39.109.247.62), 06/28/2017 09:07:51