閱讀更多

編者按:很多人都想學編程。但是苦于沒有具體的步驟和指導。比如想找份前端開發的工作,卻不知道應該先學習什么再學習什么,也不知道該選擇什么樣的工具。因為經常被人問到類似的問題,全棧開發者Kamran Ahmed索性在github上制訂了一份現代前端開發的路線圖,并且用一篇文章對前端開發的整個學習過程進行了詳細解釋。感興趣的初學者不容錯過。

進入正題之前先交代一下我和這張路線圖的背景。過去5年我一直在進行全棧開發,目前是tajawal的首席工程師(我得有很多頭銜)。關注趨勢并且讓其他開發者訓練得當不僅是我的愛好也是我的工作職責。在如何跟上形勢方面我發現有很多新手(也包括一些有經驗的)都感到很困惑。2017年的時候我有很多朋友都發郵件給我尋求指導,他們想知道做這一行的話應該學些什么。所以為了避免自己老是要碰到這樣的麻煩同時也是為了幫助別人,我決定一勞永逸準備這些圖表,這樣只要有人問我時就把這些圖表的鏈接發給他們。所以這些圖表就是這么誕生的。

一開始他們只是想要一些工具的推薦,但是昨天我決定給他們一份更加結構化一點的東西,增加了細節并且設計成步驟的形式以便你可以更好地理解該選擇什么,按照什么樣的次序。

同時我還在制作后端和DevOps部分的路線圖,但是前端已經做好了,你可以看看下面。

在詳細介紹這份路線圖的不同部分之前,我先花點時間講講我的免責聲明:

這份路線圖的目的是讓你了解一下整體情況并且提供指導,如果你對接下來該學什么感到困惑的話。但并不鼓勵你用趕時髦的心態去學東西。你應該對為什么一項工具在一些情況下更適合有基本了解,并且要記住時髦的東西從來都不意味著就是最適合你要處理的工作的。

好了,下面開始吧——下面就是這份路線圖,但是本文的目的是依次解釋路線圖的每一個步驟。

你首先想要去做的第一件事是學習一些基礎,包括學習HTML、CSS的一點基礎知識,以及熟悉一下JavaScript的語法。

學習HTML基礎

HTML給你的網頁賦予了結構。它就像是人的骨架那樣讓你保持站立。首先你需要去學習語法以及它必須提供的一切。你的學習應該聚焦在下面這些東西上:

  • 學習HTML基礎,了解如何編寫語義HTML

  • 理解如何把網頁分成section(段落),以及如何正確組織DOM(文檔對象模型)

任務——一旦你學習了HTML基礎,至少要制作5個HTML網頁。我建議你隨便找一個網站,比如看看Github的檔案頁或者Twitter的登錄頁。然后把焦點放在恰當地組織內容上。出來的東西可能會很難看,但是暫時別擔心,把你的關注點放在恰當的結構上。

學點CSS

現在我們已經學會了如何給網頁準備好骨架,接下來就是在此基礎上添加一些皮膚讓它好看一點了。CSS——級聯樣式表就是用來美化你的HTML頁面的。

  • 首先要做的是學習語法,熟悉常見的CSS屬性。

  • 了解盒模型(box model),掌握如何利用Grid和Flexbox準備布局

  • 一旦學習完上面的,再學習以下通過媒體查詢把網站做成響應式的。

任務——一旦你掌握了基礎,接下來就應該設計上一步制作的HTML網頁。比方說如果你給Github檔案編寫了HTML頁面的話,現在是時候應用CSS來讓它的樣子看起來像實際的Github資料頁面一樣了。前面的那5個頁面都要拿來試一下。

學習JavaScript基礎

