Hi 大家， 最近在整理网页前端学习的心得， 想着从 soft_job 版上得到很多东西， 至少在迷失方向的时候这里都会有人把你骂醒。 现在把这篇回馈给版上， 希望能帮助到对前端或软体工作有兴趣， 却又不太知道从何开始的人。 网志好读版：http://abalone0204.github.io/2016/01/18/way-to-fed/ 我的前端工程师之路 - 「这个画面帮我稍微调一下应该没有很难吧？」 先简介一下自己背景： 1. 非资工资科资管系(也就是所谓的非本科系) 2. 兴趣使然的前端工程师，擅长一键跑版 3. 学习时间：一年半（从林先生口中的码盲到现在终於可以改一些 code） 4. 稍微熟一点的技能： JavaScript, CSS, html, React.js 5. 预计未来要学的东西：Haskell, golang, Angular(2.0), Rx.js 6. 总之这篇就是来介绍一下我是怎麽慢慢上手这个职业， 中间会提到一些我觉得很棒的学习资源，和吸收新知的方式。 7. 先讲结论的话，我觉得码天狗是目前看到很棒的资源， 礼拜一都会很焦虑的一直按重新整理 http://weekly.codetengu.com/ ------ Get started 其实我本来立志成为一个 Data Scientist ， 只是不小心被摆到前端的位置上去...... 回顾这一年半的旅程，前端的东西真的太多太杂了， 更容易完全只知其然而不知其所以然的就开始用某个新框架、library， 所以对我来说，「学什麽」是副课题，「不学什麽」才是真正的关键。 ------ 因为我前端工程师的路还没走完， 所以应该在我退休或换职业（去卖鸡排）之前， 都会继续写下去。 目前写完三点，主要都是我刚开始工作时最常有的疑问： 1. 非本科系 v.s 本科系 2. 从哪里开始学习？ 3. 前端工程师该懂後端吗？ ------ 1. 非本科系 v.s 本科系 就来说说「本科系」来到底有没有差。 首先，我们都知道学校里的课程， 很少是真的专注在所谓「前端工程」上； 这是可以理解的，因为前端变化太快， 学期初才在说好棒棒的东西， 到了学期末可能就变 deprecated了。 所以这就代表非本科系跟本科系的人站在相同的学习立足点上了吗？ No，你得面对现实，本科生就是有他的优势在。 这里要讲个实习的故事。 我第一间去实习的新创公司，应徵的是行销， CEO 是个自己学习 JavaScript 并且把产品做出来的人， 更重要的是他是个很愿意教的人， 在我表示我想朝这方向前进的意愿时， 他很大方的说：「如果你对 JavaScript 有兴趣可以教你。」 当时还有另一位是资管系的同学也一起， 第一次的作业是用 Angular 做表单的验证， 怎麽让使用者不能继续输入资料呢？ （当时的我连 JavaScript、html 都不会写） 我的做法是非常土炮的将 input 换成 div 然後加上红色的边框， 另一位实习生则是使用了 disabled 这个 property，就搞定了。 讲起来也没什麽了不起的技巧，但不知道就是不知道。 我问他怎麽会知道有 disabled 这个特性， 他的回答也很简单： 「查文件啊！」 也是这次教训，我知道要先查文件。 http://imgur.com/B8wms6V 讲起来蛮白痴， 不过会上 stackoverflow 和 google 找答案和看官方文件， 都是最基本的能力。 为什麽他会知道？ 很简单，因为平常他们在写作业或作专题就需要这个能力。 既然我们遇到不会的字会查字典， 那为什麽我们写软体遇到问题时，不需要读 doc 呢？ 而对於整个电脑的理解，非本科系的人绝对也是被甩在几条街之外， 因为我们不需要修资料结构、演算法， 更别说对於资料库， 作业系统、计算机结构、计算机组织、编译器理解的浅薄， 一定要掌握上述这些知识才能写前端吗？ 这是一个很大的疑问； 但一个了解底下发生什麽事情的人，才会更知道极限在哪里， 这个绝对是肯定的。 有时候你写程式时会卡在一个小小的点，想出来之後觉得没什麽， 而本科系的人能从以前上述课程中的经验去延伸， （不管是演算法或是系统相关的事情） 比你更快速得到答案。 毕竟，人家花了那麽多时间了解电脑， 你如果不是天纵英才，要比他们理解电脑就得更努力跟上才行。 这里推荐一个很棒的课程，nand2tetris: http://www.nand2tetris.org/ 上面有很详细的指示，如果你需要影片和评分系统的话， coursera 上也有开课了:https://www.coursera.org/course/nand2tetris1。 这门课会从最基本的 nand(not and) 逻辑闸开始讲起， 用模拟器组合出自己的 CPU、记忆体，定义自己的组合语言， 用习惯的程式语言写出组译器， 再写出一个超简易版的 JVM，最後用一个简化过後的 Java 语言（真的超简化）， 写出一个俄罗斯方块来。 整台电脑、软体，都是由你一手写出来的，不觉得很热血吗？ 而且你终於也能够看懂这张图的笑点在哪了： https://media.giphy.com/media/3oEdv6pGyOH00ZiRH2/giphy.gif 当然，如果你在学习途中发现你对系统的东西很有兴趣， 那也恭喜你发现新天地啦！ 想当初为了所谓坚实的基础，还跑去图书馆借白算盘来啃， 那又是另一个故事了。 总结一下这一段， 前端工程师也是软体工程师， 对电脑一无所知的人写出来的软体，你敢用吗？ 我认为至少玩过一轮 nand2tetris 对於非本科系的人会相当有帮助， 本科系的人来写前端确实是有一点优势在， 但这不是认输的藉口， 而是你必须比别人更努力找方法变强的原因。 另外， 千万不要以为念研究所的人是只会读书的书呆子， 比你聪明、比你努力，又比你勇敢的人永远都多的是。 ------ 2. 从哪里开始学习？ 先来说说「单纯」的前端从哪里开始， 主要分成两块： 第一块是 html 和 CSS： 我以前学习 html 和 CSS 的方法就是把 w3schools 上面的东西看完...... http://www.w3schools.com/ 不能说有什麽不好，不过真的是看完大部分都忘记， 毕竟很多东西都马是要用到的时候再去查。 但现在我会推荐 codecademy： https://www.codecademy.com/ 边写点东西边学绝对是很有效的学习方式。 而学会基础後， 要怎麽设计出好维护又乾净的 html and CSS 那又是另一个很长的故事。 第二块则是 JavaScript： 坦白说一年半过去，我仍然认为自己在 JavaScript 的知识上很贫瘠。 这里有篇 10 个面试时应该要知道的问题：https://goo.gl/I4fN89 可以探一下自己到底对 JavaScript 理解多少。 这里如果把教学全部列出来，真的是完全列不完， 但学习的流程是这样子： - 掌握了基础的语法和原则 - 实作练习 - 回头研究基础再继续实作 - 重复以上循环不断的把你的武器磨的更亮 至於掌握基础的语法，你可以到以下任一网站， 挑一个你喜欢的，上完基础 JavaScript 课程： - treehouse: https://teamtreehouse.com/ - code school: https://www.codeschool.com/ - egghead.io: https://egghead.io/ 练习一段时间後，你会发现又有好多新工具冒出来了， 这时候你可以先办个 github 帐号， 首先 watch awesome 这个 repo: https://github.com/sindresorhus/awesome 看一下你喜欢的领域有没有啥好东西。 再挑几个你最有兴趣的 repo 按下 watch， 最後再开始订阅各大框架或社群的 weekly， 接着就是准备被源源不绝的资讯轰炸、不断的学习和升级。 而值得一提的是， JavaScript 有很多工具可以用， 不管是 library 还是 framework， 学习之前，真的必须想一想： 「你真的需要用它吗？」 举例来说： React 的确相当的好用， 但是你的画面真的有那麽多 state 要处理吗？ 有些人简单的认为 SPA(Single Page Application)就要用 React， 我得说不一定，假如根本没有那麽复杂， 也许你只是需要一个 template engine 而已， 而把 React 当作 html 的 template 来用， 实在是有点太小看它了。 什麽时候该用 React 或是 React 到底好在哪里， 这个议题其实已经超出了本篇文章的范围， 有兴趣的可以看这篇： React Components, Elements, and Instances by Dan Abramov (Redux 作者) https://goo.gl/NvpwpN 这也是为什麽我一直迟迟没有碰 Angular 的原因， （因为我还没遇过复杂到需要用到它的情境） 但我认为在选择前端的框架时，这篇文章很值得一看再看： 界面之下：还原真实的MV*模式： https://github.com/livoras/blog/issues/11 里面并没有太多的程式码，只有比较 high level 的概念， 但看完你会比较理解别人说 MVC、MVP、MVVM、Model 2 是在说些什麽， 前端主要工作之一就是处理使用者介面（UI）， 我认为理解这些模式是一个前端工程师必备的 common sense， 这些概念比起淘汰迅速的工具们，是比较能够保值的， 并且也会渐渐影响你挑选工具的眼光。 而 medium 上也有许多好文章可以看， twitter 上面也有很多大神可以让你追踪， 不要把这些事情当作是在大拜拜， 觉得追踪越多人自己越屌， 重要的是你看他们生产的内容时得到了什麽。 另外脸书上的前端社团也很值得加入，台湾人的软体能力是很强悍的： - Front-End Developers Taiwan： https://www.facebook.com/groups/f2e.tw - AngularJS.tw: https://www.facebook.com/groups/augularjs.tw - ReactJS.tw: https://www.facebook.com/groups/reactjs.tw - JavaScript.tw https://www.facebook.com/groups/javascript.tw 重要的是在上面发问，也会有人很热心的回答你。 假如这样都还是让你资讯焦虑，可以开始订阅一些技术周刊， 像是码天狗：http://weekly.codetengu.com/ TechBridge：http://weekly.techbridge.cc/ 让 curators 来帮你整理一些技术上的新知。 已经尽量精简了资讯来源，希望能让新手们不要太无所适从。 ------ 3. 前端工程师该懂後端吗？ 後端跟前端是完全不一样的专业， 有人说 Node.js 能让前端工程师跨足到後端去。 (Isomorphic？) 事实上前端工程师想往後端走还是有许多需要学习的， 不管是资料库或是系统面，都不是平常前端会碰触到的领域， 认为自己会写 JavaScript 就硬上的下场通常是： - 效能有问题 - 资安有问题 - 整个 server side 的 code 都他妈很有问题 听起来是很糟糕的事情，所以请千万尊重专业， 让我们前端归前端、政治归政治（欸？）。 那前端到底要理解後端到怎样的程度呢？ 这是一个很 tricky 的问题， 大部份人会说：「至少要会接资料啦！」 但要学到会接资料揪竟是需要怎样的能力呢？ 真的有人学到刚刚好就喊停的吗？ 最好的方法其实就是自己去玩一套网页框架， 後端前端都写一遍。 Rails, Laravel, Django 都是我认为不错的选择， （Koa 也很不错啦......） 重点是去感受一下自己要怎样设计 DB 的 Schema， 怎样做正规化、怎样避免 N+1 Query， 以及整个框架的架构为什麽要这样设计， 最後再跟自己拉的页面整合在一起，然後部署上去， （用 heroku 是有点偷懒，不过如果你对 server 真的没兴趣，还是可以考虑这样做没差） 等做到这一步，「至少要会接资料」这一点， 早就迎刃而解了。 对了， 记得也不要因为自己写过後端的 code 就说自己是 full-stack， 这就跟你会收发 email 就说自己懂电脑一样会被笑。 (IT crowd 真的是个不错的影集) 有兴趣可以看看这篇： 一个前端工程师眼中的 Node.js: http://goo.gl/lTB8e 可以略懂 Async 在 server 端和 client 端的差异。 ------ 目前大概走到这里，还有很多没说到， 但学个基础开始实作後就能体会到许多了。 至於实作， 可以选择自己写个身体健康、参与 open source， 或是去实习都是非常好的选择 不管是 RWD、mobile web、跨浏览器的处理、SEO， 动画该用 CSS3 或是 JavaScript 还是 SVG？ 每天都有新的问题可以钻研， 目前就先写到这里啦！ 希望可以改变一些觉得前端工程师只是在切切版的想法， （有时候光是切切版其实就很要命了） 也希望能帮助到想往前端工程师迈进的人。 谢谢大家！ -- Re: [求助] 男女共处一室? 假设有一男 a 及一女 b 他们单独共处一室 alone abalone = 鲍鱼 --

