如何成為一名優秀的web前端工程師

九哥發表於2013-12-20

來源:王子墨的部落格

程式設計之道無遠弗屆,御晨風而返。———— 傑佛瑞 · 詹姆士

我所遇到的前端程式設計師分兩種:

第一種一直在問:如何學習前端?

第二種總說:前端很簡單,就那麼一點東西。

我從沒有聽到有人問:如何做一名優秀、甚至卓越的WEB前端工程師

如何成為一名優秀的web前端工程師

 

何為:前端工程師

前端工程師,也叫Web前端開發工程師。他是隨著web發展,細分出來的行業。

Web前端開發技術主要包括三個要素:HTML、CSS和JavaScript!

它要求前端開發工程師不僅要掌握基本的Web前端開發技術,網站效能優化、SEO和伺服器端的基礎知識,而且要學會運用各種工具進行輔助開發以及理論層面的知識,包括程式碼的可維護性、元件的易用性、分層語義模板和瀏覽器分級支援等。

隨著近兩三年來RIA(Rich Internet Applications的縮寫,中文含義為:豐富的因特網應用程式)的流行和普及帶來的諸如:Flash/Flex,Silverlight、XML和伺服器端語言(PHP、ASP.NET,JSP、Python)等語言,前端開發工程師也需要掌握。

前端開發的入門門檻其實很低,與伺服器端語言先慢後快的學習曲線相比,前端開發的學習曲線是先快後慢。

HTML 甚至不是一門語言,他僅僅是簡單的標記語言!

CSS 只是無型別的樣式修飾語言。當然可以勉強算作弱型別語言。

Javascript 的基礎部分相對來說不難,入手還算快。

也正因為如此,前端開發領域有很多自學成“才”的同行,但大多數人都停留在會用的階段,因為後面的學習曲線越來越陡峭,每前進一步都很難。

Web前端技術有一些江湖氣,知識點過於瑣碎,技術價值觀的博弈也難分伯仲,即全域性的系統的知識結構並未成體系,這些因素也客觀上影響了“正統“前端技術的沉澱!而且各種“奇技淫巧”被濫用,前端技術知識的傳承也過於泛泛,新人難看清時局把握主次。因此,前端技術領域,為自己覓得一個靠譜的師兄,重要性要蓋過專案、團隊、公司、甚至薪水。

另一方面,正如前面所說,前端開發是個非常新的職業,對一些規範和最佳實踐的研究都處於探索階段。

總有新的靈感和技術不時閃現出來,例如CSS sprite、負邊距佈局、柵格佈局等;

各種JavaScript框架層出不窮,為整個前端開發領域注入了巨大的活力;

瀏覽器大戰也越來越白熱化,跨瀏覽器相容方案依然是五花八門。

為了滿足“高可維護性”的需要,需要更深入、更系統地去掌握前端知識,這樣才可能建立一個好的前端架構,保證程式碼的質量。

隨著手持裝置的迅猛發展,帶動了 HTML5行業標準的快速發展。web領域的技術,大概有10年都沒有大的更新了!

現在市場很需要優秀的、高階的前端工程師。

一方面是因為這是一個比較新的細分行業,而且前端程式設計師大都自學一部分,知識結構不繫統;另一方面,大學裡面沒有這種課程,最最重要的是:北大青鳥這類培訓機構也沒有專門的前端工程師的培訓課程!!

吳亮在《JavaScript 王者歸來》第一張的序裡面說:大多數程式設計師認為 Javascript 過於簡陋,只適合一些網頁上面花哨的表現,所以不願花費精力去學習,或者以為不學習就能掌握。

實際上,一門語言是否指令碼語言,往往是她的設計目標決定,簡單與複雜並不是區分指令碼語言和非指令碼語言的標準。

事實上,在指令碼語言裡面,Javascript 屬於相當複雜的一門語言,他的複雜度即使放在非指令碼語言中來衡量,也是一門相當複雜的語言!

