[心得] 前端入門心得

[allqooxx (BIKU)]

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://www.ptt.cc/bbs/Soft_Job/M.1453137664.A.52D.html
推 lance8537: 推 感謝分享
推 johnny94: 好文!
推 johnny94: 是說可以分享當初非本科是怎麼找工作的嗎？
我是先去實習，後來就實習轉正了。
其實跟一般本科生找工作沒什麼差別，
就是履歷寫好、說明自己會什麼，
但你參與過哪些專案會變得更重要，
要讓人家知道你雖然沒有學歷加值，
學習速度以及能力仍然值得信賴 :D
推 qsef5: 非常感謝，非本科實習中會參考您的經驗!
推 cobrasgo: 這篇的心態非常好
推 gn01216674: 感謝分享 文章編排的很好
推 daniel120: 推 感謝分享
推 jeffrey0120: 好文，學到很多
推 neo5277: 每天練習jquery一百次，串接資料一百次....這樣會禿頭嘛?
→ neo5277: 不過很多主管都是禿頭就是了
練 jQuery XDDD
推 cobrasgo: 幹，那個gif真的超靠盃XDDDD
推 Argos: 大推！感謝分享！
→ Argos: 樓樓上 那你還要每天codeing十小時 三年不間斷
http://imgur.com/CadaUfD

→ Argos: 頭會禿但以後一鍵就可以打爆客戶 俗稱一鍵超..........
推 neo5277: 應該是一鍵操人~~~人是自己或是客戶就...
→ Eureka7: 應該是 deprecated 不是 depreciated 吧
沒錯！我打錯字了！
已更正。
推 DOGGYBEAR: 謝謝分享! 這排版帥啊
推 rubyk: 推
推 drajan: 分享先推！我也是非本科系 自幹所有的資工課程～
「所有」也太猛了吧！

推 cobrasgo: "所有"？
推 y2468101216: 推啊
推 yfr: 好文　好人
推 maydayjames: 謝分享，不過大哥幾歲啊？
大你個...我 23...
推 lovdkkkk: 推 台灣人的軟體能力是很強悍的
推 Superenen: 推好文 本科前端路過
推 AmosYang: 推分享
推 drajan: 所有「基礎」 感謝highlight Orz
推 t1123425: 本科前端推，最近前端好文越來越多~
推 Snoopyahoo: 推個
推 meowmeowgo: 好強
推 yin52: 推
→ dreamnook: 身為本科系出身 我可以告訴你 學校沒教過查文件XD
我的意思其實是本科在寫作業時「通常」都會需要查文件啦！

http://imgur.com/B8wms6V

推 neo5277: 紅寶書
推 Chris926926: 這分享太棒了
推 makerock: 推用心分享！
→ makerock: 最近有訂 TechBridge ，還不錯
推 niponpon: 推好文
推 A4P8T6X9: 推
推 ag0201: 感謝分享
推 Poppert: 推這篇
推 mrbigmouth: 禿頭之後可以不管什麼需求都一行code解決嗎?
沒禿頭前就可以做了，不要換行就好了，
只要先確定以後維護的人不是自己（誤
推 solamb: 推1.用心的排版~  2.詳細的心得~ 3.熱心的助人~
推 cobrasgo: 不換行的話閱讀會很困難耶
推 vn509942: 感謝分享
推 sarstw: 關於第三點，可以分析一下Facebook Parse的優劣，明天問XD
真的被問了！XDDDD


推 enjoyloli: 身為也是非本科可是喜歡CODE的人很感謝你的分享!
推 kkx55893: 看到很多公司跑去react但搞不好反而拖慢開發速度，
推 catann: 推!!覺得學習果然需要熱情>"<那有沒有切版入門心得XDD
這個很難有什麼祕訣欸 XDD

總之多切、多看、多溝通。

有時候並不單純是前端工程師的問題，

所以要常跟設計師溝通哪樣子的版會比較好切，

另外就是你可能會做怎樣的折衷也要讓他知道，

因為今天並不是說 mockup 畫出來這樣，

那就百分之百 pixel perfect 長這樣，

正常情況下都會有進度壓力，不太可能有時間追求這件事。

（當然這還是得看情況啦）

所以在你做了什麼更動時，

讓設計師知道發生了什麼事，你不是有意要改變它的設計，

而是你做了一點折衷。

尊重他人的專業:D 別人才會尊重你。

