2018-05-26：請教一下，新鮮人如果想往網頁程式走，你會建議他學哪個.md

討論串

　　此文有貼在 FB 相關技術群中，相關網友有對此議題做討論。建議有任何疑問時，去此討論串發問，讓多點人來回答你的問題。

• FB javascript.tw 討論串

• FB f2e.tw 討論串

  對於各位網友提供的意見，我也有相對應的想法寫在最下面供參。

Ｑ：請教一下，新鮮人如果想往網頁程式走，你會建議他學哪個，有建議的學習路徑嗎？

　　被問這樣的一題，我看著題目思考了一陣字，抓出幾個關鍵字來做為思考與回答的方向：「新鮮人」、「網頁程式(以下都用「前端」來稱呼)」和「學習路徑」。

• 新鮮人：代表著對目前職場比較沒有概念、方向等等，專業技術可能是以學校所學為基礎，甚至是跨領域(零基礎)等等。
• 前端：這邊的前端我想把範疇延伸至「前端工作、職場」等等。因為主要的出發點是「新鮮人」，是希望看完之後，對於「往前端走」更有概念、方向感等等。
• 學習路徑：其實網路上已經有非常完整的 roadmap ，也偶而看到這些資源被 share 在各討論區。那為什麼還是有些朋友對這方向感到疑惑，不知該如何進行呢？我認為最主要的問題可能是資訊爆炸，一次丟這些 refs ，更讓他不知所措，所以這邊要拿這些 refs 多做點個人觀點與說明，最後我要試著做(武斷點的)結論，做一些資訊等整合供參考。

本文期望

1. 有類似疑惑的你，希望看完此篇後，提供一些參考與幫助。
2. 我專職前端才接近一年！求「更有經驗的前輩」多多「打臉！」，更多的打臉、指正、分享，「新鮮人」就有更多的內容可以參考。(程式的範疇實在太廣了，稍微轉個角度，談的事情就差很多了。)

前端

　　前端的涵蓋的範圍非常廣泛，但一般聽到這一詞時，主要還是會聯想到「Web Frontend」，Web Frontend 的基本組成就是以下這些程式語言與技術

HTML

構成網頁一切的基礎元素，一定要有一定程度的熟悉度，例如：

• 看到網站上某個區塊，你立刻能猜可能是甚麼 element。
• 我想放置一個區塊 or 輸入 or 表格 or 圖片，我要用什麼 element ？

這些都要能立刻寫出來。善用關鍵字來找學習資源「html 教學」、「learn html」找文章、找影片！很多 < 20mins 的影片是很好的入門開始

CSS

　　負責網頁樣式的語言，當學完網路上的教材後，試著看看「css interview」(基礎題目、一年內的文章)，看看自己熟悉的程度。就算你學「教材」時 200% 認真，第一次去看這些題目時，一定滿頭問號，這很正常，因為看文件時、手動簡單完時，不會碰觸到這些細節思維。「css interview」會是很好的思考材料。

Javascript(JS)

　　Web應用的一切基礎，有 JS 才能創造各種 Web Application。「javascript 教學」找學習資源。另外這些 keyword 也要學 ajax、promise、ES6 javascript

HTML、CSS、JS

• 學「肯定是學不完」的，要學到什麼程度呢？要能夠「自己做出 project」(此議題後面談)。
• 參考 developer-roadmap/frontend.md 這邊列的方向做學習方向。
• 善用 codepen 邊看邊測試來學習，此外多搜尋 keyword 也有很多範例可以多參考。
  • codepen html
  • codepen css flexbox
  • JS promise

前後端之間

　　前端、後端是密不可分，做為時間與方向的考量，不可能在這階段去深入後端的議題。但是！兩者之前的「溝通方式」是一定要具備的知識。

• http(s) 協定：Web 的應用基本上都走 http 協定，這方面多少看一些會讓你在寫網頁的時候更有感覺。
• restful：一種以 http 協定為基礎與後端溝通的(最熱門的)風格，雖然我待過的公司都沒有嚴謹的依據此風格，但跟 api 溝通的方式與概念都可以透過學習這個命題來了解。

後端