Javascript 的複雜度不遜色於 Perl 和 Python!

如何學習前端知識? 

我們生活在一個充滿規則的宇宙裡面。社會秩序按照規則執行,計算機語言幾乎全部是規則的集合。計算機前輩們定義規則,規則約束我們,我們用規則控制資料。大部分時候,對資料的合理控制,來自於你對規則的掌握。

學習 HTML,CSS 應該先跟著書仔細、紮實的學一遍。然後就需要做大量的練習,做各種常規的、奇怪的、大量的佈局練習來捆固、理解自己的知識。

而學習 Javascript 首先要知道這門語言可以做什麼,不能做什麼,擅長做什麼,不擅長做什麼!

如果你只想當一個普通的前端程式設計師,你只需要記住大部分 Javascript 函式,做一些練習就可以了。

如果你想當深入瞭解Javascript,你需要了解 Javascript 的原理,機制。需要知道他們的本源,需要深刻了解 Javascript 基於物件的本質。

還需要 深刻了解 瀏覽器宿主 下 的 Javascript 的行為、特性。

因為歷史原因,Javascript一直不被重視,有點像被收養的一般! 所以他有很多缺點,各個宿主環境下的行為不統一、記憶體溢位問題、執行效率低下等問題。

作為一個優秀的前端工程師還需要深入瞭解、以及學會處理 Javascript 的這些缺陷。

那麼一名優秀的、甚至卓越的 前端開發工程師的具備什麼條件

首先,優秀的Web前端開發工程師要在知識體系上既要有廣度和深度!做到這兩點,其實很難。所以很多大公司即使出高薪也很難招聘到理想的前端開發工程師。技術非黑即白,只有對和錯,而技巧則見仁見智。

在以前,會一點Photoshop和Dreamweaver的操作,就可以製作網頁。

現在,只掌握這些已經遠遠不夠了。無論是開發難度上,還是開發方式上,現在的網頁製作都更接近傳統的網站後臺開發,所以現在不再叫網頁製作,而是叫Web前端開發。

Web前端開發在產品開發環節中的作用變得越來越重要,而且需要專業的前端工程師才能做好。

Web前端開發是一項很特殊的工作,涵蓋的知識面非常廣,既有具體的技術,又有抽象的理念。簡單地說,它的主要職能就是把網站的介面更好地呈現給使用者。

其次,優秀的Web前端開發工程師應該具備快速學習能力。Web發展的很快,甚至可以說這些技術幾乎每天都在變化!如果沒有快速學習能力,就跟不上Web發展的步伐。前端工程師必須不斷提升自己,不斷學習新技術、新模式;僅僅依靠今天的知識無法適應未來。Web的明天與今天必將有天壤之別,而前端工程師的工作就是要搞清楚如何通過自己的Web應用程式來體現這種翻天覆地的變化。

說到這裡,我想起了一個大師說過的一句話:對於新手來說,新技術就是新技術。

對於一個高手來說,新技術不過是就技術的延伸。

再者,優秀的前端工程師需要具備良好的溝通能力,因為前端工程師至少都要滿足四類客戶的需求。

1、產品經理。這些是負責策劃應用程式的一群人。他們會想出很多新鮮的、奇怪的、甚至是不可是實現的應用。一般來說,產品經理都追求豐富的功能。

2、UI設計師。這些人負責應用程式的視覺設計和互動模擬。他們關心的是使用者對什麼敏感、互動的一貫性以及整體的好用性。一般來說,UI設計師於流暢靚麗、但並不容易實現的使用者介面,而且他們經常不滿前端工程師造成 1px 的誤差。

3、專案經理。這些人負責實際地執行和維護應用程式。專案管理的主要關注點,無外乎正常執行時間、應用程式始終正常可用的時間、效能和截止日期。專案經理追求的目標往往是儘量保持事情的簡單化,以及不在升級更新時引入新問題。

