《TO》導讀：PTT 鄉民 allqooxx 在 Soft_Job 版上分享自己的前端工程師心得，其中最特別的是他並非本科系的，不是資工、資管背景出身，從一片白茫茫的碼盲（不會 coding 的人）踏入工程領域。這中間的學習過程與心得分享，到底是什麼呢？（以下為作者第一人稱敘述）
Hi 大家，先簡介一下自己背景：
非資工資科資管系 (也就是所謂的非本科系)
其實我覺得第一點不是很重要、我也很討厭強調，但偏偏就是很常被問，要不然就是別人聽到你大學是 XX 系就會：「蛤？」索性就把它列出來了。
興趣使然的前端工程師，擅長一鍵跑版
沒上過資策會、巨匠，或任何各種職訓班，但買過 tree house 的課程和幾本書
學習時間：一年半（從碼盲到現在終於可以改一些 code）
稍微熟一點的技能： JavaScript、CSS、html、React.js
預計未來要學的東西：Haskell、golang、Angular(2.0)、Rx.js
這是之前相關的專訪，但我一直都想自己寫一篇，也不是 William 寫得不好，但總覺得哪裡不對勁，也許自幹就是一種工程師的浪漫吧！
後來想想，也許是整篇文章太強調「本科」影響不大
事實上我想說的是：「非本科不該是阻擋你寫程式的理由。」
總之這篇就是來介紹一下我是怎麼慢慢上手這個職業，中間會提到一些我覺得很棒的學習資源，和吸收新知的方式。
說到吸收新知，目前首推碼天狗，它讓我禮拜一早上都會很焦慮的重新整理，大家可以感受一下。
- Porjects
這是我簡介自己做過 projects 的slide，會放這個是因為我本來要買月費專案 ($7/month)，卻手滑買到年費專案 ($70/year)，gan，只好多多利用它了。
- Get started
其實我本來立志成為一個 Data Scientist ，只是不小心被擺到前端的位置上去……
回顧這一年半的旅程，前端的東西真的太多太雜了，更容易完全只知其然而不知其所以然的就開始用某個新框架、library，所以對我來說，「學什麼」是副課題，「不學什麼」才是真正的關鍵。
因為我前端工程師的路還沒走完，所以應該在我退休或換職業（去賣雞排）之前，都會繼續寫下去。
目前寫完三點：
- 非本科系 v.s 本科系
- 從哪裡開始學習？
- 前端工程師該懂後端嗎？
- 1. 非本科系 v.s 本科系
就來說說「本科系」來到底有沒有差。首先，我們都知道學校裡的課程，很少是真的專注在所謂「前端工程」上；這是可以理解的，一來因為前端變化太快，學期初才在說好棒棒的東西，到了學期末可能就變 deprecated 了。
所以這就代表非本科系跟本科系的人站在相同的學習立足點上了嗎？No，你得面對現實，本科生就是有他的優勢在。這裏要講個實習的故事。我第一間去實習的新創公司，應徵的是行銷，CEO 是個自己學習 JavaScript 並且把產品做出來的人，更重要的是他是個很願意教的人，在我表示我想朝這方向前進的意願時，他很大方的說：「如果你對 JavaScript 有興趣可以教你。」
當時還有另一位是資管系的同學也一起，第一次的作業是用 Angular 做表單的驗證，怎麼讓使用者不能繼續輸入資料呢？（當時的我連 JavaScript、html 都不會寫）我的做法是非常土炮的將 input 換成 div 然後加上紅色的邊框，另一位實習生則是使用了 disabled 這個 property，就搞定了。
講起來也沒什麼了不起的技巧，但不知道就是不知道。我問他怎麼會知道有 disabled 這個特性，他的回答也很簡單：「查文件啊！」也是這次教訓，我知道要先查文件。講起來蠻白癡，不過會上 stackoverflow 和 google 找答案和看官方文件，都是最基本的能力。為什麼他會知道？
很簡單，因為平常他們在寫作業或作專題就需要這個能力。
既然我們遇到不會的字會查字典， 那為什麼我們寫軟體遇到問題時，不需要讀 doc 呢？
而對於整個電腦的理解，非本科系的人絕對也是被甩在幾條街之外，因為我們不需要修資料結構、演算法，更別說對於資料庫，作業系統、計算機結構、計算機組織、編譯器理解的淺薄，一定要掌握上述這些知識才能寫前端嗎？這是一個很大的疑問；但一個了解底下發生什麼事情的人，才會更知道極限在哪裏，這個絕對是肯定的。
有時候你寫程式時會卡在一個小小的點，想出來之後覺得沒什麼，而本科系的人能從以前上述課程中的經驗去延伸，（不管是演算法或是系統相關的事情）比你更快速得到答案。畢竟，人家花了那麼多時間了解電腦，你如果不是天縱英才，要比他們理解電腦就得更努力跟上才行。
這裏推薦一個很棒的課程，nand2tetris，上面有很詳細的指示，如果你需要影片和評分系統的話，coursera 上也有開課了:https://www.coursera.org/course/nand2tetris1。這門課會從最基本的 nand(not and) 邏輯閘開始講起，用模擬器組合出自己的 CPU、記憶體，定義自己的組合語言，用習慣的程式語言寫出組譯器，
再寫出一個超簡易版的 JVM，最後用一個簡化過後的 Java 語言（真的超簡化），寫出一個俄羅斯方塊來。整台電腦、軟體，都是由你一手寫出來的，不覺得很熱血嗎？
而且你終於也能夠看懂這張圖的笑點在哪了：
當然，如果你在學習途中發現你對系統的東西很有興趣，那也恭喜你發現新天地啦！想當初為了所謂堅實的基礎，還跑去圖書館借白算盤來啃，那又是另一個故事了。
總結一下這一段，前端工程師也是軟體工程師，對電腦一無所知的人寫出來的軟體，你敢用嗎？我認為至少玩過一輪 nand2tetris 對於非本科系的人會相當有幫助，本科系的人來寫前端確實是有一點優勢在，但這不是認輸的藉口，而是你必須比別人更努力找方法變強的原因。
另外，千萬不要以為念研究所的人是只會讀書的書呆子，比你聰明、比你努力，又比你勇敢的人永遠都多的是。
- 2. 從哪裡開始學習？
先來說說「單純」的前端從哪裡開始，主要分成兩塊：
第一塊是 html 和 CSS：
我以前學習 html 和 CSS 的方法就是把 w3schools看完，不能說有什麼不好，不過真的是看完大部分都忘記，畢竟很多東西都馬是要用到的時候再去查。
但現在我會推薦 codecademy，邊寫點東西邊學絕對是很有效的學習方式。而學會基礎後，要怎麼設計出好維護又乾淨的 html and CSS 那又是另一個很長的故事。
第二塊則是 JavaScript：
坦白說一年半過去，我仍然認為自己在 JavaScript 的知識上很貧瘠。這裏有篇 10 個面試時應該要知道的問題，可以探一下自己到底對 JavaScript 理解多少。這裏如果把教學全部列出來，真的是完全列不完，
但學習的流程是這樣子：
掌握了基礎的語法和原則
實作練習
回頭研究基礎再繼續實作
重複以上循環不斷的把你的武器磨的更亮
至於掌握基礎的語法，你可以到以下任一網站，
挑一個你喜歡的，上完基礎 JavaScript 課程：
練習一段時間後，你會發現又有好多新工具冒出來了，這時候你可以先辦個 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 作者)
這也是為什麼我一直遲遲沒有碰 Angular 的原因，（因為我還沒遇過複雜到需要用到它的情境）但我認為在選擇前端的框架時，這篇文章很值得一看再看：界面之下：還原真實的 MV* 模式
裡面並沒有太多的程式碼，只有比較 high level 的概念，但看完你會比較理解別人說 MVC、MVP、MVVM、Model 2 是在說些什麼，前端主要工作之一就是處理使用者介面（UI），我認為理解這些模式是一個前端工程師必備的 common sense，這些概念比起淘汰迅速的工具們，是比較能夠保值的，並且也會漸漸影響你挑選工具的眼光。
而 medium 上也有許多好文章可以看，twitter 上面也有很多大神可以讓你追蹤，不要把這些事情當作是在大拜拜，覺得追蹤越多人自己越屌，重要的是你看他們生產的內容時得到了什麼。
另外臉書上的前端社團也很值得加入，台灣人的軟體能力是很強悍的：
Front-End Developers Taiwan
AngularJS.tw
ReactJS.tw
JavaScript.tw
重要的是在上面發問，也會有人很熱心的回答你。假如這樣都還是讓你資訊焦慮，可以開始訂閱一些技術週刊，像是碼天狗、TechBridge，讓 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，可以略懂 Async 在 server 端和 client 端的差異。
目前大概走到這裡，還有很多沒說到，但學個基礎開始實作後就能體會到許多了。
至於實作，
可以選擇自己寫個身體健康、參與 open source，
或是去實習都是非常好的選擇
不管是 RWD、mobile web、跨瀏覽器的處理、SEO，動畫該用 CSS3 或是 JavaScript 還是 SVG？
每天都有新的問題可以鑽研，目前就先寫到這裡啦！希望可以改變一些覺得前端工程師只是在切切版的想法，也希望能幫助到想往前端工程師邁進的人。
____________________
科技化時代來臨，多一項技能就是多一個保障。在各大產業都尋求數位化的時刻，會寫 code 或至少懂一些基本概念真的很、有、用！
如果你也跟我一樣：渴望抓住科技時代潮流不被淘汰，請不要錯過超紮實 24 小時的開發訓練！
臺北 Google 開發者社群共同發起人、資深安卓 Coder 手把手教學，快點來報名吧～
（本文轉自作者部落格，未經授權不得轉載）