閱讀更多

編者按:很多人都想學編程。但是苦于沒有具體的步驟和指導。比如想找份前端開發的工作,卻不知道應該先學習什么再學習什么,也不知道該選擇什么樣的工具。因為經常被人問到類似的問題,全棧開發者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 條 請登錄后發表評論

發表評論

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

相關推薦

  • https://blog.csdn.net/iteye_3058/article/details/81343459

  • 如何成為一位合格的前端開發工程師 ——來自面試前端工作的思考

  • https://blog.csdn.net/weixin_34249678/article/details/88298454

    前端是做什么的? 前端工程師是互聯網時代軟件產品研發中不可缺少的一種專業研發角色。從狹義上講,前端工程師使用 HTML、CSS、JavaScript 等專業技能和工具將產品UI設計稿實現成網站產品,涵蓋用戶PC端、移動端網頁,處理視覺和交互問題。從廣義上來講,所有用戶終端產品與視覺和交互有關的部分,都是前端工程師的專業領域。 互聯網職位有哪些? PM:項...

  • 2018前端工程師成長路線圖

  • 個人前端學習路線圖與github優秀前端開發者的路線圖推薦

    1、個人目前學習的路線圖 2、github優秀前端開發者的路線圖推薦   打開github首頁,在搜索框輸入developer-roadmap,搜索github前端路線圖   選擇kamranahmedse/developer-roadmap擁有56.5k的星,足以證明這個路線受到廣大前端開發者的喜愛與推薦   選擇clone與down,下載可以慢慢研究了。 ? ?...

  • https://blog.csdn.net/hicoldcat/article/details/52061654

    1. 前言對于一名前端開發技術人員來說,需要學習的前端技術五花八門。各種庫,各種框架及UI層出不窮。在這篇博文中我會記錄我自己學習的路線。不一定是最好或者最合理,但卻是我自己實際走過的路線,僅供參考。我自己也會不斷更新,作為自己的技術打卡。

  • 前端小白向高級前端工程師進階之路

  • 高級前端工程師進階系列

    高級前端工程師之路1-知識體系和方法論 前端工程師和任何一個崗位一樣,想要由淺入深,從初級走向高級,不僅需要理論和實踐的大量積累,還需要方法論。有無方法論的區別就如同這句話:過去一年,有些人活了一年365天,而有些人只活了1天重復了365次。方法論的意義就是要告訴我們在同樣的時間維度下,時間在走,你的知識體系的廣度和深度也在不斷的加強。所以本文的關鍵詞就是知識體系和方法論。 知識體系 前端知...

  • 我就問,見過比這還有誠意的前端學習路線圖嗎?

    前端很火,想學習前端的人也多。作為過來人,知道自學的辛苦。所以制作這份學習路線圖的初心,就是讓想自學前端的小伙伴們有一份系統專業的學習資源和學習指導。 在為時將近兩個月的整理之后,就有了這份全面的前端學習資源大禮包!無論你是剛入門的小白,還是已經工作的前端開發者都能從中獲取到你想要的資料! ? 這份資源包含:學習路線圖、配套視頻+源碼+筆記、前端工具篇、前端經驗篇、前端面試篇等

  • 資深前端開發工程師該掌握什么?

  • https://blog.csdn.net/u011394136/article/details/49101069

    先附上一張網上廣為流傳的前端知識體系圖:前端知識體系從大圖中我們總結出: 優秀的Web前端開發工程師 要在知識體系上既要有 廣度 和 深度!應該具備快速學習能力。 前端開發工程師 不僅要掌握基本的Web前端開發技術,網站性能優化、SEO和服務器端的基礎知識,而且要學會運用各種工具進行輔助開發以及理論層面的知識,包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等。

  • 前端開發工程師做些什么?

    1、web前端開發工程師是做什么的 2、成為一名web前端開發工程師需要具備的條件 3、web前端開發工程師需要學習什么

  • https://blog.csdn.net/russell_tao/article/details/82377332

  • 如何成為前端開發工程師

    如何成為前端開發工程師首先看一下BAT公司的相應的招聘要求阿里巴巴——前端開發工程師崗位要求1、熟練使用各種 Web 前端技術,包括HTML(5)/CSS(3)/Javascript 等,并有相關的項目開發經驗或成果; 2、用過git,grunt或gulp等工具,最好有自己的github倉庫; 3、有基于Ajax 應用的開發經驗,有NodeJS/Java開發經驗,或者有移動端開發經驗;深刻理

  • 初級前端工程師必備

  • 如何成為一名優秀的web前端開發工程師?高級前端開發工程師需要哪些知識(技能)

    1. 如何成為一名優秀的web前端開發工程師?2. 高級前端開發工程師需要哪些知識(技能)?

  • 前端工程師如何定位自己等級層次

    崗位名稱 初級前端開發工程師 中級前端開發工程師 高級前端開發工程師 資深前端開發工程師 前端技術專家 層級 P3 P4(aliwork) P5 P6 P7 主要職責 1、完成前端的日常需求。???????????????? 2、根據視覺和交互原型的要求,實現htmldemo和交互效果。 3、傾聽客戶需求,在指導...

  • 網易微專業3個月從入門成為WEB前端工程師培訓課程

    網易微專業3個月從入門成為WEB前端工程師培訓課程百度云視頻

  • 初學者完全黑客教程 一步步成為黑客

    初學者完全黑客教程 黑客的精神態度是很重要的,但技術則更是重要。黑客的態度雖然是無可取代,隨著新科技的發明和舊技術的取代,這些工具隨時間在慢慢的改變。例如:以往總是會學會用機器碼寫程序,直到最近我們開始使用HTML。不過,在1996年末,當然,這是基礎的hacking技能。在1997年,理所當然的,你必須學會C。 但,如果你只是學一種語言,那么你不能算是一位黑客,了不起只能算是一個programmer。除此,你還必須學會學會以獨立于任何程序語言之上的概括性觀念來思考一件程序設計上的問題。要成為一位真正的黑客,你必須要能在幾天之內將manual內容和你目前己經知道的關連起學會一種新的語言。也就是說,你必會學還了C之外的東西,你至少還要會LISP或Perl(Java也正在努力的擠上這個名單; 譯者注: 我很懷疑這份名單)。除了幾個重要的hacking常用語言之外,這些語言提供你一些不同的程序設計途徑,并且讓你在好的方法中學習。 程序設計是一種復雜的技術,我沒辨法在這提供完整的學習步驟。但是我能告訴你一些在書本上和課堂上所沒有的東西(有很多,幾乎全部最好的黑客們都是自習而來的)。(a) 讀別人的程序碼;(寫程序,這兩項是不錯的方法。學習寫程序就像在學習寫一種良好的自然語言,最好的方法是去看一些專家們所寫的東西,然后寫一些你自己的東西,然后讀更多,再寫更多。然后一直持續,一直到你發展出一種屬于自己的風格和特色。要找到好的程序碼來看是很一件很困難的事,因為,對菜鳥黑客們而言,適于供他們閱讀和努力的大型程序的source數量很少。但這事己有了戲劇性的變化了; 現在免費的供應的軟件、程序設計工具和操作系統(大都公開提供 source,而且全都是由黑客們寫成的)到處可看。進入下一個主題。

  • 我為何選擇了web前端工程師

Global site tag (gtag.js) - Google Analytics