[心得] 前端入門心得

看板Soft_Job (軟體人)作者allqooxx (BIKU)時間8年前 (2016/01/19 01:21)推噓77(77推 0噓 24→)

留言101則, 70人參與討論串1/1

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

01/19 02:20, , 1^F

01/19 02:20, 1^F

推

johnny94

01/19 02:33, , 2^F

01/19 02:33, 2^F

推

johnny94

01/19 02:36, , 3^F

01/19 02:36, 3^F

我是先去實習，後來就實習轉正了。其實跟一般本科生找工作沒什麼差別，就是履歷寫好、說明自己會什麼，但你參與過哪些專案會變得更重要，要讓人家知道你雖然沒有學歷加值，學習速度以及能力仍然值得信賴 :D

推

qsef5

01/19 03:17, , 4^F

01/19 03:17, 4^F

推

cobrasgo

01/19 07:14, , 5^F

01/19 07:14, 5^F

推

gn01216674

01/19 08:26, , 6^F

01/19 08:26, 6^F

推

daniel120

01/19 08:28, , 7^F

01/19 08:28, 7^F

推

jeffrey0120

01/19 09:00, , 8^F

01/19 09:00, 8^F

推

neo5277

01/19 09:01, , 9^F

01/19 09:01, 9^F

→

neo5277

01/19 09:01, , 10^F

01/19 09:01, 10^F

練 jQuery XDDD

推

cobrasgo

01/19 09:06, , 11^F

01/19 09:06, 11^F

推

Argos

01/19 09:35, , 12^F

01/19 09:35, 12^F

→

Argos

01/19 09:38, , 13^F

01/19 09:38, 13^F

http://imgur.com/CadaUfD

→

Argos

01/19 09:38, , 14^F

01/19 09:38, 14^F

推

neo5277

01/19 09:42, , 15^F

01/19 09:42, 15^F

→

Eureka7

01/19 09:44, , 16^F

01/19 09:44, 16^F

沒錯！我打錯字了！已更正。

推

DOGGYBEAR

01/19 09:48, , 17^F

01/19 09:48, 17^F

推

rubyk

01/19 09:55, , 18^F

01/19 09:55, 18^F

推

drajan

01/19 09:56, , 19^F

01/19 09:56, 19^F

「所有」也太猛了吧！

推

cobrasgo

01/19 10:03, , 20^F

01/19 10:03, 20^F

推

y2468101216

01/19 10:04, , 21^F

01/19 10:04, 21^F

推

yfr

01/19 10:21, , 22^F

01/19 10:21, 22^F

推

maydayjames

01/19 10:49, , 23^F

01/19 10:49, 23^F

大你個...我 23...

推

lovdkkkk

01/19 11:25, , 24^F

01/19 11:25, 24^F

推

Superenen

01/19 11:33, , 25^F

01/19 11:33, 25^F

推

AmosYang

01/19 12:05, , 26^F

01/19 12:05, 26^F

推

drajan

01/19 12:06, , 27^F

01/19 12:06, 27^F

推

t1123425

01/19 12:15, , 28^F

01/19 12:15, 28^F

推

Snoopyahoo

01/19 12:19, , 29^F

01/19 12:19, 29^F

推

meowmeowgo

01/19 12:20, , 30^F

01/19 12:20, 30^F

推

yin52

01/19 12:38, , 31^F

01/19 12:38, 31^F

→

dreamnook

01/19 13:01, , 32^F

01/19 13:01, 32^F

我的意思其實是本科在寫作業時「通常」都會需要查文件啦！ http://imgur.com/B8wms6V

還有 33 則推文

還有 4 段內文

推

look54985

01/19 21:12, , 66^F

01/19 21:12, 66^F

推

kinanson

01/19 21:38, , 67^F

01/19 21:38, 67^F

→

kinanson

01/19 21:38, , 68^F

01/19 21:38, 68^F

→

kinanson

01/19 21:38, , 69^F

01/19 21:38, 69^F

→

kinanson

01/19 21:38, , 70^F

01/19 21:38, 70^F

→

kinanson

01/19 21:38, , 71^F

01/19 21:38, 71^F

→

kinanson

01/19 21:38, , 72^F

01/19 21:38, 72^F

我的確弄錯了，已把 two-way binding 那段刪除掉。為什麼會說後端開發人員會比較熟悉 Angular 的寫法呢？ Btw, 能點出我一開始就想錯的地方很感謝你，但思考方式不一樣就是我認為它值得我學習的原因，所以儘管我現在只是個會從 React 角度思考的前端，我仍然認為 Angular 2 很值得投資時間學習。但是如果你今天要問我太多 Angular 的細節，我真的只能邊 google 邊想辦法回答你，沒辦法給你你心目中滿意的答案就像內文說的一樣，我是打算要學，而不是已經學會了呀！ QQ 大大

推

kinanson

01/19 22:45, , 73^F

01/19 22:45, 73^F

→

kinanson

01/19 22:45, , 74^F

01/19 22:45, 74^F

→

kinanson

01/19 22:45, , 75^F

01/19 22:45, 75^F