推 panda04056: 推！
推 j406660003: 23就有這麼多經驗...看完真的覺得自己太混了 orz
推 jhjhs33504: 推 善用網路上的資源把答案神出來XD
推 kinanson: 其實針對angularjs，不一定要有啥架構啊，簡單的應用也
→ kinanson: 很方便，還有可以聊一下為何您會想學習angular 2嗎?相
→ kinanson: 對於react會帶給您平時的開發有何幫助?
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 的概念，

而且也想要選擇一門後端語言去熟悉，

蠻單純的。
推 asdhse: 推好文
推 eric0609: 勵志分享推
推 No: 推心得分享，好可怕的學習速度
推 thund: 我本科系 但我的查文件通常都是去查別人的文件(遮臉)
推 FRAXIS: 太厲害了 佩服
推 NOTMYBUG: 推！我自己每天早上會刷 1. https://frontendfront.com
→ NOTMYBUG: 2. https://news.ycombinator.com/
→ NOTMYBUG: 3. https://www.techbridge.cc/ 不錯文章會放到pocket
→ NOTMYBUG: 慢慢消化累積自己的知識庫
推 a7253520: 推
推 bean0917: 推~謝謝分享
推 look54985: 謝謝分享
推 kinanson: 其實angular和react的思考模式很不一樣，一種感覺是為了
→ kinanson: 後端人員的思想模式設計的前端框架，另一種是比較符合前
→ kinanson: 端開發人員熟悉的，看看jsx相對template的寫法便有感覺
→ kinanson: ，angular 2已經不是two way binding囉，至少在data flo
→ kinanson: w的方向，component和directive的思考方式已經差挺多的
→ kinanson: 了，是不是有什麼誤會...
我的確弄錯了，

已把 two-way binding 那段刪除掉。

為什麼會說後端開發人員會比較熟悉 Angular 的寫法呢？

Btw, 能點出我一開始就想錯的地方很感謝你，

但思考方式不一樣就是我認為它值得我學習的原因，

所以儘管我現在只是個會從 React 角度思考的前端，

我仍然認為 Angular 2 很值得投資時間學習。

但是如果你今天要問我太多 Angular 的細節，

我真的只能邊 google 邊想辦法回答你，

沒辦法給你你心目中滿意的答案

就像內文說的一樣，

我是打算要學，而不是已經學會了呀！

QQ 大大

推 kinanson: 您千萬別那麼客氣，只是想從各個專精的人觀點來看，不同
→ kinanson: 開發角度如何去思考，畢竟要用什麼樣的開發方式，還是針
→ kinanson: 對要能幫助平時開發上的什麼問題，因為我個人只是稍微
→ kinanson: 玩過react才會好奇，是讓您看到什麼優點，會讓您從已熟
→ kinanson: 悉react，而想學習angular2，畢竟不管學習什麼樣的開發
→ kinanson: 方式，就是想要能更好更高效的完成任務，然後每天準時下
→ kinanson: 班吧...或許您有看到什麼我沒看到的點，才想跟您請教一
→ kinanson: 下而已
很大一部分真的是出於好奇吧 XD

我覺得在這領域自己真的像小嬰兒一樣什麼都不知道。

如果在 Angular 學習上遇到問題希望也不吝賜教了 XD

其實我也很好奇最後你選擇 Angular 的原因是什麼

（不小心也看到你的部落格現在入坑了，哈哈）

可以私信水球聊聊！
推 wongengk: 推！
推 keepgoingo: 強
推 cakin: 推
推 frances0416: 推
推 u9140118: 給當兵的我一個好的目標與方向  推~
推 chatnoir: 非本科的我汗顏中
推 storm654321: 推
推 cliffk321: 推
推 obamina48: 推
※ 編輯: allqooxx (1.162.68.23), 01/20/2016 22:30:13
推 ChoDino: 興趣使然是最重要的！特地跑來推~!
推 rogerwewe: 樓上298?
推 slrune1049: 好文
推 modulation: XD 一鍵超人
推 LegendSun: 小弟算本科感覺都沒你厲害  收徒嗎
推 ntddt: 推強大分享!
推 casiey: 今天剛參加一個前端開發工作坊，回來就看到這篇分享，覺得
→ casiey: 好受用啊！
推 roger00: 推
推 wensmile: 推 好文感謝！
推 godie0629: 推!!!!
※ 編輯: allqooxx (61.219.202.66), 05/23/2016 15:27:18
推 x81236900: 好文再推一次