JavaScript能讓你的HTML頁面互動性更強。比方說你在網站上看過的所有那些幻燈片、彈出窗口以及廣播通知,以及在沒有重載頁面的情況下重載頁面的特定部分,這些都是用JavaScript做的。在這一步中,你將會學習JavaScript的基礎來為后面的旅程做好準備——

  • 學習這門語言的語法和基本機構。

  • 學習如何用JavaScript來操縱DOM,比方說如何從頁面移除一些元素,如何增加一些元素,增加和移除類,通過JavaScript應用CSS樣式等。

  • 完成之后再學習和理解諸如范圍、閉包、變量提升以及事件冒泡這樣的主題。

  • 學習如何用XHR或者Ajax生成HTTP調用。Ajax可以讓你在不需要重載網頁的情況下執行特定動作。

  • 學完之后接下來就要了解ES6+的所有新特性。ES6只是JavaScript的一個版本,里面給這門語言引入了大量有趣的更新,比如類、定義變量的多種方式,給數組增加了新的方法,字符串連接等。你們在網上找到的大部分文章都會用Babel來解析ES6,這其實是個轉譯器,可以將這門新的JavaScript轉換為舊的JavaScript,因為有一些舊版的瀏覽器不支持新版的JS。不過現在先不用擔心Babel,只需要了解相關概念,然后用到任何一種支持ES6的最新版瀏覽器上來練習一下就行。我們后面還會再繼續講ES6的。

現在你應該已經感覺到東西像是那么一回事了。如果你按照上面的步驟做下來的話應該鼓勵一下。這些是你剛剛學到的一些最重要的東西。

我應該學jQuery嗎?

曾經有一段時間每個人都對jQuery瘋狂,也有充分的理由;這是一個強大的庫,在JavaScript基礎上提供了一個封裝,讓你可以用兼容瀏覽器的方式執行任何東西。不過那些日子已經一去不復返,現在新項目用它已經不是很多了,但是仍然還有人在用。你不是一定要學它,但是這玩意兒的確很容易,如果你想看看的話還是有好處的。

練習時間

我已經說過很多次但是還是要再說一次,不練習的話你學不到任何東西。你可能隨時都會感覺自己已經理解了但是如果不練習的話很快就會忘掉。在按照這份路線圖去學習的時候,要確保盡可能多地去上手實踐。

繼續做些響應式網站,用JavaScript增加交互性。你可以添加任何感興趣的現有的網頁上去,但記住要利用上目前學到的一切

一旦你制作出了一些網站,接下來就是開始做真正的東西了。你可以到github上面找一些項目打開某些開源項目的pull請求。以下就是一些可以去嘗試的pull請求:

  • 增強UI,把任何演示頁做成響應式或者改進設計

  • 看看有什么開放的issue是你能夠解決的

  • 重構任何你認為自己可以改進的代碼

就像這個repo一樣,告訴他們你正在學習讓他們就你的PR以及可以如何加以改進提供反饋。

盡管我愿意推薦這個Github庫,但是這需要了解一點git的知識,所以這是可選的。你不必做這個但如果你做了的話,你會發現真的很有用——只要你開口你會驚訝地發現居然有那么多人愿意幫助你。那你也可以找到很多有關git的免費資源,比如試試這個

鼓勵自己一下

現在你已經學習了必要的基礎了。如果一切都學得不錯的話,你就可以去找份自由職業工作或者也許可以去試試能不能找份全職了。然而,如果你想有一份更好的職業的話,現在還不能停止腳步,因為還有很長一段路要走。

包管理器

在此之前,如果你要用到一些外部庫比如插件或者任何外部的桌面小部件的話,你得手工下載JavaScript和CSS文件并且將它們放到項目里面,然后那些庫或者插件發布新版本的時候,你又得下載更新的文件再放到你的項目里面,這是極其麻煩的事情。包管理器可以干掉這種麻煩。它們幫助你把外部庫和插件放到你的項目里面,這樣你就不用關心手工復制庫或者費事地在它們發布新版時更新文件的事情了。現在有yarn和npm了。這兩個幾乎是一樣的,都只是實現,你可以任選一個,一旦學會了使用其中一個,另一個自然也不成問題。

現在學以致用吧

在對包管理器有了基本了解之后,你就可以去安裝一些外部庫到你前面制作的一些網頁上了,比如安裝一些提示插件,當用戶點擊某個按鈕時顯示提示信息,或者創建一個登錄表單用一些表單驗證庫進行表單驗證,或者試試不同的選項看看如何安裝不同的版本。

記得要看看語義版本控制

CSS預處理器