　　要開發前端，一定需要後端的配合。為了後面我建議的東西 project，有需要的話，還是需要這邊的功。依據選擇的 framework 可能會有所不同(因為我是碰 react ，故在此先建議這些項目)

• server：這邊建議就先選 NodeJs (express) 來搭建 http server(記得 follow restful)。
• database：就先選用 MySql or MongoDB 吧，建議(project)還是要有 DB 的相關應用，除非你的 project 真的不需要用到 database 。

這邊的內容沒有要深入，只是為配合前端學習與開發，找份清楚的教學來照本宣課架設吧 google keyword: nodejs express mysql

框架(framework)

　　如果是在網路上跟別人討論，我可能話會說的很婉轉、不會說得太死。但這篇是我自己的心得文章，所以直白一點。

如果有人問我「(找)前端(工作)」該怎麼攻略，我現在(2018/05/26) 100% 回答「攻略(前端)框架」。

先來區別「library」跟「framework」：

• library：library 是「工具」，它沒有教你怎麼做事。我知道最好的比喻是「紙本地圖」，你看「紙本地圖」知道了「台北火車站」在哪邊，但紙本地圖「沒有告訴你怎麼去，你自己應用、自己想辦法去」，「走路、坐公車、開車、騎車」，「走最短路線 or 最不塞的路」隨便你自己決定。 jquery 就是最好的範例，通常 library 的 document 只會說明它的 api 格式、用途等等資訊。
• framework：framework 是利用某些工具設計出來「達成某一目的」的「best practice」。就像車上的「導航」會指定你走什麼路線、你要依據它的方式走。

框架就是制定一套規範或者規則（思想），大家（程式設計師）在該規範或者規則（思想）下工作。或者說使用別人搭好的舞台來做編劇和表演。(wiki 軟體框架)

學習 framework 有這些好處：

• 向 framework 學習 Web Application 的 best practice (向有經驗的人學習總是比較有效率)。
• 很多 team 選擇 framework 為解決方案，因此「工作需求也多」。
• 社群熱絡，有問題時，容易找到資源與人來學習、提問。

所以這邊要推薦的就是目前最熱門的「Web Application Framework」(也是目前前端徵才最多的地方)：

• Angular(簡稱 ng)
• React (含redux、react-router，單單 React 不是框架)
• Vue.js

挑一個下手！

　　這三個是目前最熱門的 framework，各有優缺，非常難說該選哪個。去 google 看看，挑一個順眼的、對「你」好入門上手的吧。(我甚至看過好幾篇徵才註明，「熟悉 Angular、React、Vue.js 任一一種框架技術」的條件，所以很多 team 認為，你只要懂其中一個，切換成其他的也不會太慢！)，以下有些資訊供參考：

• The State of JavaScript Frameworks, 2017
• Front-end Frameworks – Worldwide Usage
• 中譯 the state of JavaScript 2017

另外前端不斷發展，很多常見的 UI 功能都被元件化，甚至被建構為 CSS framework。這些 framework 各自有各自的設計風格，新學習 CSS 的人，要自己去刻這些豐富的 UI 元件非常非常很累人，也沒有相關經驗去設計，很花時間去學習與調整。最知名的當然屬 bootstrap、Semantic UI 等，現階段就任一挑選符合自己喜歡的去使用吧：

• Awesome-css-frameworks

其他

• npm：JS 有著非常多優秀的 open source library，開發前端時，一定會用到很多第三方的library。這個時候就需要工具來對這些 library 做「套件管理」。就直接學 npm 吧，init、install、scripts等指令弄熟(另一套管理工具，yarn 先別管了)。
• webpack：「前端」有著各式各樣的檔案、資源(.js, .css, jpg, png ...)，要人工去管理這些檔案是很累人且不可靠的。要處理這樣的議題就是靠「bundler(打包工具)」來處理，bundler蠻多套的，其中webpack 比較常被推薦使用(但設定起來不容易)。
• git：目前做版本控制、協同開發最廣泛用的工具應該就是 git (保哥 - 30 天精通 Git 版本控管)，至少要把 add、commit、branch、checkout、clone、rebase、pull、push、merge 等指令弄熟弄懂，並且找一套 git gui 來使用。
• github：其實不是 github 重要，有很多公司各自架的平台。只是 github 是最好接觸的一種線上代碼托管。學習 github 幫助未來你與其他同事協同合作。懂得怎麼提(操作) pull request、看 issue。
• develop flow：弄懂 git flow、github flow (阮一峰 Git 工作流程)，這方面的知識會大大幫助你跟其他工程師的協同開發。

