高貴的前端程序猿們:
如何在前端開發(fā)這種高精尖的技術(shù)領(lǐng)域找到心儀的工作?實現(xiàn)在咖啡館喝喝咖啡敲敲代碼就能升職加薪、買房買車、迎娶白富美走上人生巔峰的職業(yè)夢想?這篇《進(jìn)化論:從 0 到 100,前端猿茁壯成長的精神飼料史》,肯定能給你事業(yè)的加速動力。
前端開發(fā)工作已經(jīng)變的越來越復(fù)雜,僅僅是想羅列一份前端開發(fā)的學(xué)習(xí)列表就已經(jīng)是一件艱巨的工作。曾經(jīng)只要會編寫 HTML, CSS 和 Javascript 就是能夠找到一份前端開發(fā)工作的全部要求。而現(xiàn)在,web 開發(fā)遠(yuǎn)遠(yuǎn)不止是簡單編碼。因為我們的互聯(lián)網(wǎng)上有了更多的內(nèi)容,也因為有更多的人、更多設(shè)備可以訪問互聯(lián)網(wǎng), web 前端開發(fā)技能也就更多了。我們現(xiàn)在需要考慮的問題很多,比如載入時間,性能,不同的屏幕尺寸, 不同的輸入方式, build 系統(tǒng), 部署策略,還有如何組織好我們的代碼。
這還是想象中前端開發(fā)么?好吧其實只要你有熱情,這些還是很有趣的,現(xiàn)在就來仔細(xì)看看,一份前端開發(fā)的工作,到底需要你準(zhǔn)備些什么?
入行行頭:5 大硬件
請準(zhǔn)備好以下東西
一顆人類的大腦:智商在平均水平線以上即可一份強烈的渴望:我的代碼要可以運行在任何一個有瀏覽器的設(shè)備上。一臺筆記本電腦:不需要花費很多錢得那種,只要它可以運行 Windows, Mac OS X, 或 Linux 系統(tǒng)。當(dāng)然你也可以只用一臺臺式機,但是那樣就不能帶著它坐在咖啡館里…一個文本編輯器:可以推薦的比如 Atom,Visual Studio Code, TextMate, 它們都有在 Mac OS, Windows 的免費版本,什么還有 Sublime, WebStorm? 啊,那些都很流行,不過需要需要一筆不少于 70 美元的花費…一個**:這個大家都懂的,我就不解釋了
初級資質(zhì)要求
一些專業(yè)基礎(chǔ)
你需要學(xué)會瀏覽器能理解的三大語言:HTML, CSS, Javascript – 神圣的三位一體!
非常重要的一點是,一定要理解這三大語言后再去學(xué)習(xí)別的,確保知道怎樣在各種尺寸的屏幕上排列好你的網(wǎng)頁,怎樣在一個按鈕被按下后 do something!
一些很有用的學(xué)習(xí)資源
Codeacademy: interactive, code-along tutorials (this site is the bomb btw)Web Development for Beginners: article from webplatform.org.MDN:https://developer.mozilla.org/en-US/docs/Web
中級進(jìn)階路徑
一旦掌握了三大語言,就可以開始學(xué)習(xí)專業(yè)的開發(fā)流程啦:
Command line:好吧,命令行也許都會,但是要掌握最基本的**作,熟悉怎樣配置你的環(huán)境,還有那些奇怪的 shell 腳本,因為你會經(jīng)常用到它們。CSS 已經(jīng)不夠用了,我們有了 CSS 的預(yù)處理:Sass, LESS。知道如何搭建一個 build 系統(tǒng):Gulp 或 Grunt 這類的構(gòu)建任務(wù)腳本器,編譯 LESS 成 CSS, concatenating Javascript, minify 壓縮靜態(tài)資源, 選一個異步或同步的方式加載它們,第二一個好的 build 系統(tǒng)要能自動做到那些,包括一個本地的 web 服務(wù)器用于測試代碼。代碼版本管理,git。在 github 上分享你的代碼!部署! 讓你的網(wǎng)站上線??梢哉乙粋€免費的服務(wù)提供商,比如 heroku.com, https://pages.github.com
這些幾乎就是現(xiàn)代前端開發(fā)者會用到的工具和技術(shù),好了,你現(xiàn)在可以成為一個前端開發(fā)工程師了。
高級炸裂裝備
你已經(jīng)能夠為你的朋友的業(yè)務(wù)搭建一個網(wǎng)站了,簡潔的排版,高清大照片,你成功了,它甚至在你的手機都看著很棒。那么還有什么值得學(xué)的?
把你的網(wǎng)站和一個內(nèi)容管理系統(tǒng) (CMS)集成在一起。一個 CMS 能夠讓你通過用戶界面增、刪、改、組織你的內(nèi)容,不需要任何代碼。這就是那些博客網(wǎng)站如何工作的。比如免費的 WordPress,去熟悉一個開源的 CMS 吧,會很有用的。
學(xué)習(xí)怎樣搭建一個 CMS,意味著你講要熟悉一個服務(wù)器端的語言,比如 Node.js, 或 PHP,第二你還會想要知道怎樣和數(shù)據(jù)庫打交道,比如 MySql 或者 MongoDB。
來熟悉一種 Javascript 框架吧,這樣你可以真正的搭建一個交互出色的 web 應(yīng)用,那真的很重要,比如 Angular, React, Ember。只要挑一個你喜歡的,但是一定要精通它。
Javascript design patterns,javascript 也有設(shè)計模式? 是的,讀一下吧。
突破天際的大招
溝通技巧!你需要和你的小伙伴們溝通,他們是你的 coder 伙伴,你的老板,你的用戶,你的….stackoverflow.com, 有問題找 stackoverflow,擴展一下人脈把,上 meetup.com, 在博客上寫一些你的學(xué)習(xí)體驗, 在 Gitgub 貢獻(xiàn)一下你的 Pull request。
界面設(shè)計和用戶體驗設(shè)計 UI/UX design,前段開發(fā)的小伙伴需要具備基本的 UI/UX 設(shè)計知識。
搜索優(yōu)化,要知道怎樣提高網(wǎng)站的搜索排名,更容易被人們搜索到。
CSS 過度效果,給你的按鈕寫一個 hover 的 CSS 動畫,還有你的從右邊滑入的導(dǎo)航菜單也需要一個平滑的動畫。
關(guān)于性能,讓你的網(wǎng)站盡可能快的被加載,減少 DOM 的 reflow 和 repaint **作,防止?jié)L動性能瓶頸,優(yōu)化 Javascript, 讀一讀這個吧 google web developer fundamentals。
用一些測試框架來實現(xiàn) Javascript 單元測試,比如 Ja**ine,QUnit。
持續(xù)集成 Continuous integration (CI),知道怎樣配置一套和伙伴們一起使用的自動測試和部署的工具,比如 CircleCI, Travis CI, Jenkins.
超好用的其他加成技能
↓↓↓這些并非必須,但能幫你脫穎而出:
用 CSS3, SVG, Canvas API 實現(xiàn)動畫。
后端開發(fā), Node.js
最后:去找工作吧!
有了技能是不夠的,你需要能展示它們,你還能干的是:
搭建一個小網(wǎng)站,公開你的 gitub 代碼庫,確保你的代碼和文檔清楚漂亮,還有一份 README去 meetup.com 找你的老板或者投資人吧,開一個博客,申請一個 linkedin 帳號因為 web 技術(shù)總是在變化,最后,即使找到了一份稱心的工作,還是需要 stay motivated, 你需要時常去下面這些地方轉(zhuǎn)轉(zhuǎn):CSS Tricks,SitePoint,**ashing Magazine當(dāng)然還有些像 CSDN 這樣中文社區(qū),小編綜合來說遇到任何難題,社區(qū)里有總有樂于助人的。保持好的職業(yè)態(tài)度:Stay humble, and build cool shit
一、職業(yè)方向**
第一,只有確定好自己的職業(yè)方向,才能做好職業(yè)規(guī)劃。在我看來,做WEB前端技術(shù)能夠找到的職業(yè)方向有以下幾種:
(1)資深WEB前端工程師
這個方向算是一個WEB前端最基本的選擇了,在國外,很多老外都能夠把自己的專業(yè)做到極致,能一輩子就在一個專業(yè)領(lǐng)域不斷學(xué)習(xí)和積累。主要在于內(nèi)因和外因 兩方面,內(nèi)因是老外通常思想比較簡單直接,容易一直專注于一個領(lǐng)域;外因是國外的環(huán)境很好,能夠良好的支撐這樣的職業(yè)發(fā)展道路。反觀國內(nèi),從內(nèi)因來 講,WEB前端技術(shù)人員還是蠻浮躁的,通常會因為WEB前端知識的更新速度太快而覺得學(xué)習(xí)起來辛苦,最終轉(zhuǎn)向后臺或其他道路。從外因來講,WEB前端人員 沒有獲得公平的待遇,可能從HTML頁面制作就開始并沿襲下來的,從來WEB前端人員都比后端人員低一等,貌似前端就是“淺顯”的代名詞、后端就是“深 奧”的代名詞,這也直接造就了前端人員的收入無法和后端人員媲美,同時直接影響到前端人才市場的活躍程度。另一方面,前端的技術(shù)入門較容易,造成另一個極 端情況:人員泛濫、人才稀缺。我想對所有的WEB前端工程師說:面包總會有的,要耐得住寂寞!我個人比較推薦這個職業(yè)發(fā)展方向,因為,在這個方向下,只要 足夠耐心、厚積薄發(fā),成功的概率是非常高的。同時,這是一條最單純的路,我們更多的是花費精力在技術(shù)的鉆研上,而不是辦公室政治等其它瑣事。
(2)資深WEB架構(gòu)師
說功利點兒,我喜歡這個方向,既兼顧了工作的單純性、又能夠減少實際Coding的工作量能騰出更多時間鉆研技術(shù)。在國內(nèi),WEB前端工程師遇到較多的情況是總是反復(fù)編寫著同樣的代碼,總是面對著同樣的技術(shù)和產(chǎn)品,容易感覺枯燥。由于我們擁有最為廣泛的WEB相關(guān)知識沉淀,使得我們更加容易成為一名架構(gòu) 師。這個職業(yè)發(fā)展方向不如第一種來得平滑,主要是作為一名架構(gòu)師不得不學(xué)習(xí):后端技術(shù)、DBA、Platform等內(nèi)容,而這種學(xué)習(xí)通常需要實際**刀做項 目,不是自己在家里寫兩個Demo就好的,這就勢必會遭遇一段時間的陣痛期。雖然不是很平滑,但是,對于一個大局觀好、悟性好、知識面廣的前端工程師,我 推薦你們努把力,走一條光榮的架構(gòu)師之路吧。
(3)自己創(chuàng)業(yè)
其實,自己創(chuàng)業(yè)是最好的道路、也是成功率最低的道路,挑戰(zhàn)和機遇并存。這里,作為一個前端技術(shù)人員,需要將自己的視野更多放在行業(yè)的動態(tài)、產(chǎn)業(yè)鏈的動態(tài)、 相關(guān)產(chǎn)品領(lǐng)域的動態(tài),把關(guān)注細(xì)節(jié)的優(yōu)勢繼續(xù)保持,同時,增強自己把控一個產(chǎn)品乃至一個公司命運的能力。但是,這條道路和技術(shù)之路稍有分歧,后續(xù)將不再贅 述。
(4) 轉(zhuǎn)崗管理或其他
由于這條職業(yè)道路和WEB前端技術(shù)之路關(guān)系不大,故而,這里不做過多討論,但是,無論是否走上這條道路,我覺得對于任何技術(shù)之路,更好的大局觀、更廣泛的 視野是良好發(fā)展的必備條件,擁有良好的大局觀和更廣泛的視野別無他法,只能不斷的進(jìn)行知識的橫向拓展和積累,同時,多在橫向拓展知識的時候進(jìn)行實踐,把知 識變成技能。
二、職業(yè)發(fā)展目標(biāo)
我都有一個最終的目標(biāo),在這個目標(biāo)之上,我們需要給自己制定一系列學(xué)習(xí)和成長計劃,制定的方法如下:
第一、梳理知識架構(gòu);
梳理知識架構(gòu)的目的在于,我們要了解清楚,哪些技術(shù)是前置、哪些技術(shù)是后繼,那些技術(shù)是深度、哪些技術(shù)是廣度,按照這兩個維度梳理好知識架構(gòu)之后,我們才能準(zhǔn)確地制定清晰的成長目標(biāo)、高效的成長計劃。
第二、分解目標(biāo);
我認(rèn)為,大抵可分解為三個階段,包括:起步階段、提升階段、成型階段。這三個階段分別對應(yīng)著不同的目標(biāo):
起步階段:
1、基本知識的掌握
在我們梳理的知識架構(gòu)中,按照我們分析的兩個維度里最前置的、最淺顯的部分,作為打基礎(chǔ)的階段,必須要在這個過程中更多投入到實踐中去,我們通常做的多了、熟練了,就認(rèn)為這部分知識和內(nèi)容掌握了。
2、常用工具的掌握
對于常用工具的掌握應(yīng)該掌握一些有大公司或?qū)I(yè)團隊背景的流行工具,這些工具的熟練掌握能夠提升專業(yè)度、職業(yè)度,同時,能提升我們的工作效率。我們只有在 檢驗自己對于知識和技能熟練程度的時候,才會自虐式的用Notepad去編寫頁面、css和腳本等內(nèi)容。
3、溝通技巧的掌握
通常做技術(shù)的人會被**為“不善溝通”的人,這是為什么呢?究其原因,主要是因為多跟程序和代碼打交道,跟人的溝通較少導(dǎo)致。這種時候我們要特別注意增加 和人溝通的機會,著重提升這塊兒的能力。另一方面,我們通常被稱為“不懂溝通技巧”的人。作為一個技術(shù)人員,包括我自己,似乎天生就有一些難以接受挑戰(zhàn)的 缺陷。在國內(nèi),我們的技術(shù)人員通常都是自己制定方案、自己執(zhí)行方案,在執(zhí)行過程中又缺乏相關(guān)產(chǎn)品、交互設(shè)計等人員的溝通,大多是在自己的思路貫徹下進(jìn)行開 發(fā),久而久之,我們習(xí)慣于信任自己的觀點、在自己的視角看問題,對于挑戰(zhàn)總是百般地“據(jù)理”力爭。我們需要更多提升的是,如何在對方的視角看問題、如何在 用戶的視角看問題。
4、良好的開發(fā)習(xí)慣
開發(fā)習(xí)慣是養(yǎng)成的,一旦有不好的習(xí)慣,對于將來去修正帶來的將是很大的麻煩,我們在培養(yǎng)良好開發(fā)習(xí)慣一定要從起步時做起,例如:寫代碼之前先分析、先寫文 檔、先寫注釋。定義變量最好能用直接可理解的語義,最好是拼音,別整英文,尤其是生僻單詞,將來自己忘了還要開金山詞霸。文件最好有有意義的文件夾命名來 管理,文件名最好有意義,需要版本號的最好能和項目版本號一同更新……等等。
提升階段:
1、高級技術(shù)的掌握
在提升階段對于知識和技能掌握,我們需要從梳理好的知識架構(gòu)中選擇更深一層次的技術(shù)進(jìn)行學(xué)習(xí),選擇之前,我們先通過類比或預(yù)估的方法,衡量自身學(xué)習(xí)的難點,以學(xué)習(xí)難點和自己最不感興趣的部分為主。這樣推薦大家的原因是:這個階段我們興趣正濃,已經(jīng)度過了苦澀的起步階段,到達(dá)了興奮的提升階段,我們要用興趣和興奮去挑戰(zhàn)最困難的部分,在我們信心受挫和興趣濃厚之中找到平衡。同時,輔以其他的深層次知識一起學(xué)習(xí)和研究。
2、產(chǎn)品思想的學(xué)習(xí)
沒有正確的產(chǎn)品思想,很難設(shè)計出良好的程序,無論從界面、交互,還是接口、邏輯,不能夠理解產(chǎn)品、理解用戶需求,我們會給自己造成很大的麻煩,例如:我們 千辛萬苦用最新技術(shù)、最復(fù)雜的實現(xiàn)做出的功能,卻得不到使用者或領(lǐng)導(dǎo)、同事的認(rèn)可。為了使我們的工作和學(xué)習(xí)更加**、避免無用功,我們需要不斷的學(xué)習(xí)產(chǎn) 品的思想,只有理解了產(chǎn)品的思路,我們才知道用我們的技術(shù)去輸出什么。
3、各種框架的學(xué)習(xí)
框架是我們提高工作效率的優(yōu)秀手段,對于框架的學(xué)習(xí)是成長必經(jīng)之路。我們學(xué)習(xí)框架的路線通常應(yīng)該是:使用——》分析——》個性化定制——》模仿編寫自己的框架。只有大量的使用,才能明白設(shè)計框架者在設(shè)計背后的思路,只有了解到設(shè)計的思路,才能做正確全面的分析,只有正確全面的分析才能支撐我們?nèi)ζ洳眉艋?擴展,只有經(jīng)過實際分析、修改別人的框架,才有可能寫出優(yōu)秀的、自己的框架。學(xué)習(xí)通常的路線是:學(xué)習(xí)、理解、模仿、創(chuàng)造。
4、富客戶端應(yīng)用的學(xué)習(xí)
隨著帶寬和計算機性能的提升,以及WEB2.0的如火如荼,富客戶端應(yīng)用充斥著互聯(lián)網(wǎng),如果你不懂得富客戶端應(yīng)用,你就不能稱之為一個合格的前端技術(shù)人 員??梢园凑眨篎las**—>Flash編程—>Flex—>Air—>Silverlight動畫—>Silverlight編程 的步驟學(xué)習(xí),先學(xué)Flash后學(xué)Siverlight的原因,一來Silverlight還不太成熟,二來,實際Silverlight借鑒了很多 Flash的思想,最好在學(xué)習(xí)的時候不要本末倒置。
5、各種網(wǎng)絡(luò)協(xié)議的學(xué)習(xí)
WEB前端技術(shù)就是云上的技術(shù),云的協(xié)議有N種,我們應(yīng)該著重學(xué)習(xí):TCP/IP,UDP,HTTP,POP3,**TP這幾種協(xié)議,在開發(fā)WEB前端應(yīng) 用過程中,這些協(xié)議是我們的技術(shù)的載體,有時候決定了我們的應(yīng)用是否能實現(xiàn)、有時候決定了我們的應(yīng)用是否高性能,同時,這些協(xié)議還是我們和后端技術(shù)交互的 重要手段,這些協(xié)議就像是密碼字典,幫助我們把后端傳輸過來的密文解釋成我們前端技術(shù)能夠理解的明文。
6、程序設(shè)計
這個階段我們需要學(xué)習(xí)OO、UML、設(shè)計模式、設(shè)計方法……,我們要讓技術(shù)開發(fā)工作變成有目的性、有計劃性,并且,這些目的和計劃必須有理論的支持,這 樣,我們設(shè)計出來的程序才能夠更優(yōu)秀、我們的開發(fā)才更**,這樣,我們的技術(shù)才能有所提升。為什么要學(xué)習(xí)程序設(shè)計呢?主要是,就算我們不用Flash的 ActionScript編寫程序的前端邏輯,我們至少要把我們自己的Javascript函數(shù)、包的定義規(guī)劃起來,避免將來自己或他人維護(hù)代碼的時候出 現(xiàn)問題。程序設(shè)計能力,在技術(shù)人員仍然被看作是程序員的這個年代,是灰常、灰常重要滴。
成型階段:
到了這個階段,我也沒什么好說的了,如果能達(dá)到這個階段,就證明后續(xù)的成長之路是異彩紛呈的,是成為一個資深WEB前端工程師,還是成為一個資深WEB架 構(gòu)師,亦或其他,都要具體分析自身的特點和興趣所在。如果是資深的前端工程師,我覺得更重要的是去作新技術(shù)的研究,互聯(lián)網(wǎng)技術(shù)發(fā)展速度日新月異,不斷學(xué)習(xí) 新技術(shù),否則就被淘汰。此外,我建議在知識的廣度、深度方面最好能挑選一個自己最擅長和最感興趣的一兩個領(lǐng)域深入鉆研,不要挑太多,多而不精。如果是資深 的WEB架構(gòu)師之路,我建議要深入了解后臺技術(shù),這種深入了解一定要伴隨著實際的項目開發(fā),基本方法是:按照別人設(shè)計的架構(gòu)實現(xiàn)幾個Server—>自 己設(shè)計并實現(xiàn)幾個Server。
前端全棧:分node全棧和其他語言全棧,比如ror搞全棧是最早的,其他php、java也有,不過純前端的不過,在react,angular之前搞后臺還是可以的。所以前端全棧,我理解是等同于node全棧的。node本身是做后端的,但在前端工程化和BFF領(lǐng)域大放異彩,所以node全棧涵蓋了前端的方方面面,是比較合理的解釋。
大前端:更泛化的概念,移動互聯(lián)網(wǎng)時代開啟后,hybrid曾經(jīng)很火,基于h5和webview做跨端,確實是很理想的做法,但復(fù)雜交互搞不定,機器性能網(wǎng)絡(luò)等是硬傷,所以后來出現(xiàn)了rn和weex,整體還是前端寫法,所以hybrid里前端也是占了一定的開發(fā),結(jié)合之前前端和node的關(guān)系,綜合3者:1)app里的前端,2)前端,2)node全棧,統(tǒng)稱為大前端。這里的”大“含義是可以做的事兒的范圍更廣,觸達(dá)前后端移動端,對前端職責(zé)有明顯提升。隨著技術(shù)發(fā)展,基于electron的桌面開發(fā)也日進(jìn)流程,ott和iot等領(lǐng)域采用js也愈來愈多,所以只要和用戶直接觸達(dá)的端采用了前端技術(shù)開發(fā)的都涵蓋在大前端范疇內(nèi)。
前端工程師行業(yè)自然挺吃香,職業(yè)前景也非常不錯。越來越多的人涌入Web前端行業(yè),怕就加劇了整體市場的競爭,互聯(lián)網(wǎng)技術(shù)的更新升級也讓企業(yè)對于求職者有了更高的要求。所以,對一名前端工程師來說,提高自身的開發(fā)效率勢在必行。
1、使用正確的工具。正所謂“工欲善其事必先利其器”,擁有一些優(yōu)秀的、你知道如何更有效地使用的工具和裝備可以幫助你盡可能的高效完成工作。
2、善用Web開發(fā)框架。一個良好的Web開發(fā)框架,可以幫助你解決常見的Web開發(fā)問題,借助框架會節(jié)省你的時間以及提高項目的質(zhì)量。
3、建立一個代碼片段庫?;厥漳愕拇a,創(chuàng)建一個你最喜歡和經(jīng)常使用的代碼片段集,并確保代碼組織良好,可以被輕易搜索到。
4、沖刺式工作。不要連續(xù)工作幾個小時,這樣你的效率可能會下降,隨著時間的推移,你的工作品質(zhì)也會下降。
5、不斷學(xué)習(xí)。通過在自我提高上投入時間,要保持你的時間表靈活變化,超過規(guī)劃的工作,可能會一拖再拖。
6、做好工作規(guī)劃。當(dāng)你開始一個項目的工作,確保知道你對這個項目的期望。了解有關(guān)項目的某些內(nèi)容,可能會使你工作在正確的方向,而不至于在黑暗中摸索。
掌握以上方法,可以大大簡化你的Web開發(fā)流程,使你的職業(yè)發(fā)展有更好的前景。如果你想成為一個高薪Web前端開發(fā)工程師,你需要掌握專業(yè)的技能知識,掌握好的工作方法。
1、國家網(wǎng)絡(luò)技術(shù)水平考試由信息產(chǎn)業(yè)部國家信息化工程師認(rèn)證考**理中心命題委員會統(tǒng)一命題。主要針對計算機網(wǎng)絡(luò)設(shè)計、應(yīng)用、維護(hù)等方面內(nèi)容。
2、考試共分為五個等級,一至四級的考試分為知識水平考試和動手**作考試兩個部分。分別采用聯(lián)機考和隨機抽取方式進(jìn)行,五級考試則采用評審方式,每年限定通過數(shù)量。考生成績合格后,就可以獲得有信息產(chǎn)業(yè)部和美國國家系統(tǒng)工程師協(xié)會分別頒發(fā)的證書。
]]>