預處理器以CSS默認不支持的功能豐富了后者。可選項有很多,包括Sass、Less、Stylus等等。要我選的話,我會選擇Sass。然而,PostCSS最近的發展勢頭也不錯,這屬于一個錦上添花的東西,有點類似于CSS的“Babel”。你可以拿來獨立使用或者在Sass的基礎上疊加。目前我建議你先學Sass,等后面有時間了再看看PostCSS。

CSS框架

你已經不再需要學習CSS框架了,然而如果你想學一個的話。我會推薦在Bootstrap、Materialize和Bulma里面選。但如果你要考慮它們的市場需求的話,我會選擇Bootstrap。

CSS組織

隨著你的應用不斷膨脹,CSS也開始變得混亂難以維系。有多種手段可以對你的CSS進行組織,讓它更好地應對伸縮性,比如OOCSS、SMACSS、SUITCSS、Atomic以及BEM。你應該了解它們之間的不同,但是我更偏好BEM。

構建工具

工具可以幫助你進行JavaScript應用的構建/打包以及開發。這一類包括了linter(代碼檢查)、task runner(自動構建)以及bundler(打包工具)。

對于自動構建,這個本來是是很多選項的,包括npm腳本、gulp、grun等等。不過這一次,既然webpack能夠處理gulp能做的大部分東西,所以只有自動構建中的npm腳本可以用來對webpack能做的任務進行自動化。你不需要學習Gulp,然而到后面如果你有點時間的話,可以去看看它能否對你的應用有所幫助。

至于linter,再次地也有很多選項,其中包括ESLint、JSLint、JSHint以及JSCS等。但是目前主要是ESLint用得多。

對于模塊打包工具,不同的選項包括Parcel、Webpack、Rollup、Browserify等。如果你必須選一個,目前你可以閉著眼睛選Webpack就是。Rollup也很常用但是主要建議用到庫上面,至于app,還是以webpack為主。所以現在你就先學習一下webpack吧,后面如果想的話再了解一下Rollup。

練習時間——做點什么

恭喜你!你現在可以稱自己為75%的現代JavaScript開發者了。現在繼續用你學到的東西做點什么出來。也許可以做個庫將來用到Sass和JavaScript上。然后用Webpack將Sass轉換成CSS,用babel轉換成ES6代碼。一旦你做完了再把它發布到Github和npm上。

選一個框架

在舊的路線圖中,這個部分往往是緊挨著基礎部分的,但是這次我改到放在Sass、構建工具和包管理器后面了,因為在框架中你全都會用上那些東西,如果不具備相應知識的話會嚇到你的。

框架也有好些選項。不過目前比較常用的是React、Vue和Angular。最近對React.js的需求越來越旺盛。然而,前面列的這幾個你隨便選一個都不會錯。我個人會選React或者Angular。不過特別說明一下,作為初學者你也許會發現相對而言Angular會容易點,也許是因為它支持幾乎一切立即可用的東西,比如支持延遲加載的強大路由器,支持攔截器的HTTP客戶端,依賴注入,組件CSS封裝等而不需要關心選擇外部庫的問題。不過React在社區方面無疑更有優勢,而且Facebook一直都在努力改進它。你需要確保的是不要因為什么東西火就選擇什么,要去google一下,對比一下,看看哪一個最適合你。

這兩個的比較以及我的個人體會我要留到下一篇文章再談了,不過既然這篇文章是談學習的,我就來講講如何找到Angular和React的學習曲線。

下圖中的學習曲線考慮了你已經具備TypeScript的知識,而且也懂了一些Rx.JS的基礎。至于這種假設的原因我會在將來的文章中解釋,不過主要是因為Angular提供的其中的一些即時可用的標準和關鍵功能。但這并不意味著React就是壞的,它們各自都有自己的地位,我以后會進一步細談。

你可以看看各自的學習曲線,看看哪個更適合你。

一旦你選擇了自己的框架,當然還有其他一些東西需要你學的。比方說如果你決定學React的話,你可能還得學Redux或者Mobx去了解狀態管理,具體選學什么要取決于你要做的應用的規模。Mobx適合中小規模應用,Redux更適合大規模應用。甚至你可能都不需要學,靠React的原生狀態管理就行了,如果你的app允許的話。

