[解說] 什麼是前端工程師? What is front end engineer?

前言
網路上有許多文章解說,什麼是前端工程師,我跟我朋友這樣解釋:『Html, CSS, javascript只要會這些,就可以了!』,許多人的第一個直覺就是『做網站的』。沒錯!我是做網站的,但我是做網站的前端!(還是做網站的…)
因此興起個人寫一篇人人都看得懂人人都可以輕鬆瞭解什麼是網站前端工程師。

網站前端工程簡介
前(Front)端(end)工程(Engineer),網站前端構成三要素*Html, CSS, Javascript *,以下以美女圖例解說。

Html + CSS +  Javascript = 

[![](http://2.bp.blogspot.com/-ziaS4HrD0v4/TcrmwvBOMlI/AAAAAAAALuk/WC34OU2ZhnU/s1600/20101225224313612.gif)](http://2.bp.blogspot.com/-ziaS4HrD0v4/TcrmwvBOMlI/AAAAAAAALuk/WC34OU2ZhnU/s1600/20101225224313612.gif)
[素材來源](http://yutou.52vz.com/article/html/897.html)
呈現的頁面及互動方式必須:
1. 容易讓使用者接受及使用
2. 與使用者互動良好
3. 增加使用者黏著度
**** []()** ** **HTML + CSS = **
[![](http://3.bp.blogspot.com/-cn1rAD-LdxA/Tcrl_-DKF6I/AAAAAAAALug/VF01Cyy_t8M/s320/2011-05-12_033941.jpg)](http://3.bp.blogspot.com/-cn1rAD-LdxA/Tcrl_-DKF6I/AAAAAAAALug/VF01Cyy_t8M/s1600/2011-05-12_033941.jpg)
[素材來源](http://blog.xuite.net/facewall/blog/44816661)
將Javascript抽離之後,雖然外觀乍看之下並無差異,但是少了許多互動,會讓使用者體驗降低,**但是抽離javascript之後**還是可以保持基本的操作。
** ** **HTML = **
[![](http://2.bp.blogspot.com/-b4ob6wRiuqI/TcroV8FjdDI/AAAAAAAALuo/27QDnMnG1xQ/s320/2011-05-12_033953.jpg)](http://2.bp.blogspot.com/-b4ob6wRiuqI/TcroV8FjdDI/AAAAAAAALuo/27QDnMnG1xQ/s1600/2011-05-12_033953.jpg)
[素材來源](http://blog.xuite.net/facewall/blog/44816661)
抽離CSS之後,剩下就是原有架構。
1. 亮麗的外觀不見了
2. 使用者直接關掉視窗了
3. 連我都快看不下去了!威~
以上**三種層次**的簡介,應該可以簡單瞭解HTML, CSS, Javascript 之間互相之間的關係,和對使用者體驗上的影響。
**網站前端工程師責任**
當然只有以上的瞭解是不夠的,我們會去更深入的瞭解深層的問題,所以我們會用透視的眼睛去看待眼前所看到的事物,就像是底下這張圖一樣。
[![](http://2.bp.blogspot.com/-MQan7_WgaZw/Tcrquy1wV5I/AAAAAAAALus/EizTwOEHycE/s1600/18231313.gif)](http://2.bp.blogspot.com/-MQan7_WgaZw/Tcrquy1wV5I/AAAAAAAALus/EizTwOEHycE/s1600/18231313.gif)
[素材來源](http://www.webjx.com/photoshop/psbase-10830_5.html)
在檢視的過程當中,大致分為底下幾個層級:
1. 亮麗的外觀不見了(CSS抽取)
2.檢視互動的原理(Javascript運作和資料交換模式)
3. HTML 格式(tag 使用符合w3c標準)
4. 標籤命名(CSS id, class命名規則)
5. 後端搭配應用
.
.
.
.
.
.
.
種類繁多不及備載,總之前端工程不只是看亮麗的外表,更深一層的含意,就是…
[![](http://1.bp.blogspot.com/-wYl1mP9fcmE/TcrsQI5C_-I/AAAAAAAALuw/azYqP5hHZ9w/s400/00016c9487ce0db748cc39.jpg)](http://1.bp.blogspot.com/-wYl1mP9fcmE/TcrsQI5C_-I/AAAAAAAALuw/azYqP5hHZ9w/s1600/00016c9487ce0db748cc39.jpg)
[素材來源](http://www.chinadaily.com.cn/hqyl/2010-07/27/content_11055338.htm)
**我已經看透你了!**
** **
**結語**
相信看到這邊,應該對於前端工程有了一點點瞭解,網站前端工程全部的細節都會經過數次的檢視,讓許多問題被發現,在製作網站的過程中不斷的要求自己,如何讓成品更好,讓使用者感受更佳,在效能與呈現上取得平衡點。如果對於網站前端有興趣,歡迎一起來討論,前端(宅)的世界是豐富又有趣的。
相關文章:
[World Wide Web Consortium (W3C)](http://www.w3.org/)
[Welcome to the CSS Naked Day website!](http://naked.dustindiaz.com/)
[什么是Web前端工程师?](http://hi.baidu.com/372179111/blog/item/a73e4863b47fb8690c33faf8.html)
[不斷 Remix 的挑戰 & 徵求 F2E 一枚](http://www.josephj.com/entry.php?id=332)
[WAI-ARIA 介紹之一](http://blog.othree.net/log/2010/10/10/introduction-to-wai-aria-1/)

CaesarChi

Web developer, focus on website fullstack, special JavaScript, and love sharing developing experience and communicate with developers. http://about.me/clonn