project＊＊＊

　　做個「project」實戰才是學習「程式語言」的最佳途徑，光看文件跟 syntex 是很空泛的，「做 Project 時，才是真正在學習(階段)」這句話一點也不為過。尤其對於此領域是新手的朋友，實作一定是必要的學習途徑（在家裡自己就能實際實作某專業領域，這也許是軟體開發容易被其他領域的朋友跨界進來的理由之一）。此外，有「project」能 demo，能夠大大提升獲得 interview 的機會(提高個 60% 不是問題、headhunter 也看很兇)！那此時問題就來了，「我要做什麼 project」，所以這邊我想提幾個點供思考、參考（我知道，在此階段的朋友，「題目」不好想）：

• 不要大　：這個「小project」只是要 demo 技術能力而已，不是要做出產品賣給其他人。千萬不要把功能想「多」了，主軸(feature)一個就夠了，重點是「完整」。這一個 feature 功能完整嗎？有沒有 bug、完善 README 讓別人一眼就能看出重點、coding style、file structure、系統架構清楚嗎？等等。還會需要時間做很多細節工，所以千萬「不要大」，有其他時間或者真的有很想實踐的功能時，才考慮多家 feature。或者直接做第２個 project。
• 不要創新：不要去想「新的應用、創新等等」！這不是「startup」，只是要 demo 技術能力而已，不要去想著說我的題目「沒有特色」之類的，只要意識自己朝這邊打轉，立刻停止思考。你要做的方向是，多去逛逛幾個大網站的功能(應用)，看看這些網站有哪些「小！功能」你能夠參考、抽出來，依此為主題，用自己所學的幹一個出來。
• 展示　　：站在 interviewer 的角度思考，他們才沒時間在那邊把你的 project 下載下來、install、跑起來玩勒。所以ㄧ定要弄好展示，程式碼上 github、README 清楚的說明主題 or 功能、用到的技術、線上 demo 環境、功能操作截圖等等。

為了個給範例，把我個人當時初次踏入 react 的例子拿出來了，囧 這個 糟糕 的東西，就請別 噓 了。它確實讓我學習了並且一放上去後，interview 的機會確實變很多了。就是這樣一個小作品！

• flameddd/react_stocks

題外話，我覺得可以大膽地說出自己在這領域上的程度，例如當時我在找 react 相關職缺時，我都有標注或者口頭說明，「react 方面我是自學，沒有實戰經驗。」這樣表達完全沒有問題，因為對方看上的是你基礎能力＋學習能力、解決問題的能力與態度。

面試

　　各家面試的方式不一樣，這方面也只能盡量準備，尤其是 JS 上機考(甚至考 leet code 題目)。試著弄懂網路上的題目，很多題目是該語言的基本 senses 。這些題目能幫助你更了解這些技術的議題或本質，所以要試著上網 google 「前端面試」跟「frontend interview」(鎖定在過去一年內)的文章來看看。中文的搜尋我剛剛看過一下，很多還包含「心得分享」，是非常好的參考。英文搜尋比較多是「題目」

• 前端面試：也很多文章，自己搜 keyword 看看吧。
• 前端面试手册：html、css、JS 的都要看
• frontend interview

另一重點是「心態調整」，就算面試考差了，不要氣餒！每間公司要的人、測驗的方式不一樣，甚至很多公司面試不上機考 code，遇到就當學習吧（遇到就學習）。

社群

　　善用社群，當你學習遇到困難時、沒有方向時，嘗試具體描述你的問題、附上程式碼(上 github, codepen)。社群上都會有人幫忙的，單單丟些關鍵字給你，就能協助你找到方向了！不要怕發問、不要怕問的問題太淺。依我的觀察，只要你自己有試著學習過、消化過的問題，無論是多小的問題，社群上都超多熱心朋友願意給予建議的。不只是程式問題、職場規劃、文化，各種你真的想了解的。