如果你選擇Angular,你就得用TypeScript(沒有它你也能開發出Angular應用,但是我們還是推薦你使用)和Rx.js,這些除了Angular應用以外在其他地方也能用得上。這都是非常強大的庫,也適合于函數編程開發。

如果你選了Vue.js的話,也許還得學習Vuex,這東西有點類似于Redux但是是給Vue用的。

需要注意的是,Redux、Mobx以及Rx.js都不是跟這些框架綁死到一起的,你也可以用到各種JavaScript應用里面。此外,如果你選擇了Angular的話,確保你用的是Angular 2+而不是Angular 1+。

練習時間

現在你已經知道了開發現代JavaScript應用所需的一切。現在就用你選擇的框架做點東西出來吧。你會在庫中的idea目錄找到一些點子;任選一個然后開始吧!

做完之后,再去看看如何衡量和改進性能。比方說可以看看Interactivity Time、Page Speed Index以及Lighthouse Score等。

漸進式Web應用

一旦完成了上述所有步驟,再來學習一下service worker以及如何制作漸進式web應用。

測試你的應用

應用測試有很多工具,各自的用途也不一樣。我本人經常是組合使用Jest、Mocha、 Karma及Enzyme。然而,在開始選擇工具之前,最好是首先理解有哪些不同的測試類型,看看所有的選項情況,然后從中再選擇最適合您需求的一個。

這里有一份很好的概括,你可以去看看。

靜態類型檢查器

靜態類型檢查器幫助給JavaScript增加類型檢查。你不需要學習這些,不過這些東西可以賦予你超能力,而且學習起來也很快,幾個鐘頭就行了。這方面主要有TypeScript?和?Flow。我喜歡TypeScript?,不過你可以兩個都看看,再選你喜歡的。

服務器渲染

目前為止,你所學到的技能應該足夠你找到一個“前端工程”的位置了。但且慢,你還可以更上一層樓。

你還可以在選定的任何框架內再學學服務器端渲染的知識。有不同的選項可選,這要取決于你用什么樣的框架。比方說如果你決定用React,最值得關注的選項是Next.js?和?After.js。如果是Angular,你可以選Universal。對于Vue.js,我們有?Nuxt.js。

這份路線圖可能還會有遺漏的地方,但是足以應付任何“前端工程”角色之所需。還要記住的是,關鍵是盡可能多地練習。一開始你可能會覺得很嚇人,總感覺自己沒有掌握,但這是正常的,慢慢你就會覺得自己變得越來越好。還有,陷入困境時別忘了尋求幫助,你會驚喜地發現有多少人愿意幫助你的,或者至少我愿意。

  • 大小: 487.3 KB
  • 大小: 834.4 KB
  • 大小: 43 KB
來自: 36氪
6
0
評論 共 0 條 請登錄后發表評論

發表評論

您還沒有登錄,請您登錄后再發表評論

