⑴ 如何成為前端工程師
一、技術的必須的
作為一名最基礎的前端工程師你必須掌握HTML、CSS和JavaScript。三者必須同時精通,類似我字樣對前端知識一知半解的,一遇到問題就停下工作就四處搜索解決方案的,首先就算不上一個合格的前端人員。像我這樣的如果當了前端工程師那工期肯定是不能保證的。合格的前端工程師第一要學會的就是在沒有任何外來幫助的情況下(包括搜索引擎),能夠完成大多數任務。
以下知識點是作為一個前端工程師必須了解和熟悉的:
DOM結構——兩個節點之間可能存在哪些關系以及如何在節點之間任意移動。
DOM操作——怎樣添加、移除、移動、復制、創建和查找節點。
事件——怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別。
XMLHttpRequest——這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。
嚴格模式與混雜模式——如何觸發這兩種模式,區分它們有何意義。
盒模型——外邊距、內邊距和邊框之間的關系,IE < 8中的盒模型有什麼不同。
塊級元素與行內元素——怎麼用CSS控制它們、它們怎樣影響周圍的元素以及你覺得應該如何定義它們的樣式。
浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。
HTML與XHTML——二者有什麼區別,你覺得應該使用哪一個並說出理由。
JSON——它是什麼、為什麼應該使用它、到底該怎麼使用它,說出實現細節來。
產品經理——這些是負責策劃應用程序的一群人。他們能夠想像出怎樣通過應用程序來滿足用戶需求,以及怎樣通過他們設計的模式賺到錢(但願如此)。一般來說,這些人追求的是豐富的功能。
UI設計師——這些人負責應用程序的視覺設計和交互模擬。他們關心的是用戶對什麼敏感、交互的一貫性以及整體的好用性。他們熱衷於流暢靚麗但並不容易實現的用戶界面。
項目經理——這些人負責實際地運行和維護應用程序。項目管理的主要關注點,無外乎正常運行時間——應用程序始終正常可用的時間、性能和截止日期。項目經理追求的目標往往是盡量保持事情的簡單化,以及不在升級更新時引入新問題。
最終用戶——當然是應用程序的主要消費者。盡管我們不會經常與最終用戶打交道,但他們的反饋意見至關重要;沒人想用的應用程序毫無價值。最終用戶要求最多的就是對個人有用的功能,以及競爭性產品所具備的功能。
前端工程師
SVG/Canvas/VML
D3/Raphaël/DataV
知識管理/總結分享
溝通技巧/團隊協作
需求管理/PM
交互設計/可用性/可訪問性知識
編譯原理
計算機網路
操作系統
演算法原理
軟體工程/軟體測試原理
D2/WebRebuild
NodeParty/W3CTech/HTML5夢工廠
JSConf/滬JS(JSConf.cn)
QCon/Velocity/SDCC
JSConf/NodeConf
YDN/YUIConf
MongoDB/CouchDB
HTML5/CSS3
響應式設計
Zeptojs/iScroll
V5/Sencha Touch
PhoneGap
jQuery Mobile
CSRF/XSS
ADsafe/Caja/Sandbox
類庫模塊化
業務邏輯模塊化
文件載入
CommonJS/AMD
YUI3模塊
LABjs
SeaJS/Require.js
壓縮合並
文檔輸出
項目構建工具
YUI Compressor
Google Clousure Complier
CleanCSS/UglifyJS
JSDoc
Dox/Doxmate
make/Ant
GYP
Grunt
Yeoman
數據結構
OOP/AOP
原型鏈/作用域鏈
閉包
函數式編程
設計模式
Javascript Tips
JSPerf
YSlow 35 rules
PageSpeed
HTTPWatch
DynaTrace』s Ajax
高性能JavaScript
HTTP1.1
ECMAScript3/5
W3C/DOM/BOM/XHTML/XML/JSON/JSONP
CommonJS/AMD
HTML5/CSS3
jQuery/Underscore/Mootools/Prototype.js
YUI3/Dojo/ExtJS
Backbone/KnockoutJS/Emberjs
Coding style
單元測試
自動化測試
JSLint/JSHint
CSSLint
Markup Validation Service
QUnit/Jasmine
Mocha/Should/Chai
WebDriver
IDE
調試工具
版本管理
VIM/Sublime Text2
Notepad++/EditPlus
WebStorm
Firebug/Firecookie
YSlow
IEDeveloperToolbar/IETester
Fiddler
Git/SVN
Github/Bitbucket/Google Code
HTML/HTML5
CSS/CSS3
PhotoShop/Paint.net
JavaScript/Node.js
JavaScript語言精粹
IE6/7/8/9
Firefox
Chrome/Safari/Opera
瀏覽器
編程語言
切頁面
開發工具
代碼質量
前端庫/框架
前端標准/規范
性能
編程知識儲備
部署流程
代碼組織
安全
移動Web
JavaScript生態
前沿技術社區/會議
計算機知識儲備
軟技能
可視化
後端工程師
Unix/Linux/OS X/Windows
SQL
MySQL/MongoDB/Oracle
C/C++/Java/PHP/Ruby/Python/…
編程語言
操作系統
數據結構
上述這些知識點都應該是你「想都不用想」就知道的東西。除了上述的前端知識,也還需學會至少一門後端編程語言,讓你自己學會如何與後端進行更好的交互。
很多前端工程師對一些庫非常的熟悉,jQuery,Bootstrap等,但是對於庫的熟悉並不能提現你的優秀,整整優秀的是那些理解庫背後的機制,特別是能夠徒手寫出一個自己的庫的人。
真正合格的前端工程師是能實現具體的功能要求,而優秀的前端工程師需要解決的問題是尋找一個最優的解決方案。
二、溝通很重要
優秀的前端工程師需要具備良好的溝通能力,因為你的工作與很多人的工作息息相關。在任何情況下,前端工程師至少都要滿足下列四類客戶的需求。
不要在沒有作出評估之前就隨便接受某項任務。你必須始終記住,一定先搞清楚別人到底想讓你干什麼,不能簡單地接受「這個功能有問題」之類的大概其的說法。而且,你還要確切地知道這個功能或設計的真正意圖何在。「加一個按鈕」之類的任務並不總意味著你最後會加一個按鈕。還可能意味著你會找產品經理,問一問這個按鈕有什麼用處,然後再找UI設計師一塊探討按鈕是不是最佳的交互手段。要成為優秀的前端工程師,這種溝通至關重要。
那麼,前端工程師應該最關注哪些人的意見呢?答案是所有這四類人。優秀的前端工程師必須知道如何平衡這四類人的需求和預期,然後在此基礎上拿出最佳解決方案。由於前端工程師處於與這四類人溝通的交匯點上,因此其溝通能力的重要性不言而喻。如果一個非常酷的新功能因為會影響前端性能,必須刪繁就簡,你怎麼跟產品經理解釋?再比如,假設某個設計如果不改回原方案可能會給應用程序造成負面影響,你怎麼才能說服UI設計師?作為前端工程師,你必須了解每一類人的想法從何而來,必須能拿出所有各方都能接受的解決方案。從某種意義上說,優秀的前端工程師就像是一位大使,需要時刻抱著外交官的心態來應對每一天的工作。
專業技術可能會引領你進入成為前端工程師的大門,但只有運用該技術創造的應用程序以及你跟他人並肩協同的能力,才會真正讓你變得優秀。
三、提升無止境
優秀的前端工程師應該具備快速學習能力。推動Web發展的技術並不是靜止不動的,這些技術幾乎每天都在變化,如果沒有快速學習能力,你就跟不上Web發展的步伐。你必須不斷提升自己,不斷學習新技術、新模式;僅僅依靠今天的知識無法適應未來。Web的明天與今天必將有天壤之別,而你的工作就是要搞清楚如何通過自己的Web應用程序來體現這種翻天覆地的變化。
四、前端開發知識架構
參考鏈接:
http://www.cn-cuckoo.com/2010/01/10/nicholas-c-zakas-talk-about-what-makes-a-good-front-end-engineer-1356.html
JacksonTian/fks · GitHub
⑵ 優秀的web前端工程師需要具備哪些條件
在以前,會一點Photoshop和Dreamweaver的操作,就可以製作網頁。
現在,只掌握這些已經遠遠不夠了。無論是開發難度上,還是開發方式上,現在的網頁製作都更接近傳統的網站後台開發,所以現在不再叫網頁製作,而是叫Web前端開發。
Web前端開發在產品開發環節中的作用變得越來越重要,而且需要專業的前端工程師才能做好。
Web前端開發是一項很特殊的工作,涵蓋的知識面非常廣,既有具體的技術,又有抽象的理念。簡單地說,它的主要職能就是把網站的界面更好地呈現給用戶。
其次,優秀的Web前端開發工程師應該具備快速學習能力。Web發展的很快,甚至可以說這些技術幾乎每天都在變化!如果沒有快速學習能力,就跟不上Web發展的步伐。前端工程師必須不斷提升自己,不斷學習新技術、新模式;僅僅依靠今天的知識無法適應未來。Web的明天與今天必將有天壤之別,而前端工程師的工作就是要搞清楚如何通過自己的Web應用程序來體現這種翻天覆地的變化。
說到這里,想起了一個大師說過的一句話:對於新手來說,新技術就是新技術。對於一個高手來說,新技術不過是舊技術的延伸。再者,優秀的Web前端工程師需要具備良好的溝通能力,因為Web前端工程師至少都要滿足四類客戶的需求。
1、產品經理。這些是負責策劃應用程序的一群人。他們會想出很多新鮮的、奇怪的、甚至是不可能實現的應用。一般來說,產品經理都追求豐富的功能。
2、UI設計師。這些人負責應用程序的視覺設計和交互模擬。他們關心的是用戶對什麼敏感、交互的一貫性以及整體的好用性。一般來說,UI設計師侯傾向於流暢靚麗、但並不容易實現的用戶界面,而且他們經常不滿Web前端工程師造成1px的誤差。
3、項目經理。這些人負責實際地運行和維護應用程序。項目管理的主要關注點,無外乎正常運行時間、應用程序始終正常可用的時間、性能和截止日期。項目經理追求的目標往往是盡量保持事情的簡單化,以及不在升級更新時引入新問題。
4、最終用戶。指的是應用程序的主要消費者。盡管Web前端工程師不會經常與最終用戶打交道,但他們的反饋意見至關重要。最終用戶要求最多的就是對個人有用的功能,以及競爭性產品所具備的功能。
Web前端工程師是計算機科學職業領域中最復雜的一個工種。絕大多數傳統的編程思想已經不適用了,為了在多種平台中使用,多種技術都借鑒了大量軟科學 的知識和理念。成為優秀Web前端工程師所要具備的專業技術,涉及到廣闊而復雜的領域,這些領域又會因為你最終必須服務的各方的介入而變得更加復雜。專業技術可能會引領你進入成為Web前端工程師的大門,但只有運用該技術創造的應用程序以及你跟他人並肩協同的能力,才會真正讓你變得優秀。
⑶ 怎樣成長為一個優秀的 Web 前端開發工程師
據說,web前端工程師的薪資可以到8~15K,仔細看看下文,也許對你有幫助!
何為:前端工程師?
前端工程師,也叫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),也不能算作是優秀的前端工程師。
在成為一個優秀的前端工程師的道路上,充滿了汗水和辛勞。
⑷ 成為一名專業的前端開發人員,需要學習什麼
想成為一名專業的前端開發人員,必須掌握基本的Web前端開發技術,其中包括:CSS、HTML、SEO、DOM、BOM、Ajax、JavaScript等,在掌握這些技術的同時,還要清楚地了解它們在不同瀏覽器上的兼容情況、渲染原理和存在的Bug。在一名合格的前端工程師的知識結構中,網站性能優化、SEO和伺服器端的基礎知識也是必須掌握的。
必須學會運用各種工具進行輔助開發。除了要掌握技術層面的知識,還要掌握理論層面的知識,包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持,等等。可見,看似簡單的網頁製作,如果要做得更好、更專業,真的是不簡單。這就是前端開發的特點,也是讓很多人困惑的原因。如此繁雜的知識體系讓新手學習起來無從下手,對於老手來說,也時常不知道下一步該學什麼。
代碼質量是前端開發中應該重點考慮的問題之一。例如,實現一個網站界面可能會有無數種方案,但有些方案的維護成本會比較高,有些方案會存在性能問題,而有些方案則更易於維護,而且性能也比較好。這里的關鍵影響因素就是代碼質量。CSS、HTML、JavaScript這三種前端開發語言的特點是不同的,對代碼質量的要求也不同,但它們之間又有著千絲萬縷的聯系。
⑸ 如何成為前端工程師需要學哪些東西
第一部分:HTML。HTML是標記語言,也就是經常在代碼中看到的<p></p><div></div>。現在有了HTML5,提供了一些新的標簽語言,例如<header><nav><article><aside><footer>。這一部分最簡單,通常只需要2-3天學習就可以記住。
第二部分:CSS。css控制網頁的樣式,例如字體顏色、字體大小、行邊距等。css是盒模型,分為margin、padding、content和border。css樣式眾多,學起來需要很長時間,但在實際操作學習更快。學習這一部分,大概需要花費一周時間,以後在實踐中邊學邊用。
第三部分:JavaScript,前端的核心技術。js是一種腳本語言,用於實現網站中各種功能,例如表單提交、播放器等。這一部分學習是沒有盡頭的,想成為一名初級前端只要學五個月左右的時間,學習function的正確寫法即可,邏輯演算法需要長時間的研究。
第四部分:HTTP協議。HTTP協議使互聯網的基礎協議,也是網頁開發的必備知識。需要學習的時間不用太長,在學習JavaScript後會很快上手,需要時間大約為一周左右。
第五部分:三大框架,Angular/React/Vue,三種是目前主流框架。Angular全面,項目代碼多;Vue輕便,針對性解決問題,拿來就用,開發具有局限性。新手建議從Vue上手,再去了解React和Angular。