• FB javascript.tw
• FB Front-End Developers Taiwan
• FB f2e.taipei
• FB reactjs.tw
• FB Angular Taiwan
• FB vuejs.tw
• line 群 JavaScript/Node.TW
• line 群 HTML/CSS 從入門到撐下去
• line 群 Happy-javascript
• line 群 Node.js 從開始到不放棄

No No No 104, 1111

　　這一點可能是我個人主觀，但我越來越覺得對工程師而言 104、1111 不是好的選擇。改用其他平台（我自己用 linkedIn (很多 HR 在上面找人，好好整理履歷，很多 HR 會傳訊息來。) ），甚至當你 ready 時，好好整理履歷、project 後，去 fb群、line群上問問，說自己想找工作，問問其他朋友有沒有剛好有缺。(去社群、line群問的效果真的很好，至少你能馬上有回饋)

• ref: 【海外求職懶人包】找工作只會用數字銀行？我用這些網站成功跳槽到海外

結論

　　這麼多東西？是的，modern frontend 目前就是這麼回事(還有很多東西是實作時一定會碰到的，我都不列了，避免資訊過多)，事實上為了處理 real word 就是這麼複雜，前後端都一樣。上面所列的東西都是「相輔相成」的，沒有先後順序之分。如果你看完這篇 and 其他人的討論建議後，你認同這些方向。那我這邊的結論是

結論是：「朝 project 學習」

0. 再看一次 refs。
1. 學習 HTML、CSS、JS。(邊學邊往下步驟做)
2. 選定一個 framework，去照著官網基礎教學做一次。
3. 找一個 framework demo 從頭照做(抄)一次（不是 copy & past 喔！！）。用「XXX 實作」或「XXX example」的key word 去找資源參考。如：
   • vuejs examples
   • reactjs examples
   • angular-realworld-example
4. 應用上面所學的東西建構你的 project，此時應該會涵蓋有：
   • npm 管理套件
   • git 版本管理(每次 update 都透過 add commit 吧，甚至拆 branch 出去然後 merge 回來。這點可能很難被「看見」，但你這樣開發，也是熟悉 git 的途徑。)
   • github 管理託管
   • 打包工具處理前端資源(我不確定 ng、Vue 的bundler是不是用 webpack，要查查 @彭勝宇 Angular 跟 Vue.js 也是用 webpack 沒錯)
   • 應用 JS framework
   • restful
   • css framework 建議使用(for 美化、省時、也向 css framework 學習 等理由)
   • 清楚明瞭的展示 project。
   • 線上 demo (AWS 之類的架一個吧)

朝這邊學習、朝這邊實作。當「project」完成時，很多東西都實作過一次了，也有個東西可以 demo。此時我相信投相關工作一定很有幫助。

refs

• The 2018 Web Developer Roadmap
• developer-roadmap/frontend.md

多嘴雜談，此路沒趣，大可換條路、換個風景

　　其實「新鮮人」想走「網頁程式」也是能想像的，因為「網頁(程式)」「第一眼」看起來算是比較親民的方向。但如果你接觸了一陣子，真的沒興趣、痛苦，那不訪稍微轉個角度，一樣很多需求、甚至更好。這邊隨想提幾個供聯想：

• iOS/Android ：App 也會被歸納在，廣泛談的前端。手持裝置未來會一直稱霸 client 端 device ，所以這邊的需求一定不會少，而方向就要朝 iOS/Android 開發來攻略了。
• 後端：backend roadmap (其實後端的議題範疇更廣，那也代表更有潛力學習與成長)。
• 挑主題：區塊鏈、VR、AR、大數據、AI，每個都是當紅炸子雞！買股票都會選股了，找工作當然也要挑領域。熱門的主題會有更多、更好的職缺、連動社群的活躍度，這些都是帶動個人職業發展的關鍵因素！
• 挑語言：有些人就是醉心於特定的思維、邏輯、文字與語言中，「程式語言」隨著「時(時期)」「事(欲解決的目標)」發展出數十種主流語言來解決特定問題。不訪拿 stackoverflow 2018 survey 當關鍵字去 google 看看，說不定找到你更有興趣的方向。

discussion response (update: 2018/06/11)