相關推薦

  • 前端開發線路圖

    前端開發線路圖 轉自:現代前端開發路線圖從零開始,一步步成為前端工程師 1.學習HTML基礎 HTML給你的網頁賦予了結構。它就像是人的骨架那樣讓你保持站立。首先你需要去學習語法以及它必須提供的一切。你的學習應該聚焦在下面這些東西上: 學習HTML基礎,了解如何編寫語義HTML 理解如何把網頁分成section(段落),以及如何正確組織DOM(文檔對象模型) 2.學點CSS 現在我們已經學會了如...

  • 零基礎的前端開發初學者應如何系統地學習?

    零基礎學習web前端,看這篇文章就夠了! 純干貨! 小千整理了一套針對小白的web前端學習路線,通過本教程的學習,可以從零開始,一步步的掌握前端開發的各項相關技能,最終達到企業對初級前端開發工程師,中級前端開發工程師,高級開發工程師,全棧開發工程師等職位的要求。 WEB前端學習路線樹型圖 本學習路線涉及web前端知識點包含:HTML入門知識以及CSS基礎語法,javascript日常開...

  • 學Python后到底能干什么?網友:我太難了

    感覺全世界營銷文都在推Python,但是找不到工作的話,又有哪個機構會站出來給我推薦工作? 筆者冷靜分析多方數據,想跟大家說:關于超越老牌霸主Java,過去幾年間Python一直都被寄予厚望。但是事實是雖然上升趨勢,但是國內環境下,一時間是無法馬上就超越Java的,也可以換句話說:超越Java只是時間問題罷。 太囂張了會Python的人!找工作拿高薪這么簡單? https://edu....

  • 在中國程序員是青春飯嗎?

    今年,我也32了 ,為了不給大家誤導,咨詢了獵頭、圈內好友,以及年過35歲的幾位老程序員……舍了老臉去揭人家傷疤……希望能給大家以幫助,記得幫我點贊哦。 目錄: 你以為的人生 一次又一次的傷害 獵頭界的真相 如何應對互聯網行業的「中年危機」 一、你以為的人生 剛入行時,拿著傲人的工資,想著好好干,以為我們的人生是這樣的: 等真到了那一天,你會發現,你的人生很可能是這樣的: ...

  • Auto.JS實現抖音,刷寶等刷視頻app,自動點贊,自動滑屏,自動切換視頻

    Auto.JS實現抖音,刷寶等刷視頻app,自動點贊,自動滑屏,自動切換視頻 代碼如下 auto(); var appName=rawInput("","刷寶短視頻"); launchApp(appName); sleep("5000"); setScreenMetrics(1080,1920); toast("1023732997"); sleep("3000"); var num = 200...

  • 畢業5年,我問遍了身邊的大佬,總結了他們的學習方法

    我問了身邊10個大佬,總結了他們的學習方法,原來成功都是有跡可循的。

  • 推薦10個堪稱神器的學習網站

    每天都會收到很多讀者的私信,問我:“二哥,有什么推薦的學習網站嗎?最近很浮躁,手頭的一些網站都看煩了,想看看二哥這里有什么新鮮貨。” 今天一早做了個惡夢,夢到被老板辭退了。雖然說在我們公司,只有我辭退老板的份,沒有老板辭退我這一說,但是還是被嚇得 4 點多都起來了。(主要是因為我掌握著公司所有的核心源碼,哈哈哈) 既然 4 點多起來,就得好好利用起來。于是我就挑選了 10 個堪稱神器的學習網站,推...

  • Java校招入職華為,半年后我跑路了

    何來 我,一個雙非本科弟弟,有幸在 19 屆的秋招中得到前東家華為(以下簡稱 hw)的賞識,當時秋招簽訂就業協議,說是入了某 java bg,之后一系列組織架構調整原因等等讓人無法理解的神操作,最終畢業前夕,被通知調往其他 bg 做嵌入式開發(純 C 語言)。 由于已至于校招末尾,之前拿到的其他 offer 又無法再收回,一時感到無力回天,只得默默接受。 畢業后,直接入職開始了嵌入式苦旅,由于從未...

  • 大學四年,因為知道這些開發工具,我成為別人眼中的大神

    親測全部都很好用,自己開發都離不開的軟件,如果你是學生可以看看,提前熟悉起來。

  • 在三線城市工作爽嗎?

    我是一名程序員,從正值青春年華的 24 歲回到三線城市洛陽工作,至今已經 6 年有余。一不小心又暴露了自己的實際年齡,但老讀者都知道,我駐顏有術,上次去看房子,業務員肯定地說:“小哥肯定比我小,我今年還不到 24。”我只好強顏歡笑:“你說得對。” 從我擁有記憶到現在進入而立之年,我覺得,我做過最明智的選擇有下面三個: 1)高中三年,和一位女同學保持著算不上朋友的冷淡關系;大學半年,把這位女同學追到...

  • 這些插件太強了,Chrome 必裝!尤其程序員!

    推薦 10 款我自己珍藏的 Chrome 瀏覽器插件

  • Java基礎知識面試題(2020最新版)

    文章目錄Java概述何為編程什么是Javajdk1.5之后的三大版本JVM、JRE和JDK的關系什么是跨平臺性?原理是什么Java語言有哪些特點什么是字節碼?采用字節碼的最大好處是什么什么是Java程序的主類?應用程序和小程序的主類有何不同?Java應用程序與小程序之間有那些差別?Java和C++的區別Oracle JDK 和 OpenJDK 的對比基礎語法數據類型Java有哪些數據類型switc...

  • @程序員:GitHub這個項目快薅羊毛

    今天下午在朋友圈看到很多人都在發github的羊毛,一時沒明白是怎么回事。 后來上百度搜索了一下,原來真有這回事,畢竟資源主義的羊毛不少啊,1000刀刷爆了朋友圈!不知道你們的朋友圈有沒有看到類似的消息。 這到底是啥情況? 微軟開發者平臺GitHub 的一個區塊鏈項目 Handshake ,搞了一個招募新會員的活動,面向GitHub 上前 25萬名開發者派送 4,246.99 HNS幣,大約價...

  • 做了5年運維,靠著這份監控知識體系,我從3K變成了40K

    從來沒講過運維,因為我覺得運維這種東西不需要太多的知識面,然后我一個做了運維朋友告訴我大錯特錯,他就是從3K的運維一步步到40K的,甚至笑著說:我現在感覺自己什么都能做。 既然講,就講最重要的吧。 監控是整個運維乃至整個產品生命周期中最重要的一環,事前及時預警發現故障,事后提供詳實的數據用于追查定位問題。目前業界有很多不錯的開源產品可供選擇。選擇一款開源的監控系統,是一個省時省力、效率最高的方...

  • 完了!Python黃了! 80%的程序員:痛快!你怎么看?

    Python真的萬能語言? 在我的一個朋友看來,他堅信 Python 可以做任何事情。其實我是不服的,因為我在某網站看到有條評論:Python將要黃了!事實究竟如何? 這篇文章會揭開這個黑幕,讓程序員看清現實! PLPY 2月榜單 Python落下神壇? 當我們想了解一門編程語言好壞的時候,該通過什么方法? 其中最公正的一個方法就是看各大編程排行榜,從排行榜里看到趨勢、流行...

  • 我以為我學懂了數據結構,直到看了這個導圖才發現,我錯了

    數據結構與算法思維導圖

  • 技術大佬:我去,你寫的 switch 語句也太老土了吧

    昨天早上通過遠程的方式 review 了兩名新來同事的代碼,大部分代碼都寫得很漂亮,嚴謹的同時注釋也很到位,這令我非常滿意。但當我看到他們當中有一個人寫的 switch 語句時,還是忍不住破口大罵:“我擦,小王,你丫寫的 switch 語句也太老土了吧!” 來看看小王寫的代碼吧,看完不要罵我裝逼啊。 private static String createPlayer(PlayerTypes p...

  • Linux面試題(2020最新版)

    文章目錄Linux 概述什么是LinuxUnix和Linux有什么區別?什么是 Linux 內核?Linux的基本組件是什么?Linux 的體系結構BASH和DOS之間的基本區別是什么?Linux 開機啟動過程?Linux系統缺省的運行級別?Linux 使用的進程間通信方式?Linux 有哪些系統日志文件?Linux系統安裝多個桌面環境有幫助嗎?什么是交換空間?什么是root帳戶什么是LILO?什...

  • 和黑客斗爭的 6 天!

    互聯網公司工作,很難避免不和黑客們打交道,我呆過的兩家互聯網公司,幾乎每月每天每分鐘都有黑客在公司網站上掃描。有的是尋找 Sql 注入的缺口,有的是尋找線上服務器可能存在的漏洞,大部分都...

  • 總結了 150 余個神奇網站,你不來瞅瞅嗎?

    原博客再更新,可能就沒了,之后將持續更新本篇博客。

Global site tag (gtag.js) - Google Analytics 开心农场种蔬菜赚钱 捕鱼现金72注册送分 航天发展股票行情 来丫江西麻将 浙江快乐彩官网 欧冠四强 辽宁娱网棋牌大厅下载 白小姐精准一波中特 大富豪捕鱼游戏下载 中国传统麻将免费下 能赚钱的手机网游 意甲足球联赛排名榜 宝博棋牌app官网下载安装 35选7头奖几率 炒股手机开户 天天棋牌? 四不像肖期期中特