4、終端使用者。指的是應用程式的主要消費者。儘管前端工程師不會經常與終端使用者打交道,但他們的反饋意見至關重要。終端使用者要求最多的就是對個人有用的功能,以及競爭性產品所具備的功能。

Yahoo 公司 ,YUI 的開發工程師 Nicholas C. Zakas 認為:
前端工程師是電腦科學職業領域中最複雜的一個工種。絕大多數傳統的程式設計思想已經不適用了,為了在多種平臺中使用,多種技術都借鑑了大量軟科學的知識和理念。成為優秀前端工程師所要具備的專業技術,涉及到廣闊而複雜的領域,這些領域又會因為你最終必須服務的各方的介入而變得更加複雜。專業技術可能會引領你進入成為前端工程師的大門,但只有運用該技術創造的應用程式以及你跟他人並肩協同的能力,才會真正讓你變得優秀。

————————————

關於書籍:

HTML、CSS 類別書籍,都是大同小異,在噹噹網、卓越網搜尋一下很多推薦。如果感覺學的差不多了,可以關注一下《CSS禪意花園》,這個很有影響力。Javascript 的書籍 推薦看老外寫的,國內很多 Javascript 書籍的作者對 Javascript 語言瞭解的都不是很透徹。

這裡推薦幾本 Javascript 書籍:

初級讀物:

《JavaScript高階程式設計》:一本非常完整的經典入門書籍,被譽為JavaScript聖經之一,詳解的非常詳細,最新版第三版已經發布了,建議購買。

《JavaScript王者歸來》百度的一個Web開發專案經理寫的,作為初學者準備的入門級教程也不錯。

中級讀物:

《JavaScript權威指南》:另外一本JavaScript聖經,講解的也非常詳細,屬於中級讀物,建議購買。

JavaScript語言精粹》:Yahoo大牛,JavaScript精神領袖Douglas Crockford的大作,雖然才100多頁,但是字字珠璣啊!強烈建議閱讀。

《高效能JavaScript》:《JavaScript高階程式設計》作者Nicholas C. Zakas的又一大作。

《Eloquent JavaScript》:這本書才200多頁,非常短小,通過幾個非常經典的例子(艾米麗姨媽的貓、悲慘的隱士、模擬生態圈、推箱子游戲等等)來介紹JavaScript方方面面的知識和應用方法。

高階讀物:

《JavaScript Patterns 》:書中介紹到了各種經典的模式,如建構函式、單例、工廠等等,值得學習。

《Pro.JavaScript.Design.Patterns》:Apress出版社講解JavaScript設計模式的書,非常不錯。

《Developing JavaScript Web Applications》:構建富應用的好書,針對MVC模式有較為深入的講解,同時也對一些流程的庫進行了講解。

《Developing Large Web Applications | 開發大規模Web應用:不僅有JavaScript方面的介紹,還有CSS、HTML方面的介紹,但是介紹的內容卻都非常不錯,真正考慮到了一個大型的Web程式下,如何進行JavaScript架構設計,值得一讀。

要做優秀的前端工程師,還需要繼續努力:《高效能網站建設指南》、《Yahoo工程師的網站效能優化的建議》、“YSLOW”效能優化建議、《網站重構》、《Web開發敏捷之道》、“ jQuery 庫”、“前端框架”、“HTML5”、“CSS3”…… 這些都要深入研究!

 

萬事開頭難!如果你能到這個境界,剩下的路自己就可以走下去了。

人們常說:不想當裁縫的司機,不是個好廚師。

如果單純只是學習前端程式語言、而不懂後端程式語言(PHP、ASP.NET,JSP、Python),也不能算作是優秀的前端工程師。

在成為一個優秀的前端工程師的道路上,充滿了汗水和辛勞

 

—— 王子墨  寫於Hong Kong,Kowloon

2012年10月28日 20:18

本文用到的參考資料:

1、What makes a good front end engineer?

2、Best Practices for Speeding Up Your Web Site

 

相關文章