@Milky Wong 先了解他指的網頁程式是~
會員/電商/看不見的功能 -> 建議後端 nodejs/golang/php
頁面看得見的功能 ->前端 JS/ReactJS
動態 / 做好看 -> HTML +CSS3
網頁遊戲 -> JS/ HTML5
為了找工作而學 -> React JS 個人淺見~:)

有不少網友提出我這個問題，我對於「題目」的命題太過主觀了。我自己是寫 Web Application （對我提問的朋友，也是 react 活動認識的）所以就朝這些方向思考了。 @Milky Wong 提出依目標更具體的學習方向，是很好的參考點。若對此想更近一步了解的話，請去 FB 群上提問，上面這麼多 各領域的朋友才有辦法給你好的建議。

@Milky Wong 我自己是通常見議　先了解 html 標籤及關係就可以 然後再思考下一步 JS
所有前後端都是在操作html
工具太多反而很容易混亂，反而HTML ,JS本身很簡單
會以上基礎，再往那走都不是問題
給你參考~

@許明楷 個人覺得如果這篇寫給的對象是全新手的話還是對js HTML CSS 還是多著墨會比較好(能多放幾張圖說明會更好 講到 framework 我覺得對於全新手會完全沒有想像畫面 等到他們能使用HTML CSS js 寫出一個小作品之後 再來研究為什麼要使用前端框架
至少以我來說 我學生時候自己是看了半個月SPA的文章完全看體會不到精髓(可能資質駑鈍啦 是自己進了公司 看了公司的MVC系統 再回頭看SPA 才慢慢看懂 有點體會到 框架的好處

@陳光磊 我個人想法：
1.html, css, js, 先做看得見, 然後先求有能力可以現場直接寫靜態的html5 rwd app website, 學個切版觀念, 到這裡其實就能在台灣順利求職
2.下一步學著將上面那個導入既有CMS如Drupal, WordPress等, 因為在進入下一階段之前, 後台、後端和SEO基礎概念應該要弄懂, 看不見的php串連部份還是很重要, 這樣能達到目前大部份台灣傳產、中小企業的需求
3.既然看不見和看得見的都會一些, 在換工作前, 學著將網頁分層開發, 用VM/Container開始玩nodejs/webpack/react , 進入不停推自己入坑的自學階段, 做好個人的i18n demo website就可以全世界求職, 不再被台灣的低薪綁架(?

　　很多朋友都提出了「先碰」 html, css, js ，關於這點我覺得也是ＯＫ。而我上面所提的

1. 學習 HTML、CSS、JS。(邊學邊往下步驟做)
2. 選定一個 framework，去照著官網基礎教學做一次。

　　背後的學習態度是：Sometines you got to run before you can walk.

圖片來源

此為學習方式、方向議題。有時候硬著頭皮上，慢慢倒著回來理解，也是一種學習手段。不過本文其中一個關鍵字為「學習路徑」，加上這麼多人提議「先碰」「html, css, js」，所以各位可以認真考量此建議。當「框架」真的讓你卡死時，先回來先碰「html, css, js」。碰到什麼程度？一樣是刻一個頁面所用到的方法、屬性你大多都能認識的程度。

• html template free 先用這樣的 key word 找 template 下來造著練一次看看，這樣對熟習 html, css 有幫助。

「VM/Container」先別碰！這是個好方向，但不是網頁設計、前端的主要知識面（唯一比較有牽扯到的是開發環境、正式環境、部署等議題）。

「Drupal、WordPress」、「php」別碰。我知道這些套件目前為止還是有很大的需求市場，但已經不是目前主流熱門追逐的方向了(可以自己去 LinkedIn 搜 frontend or 前端 的職缺看看)，其他網友的建議也都直接建議了 js and 框架。 @陳光磊 提的建議方向是針對「目前大部份台灣傳產、中小企業的需求」，這個就是我不希望你走的方向。這些公司就是對「前端、網頁設計」沒有追求，「前端、網頁設計」對他們不值錢。你朝這邊走，未來在這些公司很難借助工作環境來 push 自己的能力。

「SEO」建議等後續自己工作上有需求再 study ，有些公司可能會要這方面需求的，你真的有興趣在先 study 吧。