※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 1.162.60.75 ※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Soft_Job/M.1453137664.A.52D.html 我是先去实习，後来就实习转正了。 其实跟一般本科生找工作没什麽差别， 就是履历写好、说明自己会什麽， 但你参与过哪些专案会变得更重要， 要让人家知道你虽然没有学历加值， 学习速度以及能力仍然值得信赖 :D 练 jQuery XDDD http://imgur.com/CadaUfD 没错！我打错字了！ 已更正。 「所有」也太猛了吧！ 大你个...我 23... 我的意思其实是本科在写作业时「通常」都会需要查文件啦！ http://imgur.com/B8wms6V 没秃头前就可以做了，不要换行就好了， 只要先确定以後维护的人不是自己（误 真的被问了！XDDDD 这个很难有什麽秘诀欸 XDD 总之多切、多看、多沟通。 有时候并不单纯是前端工程师的问题， 所以要常跟设计师沟通哪样子的版会比较好切， 另外就是你可能会做怎样的折衷也要让他知道， 因为今天并不是说 mockup 画出来这样， 那就百分之百 pixel perfect 长这样， 正常情况下都会有进度压力，不太可能有时间追求这件事。 （当然这还是得看情况啦） 所以在你做了什麽更动时， 让设计师知道发生了什麽事，你不是有意要改变它的设计， 而是你做了一点折衷。 尊重他人的专业:D 别人才会尊重你。 1. 为什麽要学 Angular 有一说是 React 是 library，Angular 是 framework， 我喜欢更轻量单纯的、弹性更高一些。 （但这一定有偏见，因为我根本不够了解 Angular） 反过来说，使用 React 也不一定要啥架构， 为什麽想要学 Angular 2 的原因很简单， 因为 Angular 火红的时候我才刚学 JavaScript， 最近观察一阵子後觉得可以直接学 2。 至於学完会有什麽帮助？ 学习 Angular 能让我从不同的角度来看待前端的开发吧！ 2. React 对於平时的开发有何帮助？ 简单说就是不用自己去手动处理 UI 的状态， 反正 props 传下来，一律重绘就对了！ （至於有没有真的重绘那就是 React 神奇的地方了） 这里有篇自己手刻 Virtual DOM 的教学： https://github.com/livoras/blog/issues/13 除此之外，因为资料流向很单纯的关系， 出错的时候更容易去 trace， 这点搭配 Redux之类的单向资料流架构，好处会更明显。 （我没有学 Flux，因为我觉得 Redux 看起来比较顺眼......） 大概是这样吧！ 3. 为什麽想学 Haskell, Rx.js, golang？ 虽然你没问， 不过也把为什麽想学 Haskell、Rx.js、golang 讲一讲。 首先是 Function 在 JavaScript 里面是一等公民， 很多好的实现都是靠函数做到的， 举例像是平常写到 Curry function 的频率也很高， 原因就是因为它能让 code 变得好读又好预测会发生什麽事情， 更能藉由函数的组合减少重复的程式码 当然如果时程一赶起来还是得摸摸鼻子先写脏脏的 code， 然後在最上面写下一句谎话：Todo: Refactor。 Rx.js 的 Observable 给了你完全不同的方式去思考 event。 （对不起，我真的不喜欢 Promise，是一个不想给承诺的男人唉） 而 Haskell 则是一门纯函数语言， 去年因为教授的关系开始接触到这门语言， （推荐Real world Haskell，虽然买了一直没时间看） 「纯函数」真的给了你一个完全不同的角度看世界。 我觉得这里我知道得太浅薄， 可以看一下良葛格对函数式程式的理解会比较清晰一点： http://www.ithome.com.tw/voice/92652 Golang 则是因为我很喜欢它 interface 的概念， 而且也想要选择一门後端语言去熟悉， 蛮单纯的。 我的确弄错了， 已把 two-way binding 那段删除掉。 为什麽会说後端开发人员会比较熟悉 Angular 的写法呢？ Btw, 能点出我一开始就想错的地方很感谢你， 但思考方式不一样就是我认为它值得我学习的原因， 所以尽管我现在只是个会从 React 角度思考的前端， 我仍然认为 Angular 2 很值得投资时间学习。 但是如果你今天要问我太多 Angular 的细节， 我真的只能边 google 边想办法回答你， 没办法给你你心目中满意的答案 就像内文说的一样， 我是打算要学，而不是已经学会了呀！ QQ 大大 很大一部分真的是出於好奇吧 XD 我觉得在这领域自己真的像小婴儿一样什麽都不知道。 如果在 Angular 学习上遇到问题希望也不吝赐教了 XD 其实我也很好奇最後你选择 Angular 的原因是什麽 （不小心也看到你的部落格现在入坑了，哈哈） 可以私信水球聊聊！ ※ 编辑: allqooxx (1.162.68.23), 01/20/2016 22:30:13 ※ 编辑: allqooxx (61.219.202.66), 05/23/2016 15:27:18