今天整理給你!前端工程師.後端工程師.全端工程師的超級比一比!

-


今天整理給你!前端工程師.後端工程師.全端工程師的超級比一比!




之前有一篇文章分析前端工程師和後端工程師,今天除了複習,又多了個"全端工程師"!

業界對於網站開發工程師的需求，一直沒有停止過，也吸引很多非本科系出身的同學想轉職到網站開發工程師。

但是常常聽到網站開發工程師還有分成「前端工程師」、「後端工程師」，還有綜合上述的「全站（full-stack）工程師」。

今天就來解惑：這三種聽起來超像的職位到底差在哪？我又該選哪種學習比較好上手？由於真的太多人有類似的問題，因此本篇文章會幫助你先了解網站開發的分工定義、技能需求，如此一來，才能幫助你找到適合自己的目標、讓你更有效率學習，更快達成轉職網站開發工程師的願望！


 前端工程師

 網站的「前端」是與用戶直接交互的部分，包括你在瀏覽網頁時接觸的所有視覺內容--從字體到顏色，以及下拉菜單和側邊欄。這些視覺內容，都是由瀏覽器解析、處理、渲染相關HTML、CSS、Javascript 文件後呈現而來。

技能與工具

 前端開發，就是要創造上面提到的網站面向用戶的部分背後的代碼，並通過建立框架，構建沉浸性的用戶體驗。為了實現這個目標，開發需要熟練運用下列語言、框架、工具庫——三大語言：HTML，CSS，和Javascript。

此外，掌握jQuery 和LESS 等工具庫也很重要，它們能幫助開發者以更高效的方式編碼；很多前端開發崗也要求Ajax 方法的使用經驗，它可以幫助你使用Javascript 在後台從服務器拉取數據，協助實現頁面的動態加載。

打個比方，前端工程師的工作專注於「房屋」裝修，而蓋房子的工作由後端開發者負責。通過一些專門的工具，前端開發者與設計師/用戶體驗分析師密切合作，幫助構建原型或是線框圖，參與產品開發到發布的全過程。

一些前端工程師甚至能準確定位影響用戶體驗的特定問題，並給出建議或是代碼解決方案，對產品設計帶來積極影響。在專業能力外，與其它團隊協作，以理解特定目標、需求、機遇，以及高效的執行力也非常重要。

這聽起來工作內容很多，但也回報豐厚。「我是一名技術人員，也是一名設計者，在數字平台上使用標記語言和代碼修改視覺元素並與之互動是很自然而有趣的體驗，」有八年前端開發經驗的Mikey Ilagan 說「這讓我能夠直接影響到用戶體驗，操縱應用和網站裡用戶所見並直接與之交互的元素，這非常棒！」

總之，前端開發者要為後端開發者搭建的「房屋」進行內部設計和裝修工作。裝潢風格由房屋所有者指定。Apptix 的產品市場負責人Greg Matranga 表示：「前端開發者有時更容易為他們的工作感到振奮，因為他們有更廣闊的空間發揮自己的創造力。」

 

後端工程師

 是什麼給網站前端提供支持？數據存放在哪裡？這就涉及後端內容了。網站後端包括服務器、應用還有數據庫。後端開發者構建並維護這些組件，為網站提供多方面支持。

由上圖可以看出，UDN 的讀者來源，大部分來自 Search （搜尋引擎）輸入特定關鍵字後，進到 UDN 的網頁；而東森新聞雲的讀者最多都是從 Facebook 等 Social 社群網站的連結進來。

 技能與工具

 為了讓服務器、應用、數據庫能夠彼此交互，後端工程師需要具有如下技能：

用於應用構建的服務器端語言：PHP, Ruby, Python, Java, .Net 等；

數據相關工具：My SQL , Oracle, SQL Server等；

PHP框架：Zend, Symfony, CakePHP等；

版本控制工具：SVN, CVS , Git 等；

還要熟練使用Linux 作為開發和部署環境。

後端開發者使用這些工具編寫乾淨、可移植、具有良好文檔支持的代碼來創建或更新 Web 應用。但在寫代碼之前，他們需要與客戶溝通，了解其實際需求並轉化為技術目標，制定最有效且精簡的方案來進行實現。

「我熱愛後端開發因為我喜歡操縱數據」，資深後端開發者就職於 Wildbit 的 JP Toto 說。「現在共有和私有 API 已變成移動設備、網站以及其它互聯繫統交換數據的必備通道。創建對大家有用的API 是我工作裡非常鼓舞人心的部分」。

 

全端工程師

 全端工程師，最初是 6 年多以前由 Facebook 帶動的概念。全棧的核心，是指這批開發者能夠承擔包括前端、後端在內的所有功能開發任務，他們擁有一個技能全家桶。

「能夠同時承擔服務器端和客戶端工作會為你帶來更多機會，」 Grovo 的全端工程師 Federico Ulfo 說「當然這也就意味著更多的挑戰。以廚藝作類比，掌握烹飪和烘焙都需要時間與經驗積累，同時掌握兩者要花費更多精力。照著菜譜做誰都可以，我此處所說的是做出真正美味東西的能力。」

技能與工具

 全端工程師也通常在服務器端進行編程工作，但他們熟練前端語言，能夠操縱網站面向用戶的部分。基本上可以形容他們是百事通。

全端工程師需要對 Web 架構的每一個層次都有足夠的了解：搭建和配置Linux 服務器，編寫服務器端API，利用客戶端Javascript 代碼驅動應用，將設計層面的東西轉化到實際的CSS 代碼。掌握並使用大量工具的同時，全端工程師需要敏捷地分配服務器端和客戶端任務，提供解決方案並對比不同方案的優劣。
相關文章：

想當前端工程師,入門前先來看看這篇重點整理!

前端工程師和網頁設計師看過來!-萬事從規劃流程開始

前端工程師課程再進化-Media Query的媒體特性(下篇) 

進入微軟面試前,履歷上你應該要先上Java課程!

跟Google人工智慧玩個圖片猜猜看的小遊戲!

暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~

人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？


這個網誌中的熱門文章

Python控制結構一點就通!(5)while迴圈

-
圖片
關於Python的while迴圈,它可以製造出那些效果?一步步跟著這篇走,剩下的你不用怕啦! 關於Python-while 迴圈 Python 的 if 條件判斷式【請參考上篇的 Python教學 ： Python控制結構2.if else條件判斷(1) 】，若評估為 True【請參考： Python控制結構1.布林值Boolean-True or False? 】 的話，就會執行一次；反之則不執行。 Python 的 while 迴圈跟 if 條件判斷式相似，但是不同的是，它不只執行一次。只要條件成立，它就會不斷地重複執行。就算是有其中一段代碼被評估為 False，下一段代碼仍會被執行。 while 迴圈構成，包含了 。 以下範例的 while 迴圈中有一個變數「i」， 初始值 為「1」； 更新值（又稱為調整值） 為「i+1」； 讓迴圈結束的條件 為「i <=5」。 這次 Python教學 給你以下範例，讓 i 的從初始值開始，程式每執行一次，i 就等於上一回合的數值再「+1」一次，直到 i 等於 5 為止停止，寫法如下： i = 1 #初始值 while i <=5: #讓迴圈結束的條件 print(i) i = i + 1 #更新值 (調整) 則結果為： 1 2 3 4 5 >>> while迴圈的「infinite loop(無限循環)」 Python 的 while 迴圈中，有一種被稱作「infinite loop(無限循環)」，當條件（為True）成立時，該程式就會永不停止地重複執行。 「infinite loop(無限循環)」的範例如下： while 7==7: print("這是無限循環迴圈") 結果，「這是無限循環迴圈」這行字就會不斷的重複顯示。 若你真的受不了，你可以 按鍵盤快速鍵「Ctrl-C」以阻止它繼續重複顯示。 以下也是無限循環迴圈的另一個例子，來看看它的結果如何吧！ x=1 >>> while x>0: print(x) x+2 結果馬上會跳出一堆數字，且不斷的在跳出中。後出來的數字，都是
閱讀完整內容

前端工程師絕不能搞錯的CSS中:逗號.空格的差別!

-
圖片
想成為前端工程師?那CSS中最基本的逗號.空格再搞錯,豈不是太不專業了! 有時在 HTML 中， 前端工程師 們會對同一個標籤給予兩個以上的 Class 名稱，如以下所示: < div class = " first second " > </ div > 對於這類有兩個以上的 Class 名稱的 HTML，其 CSS 選擇器可能會用以下的三種情況顯示。而聰明的你，分辨得出這些 CSS 有什麼不同嗎? /*1. 兩個 class 中有空格*/ .first .second /*2. 兩個 class 中沒有空格*/ .first.second /*3. 兩個 class 中出現逗號*/ .first,.second 對於 CSS 及前端工程師的初學者來說，上述三種 CSS 因為長得很像，所以經常傻傻分不清楚。究竟兩個 class 中間空格、沒空格、有逗號，到底差在哪裡? 別擔心，立刻講解給你聽：   1. 兩個 class 中有空格的例子：五個區塊中，階層必須是要在 first 區塊之下的 second 區塊，才會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間有空格的例子 by Tedutw ( @Tedutw ) on CodePen . 2. 兩個 class 中沒有空格的例子：五個區塊中， div class 名稱必須同時出現 first 與 second 才會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間無空格的例子 by Tedutw ( @Tedutw ) on CodePen . 3. 兩個 class 中有逗號的例子：五個區塊中，只要 div class 名稱中有出現 first 或是 second 的區塊，就會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間有逗號的例子 by Tedutw ( @Tedutw ) on CodePen . 註 : 以上三個範例的 HTML 碼都一樣 延伸閱讀： 前端工程師入門款小常識-CSS碼特性一下就上手! 
閱讀完整內容

網頁前端CSS必學兩屬性:display與visible

-
圖片
今天要介紹網頁前端中的兩個CSS屬性:display與visible屬性! 本篇介紹 網頁前端 排版的兩個 CSS 屬性：display 屬性與 visibility 屬性。 CSS ：display 屬性 display:block 對於 CSS 語法來說， 網頁前端 的每個元素都是一個矩形盒（rectangular box）模型。而使用「display」屬性，便可以決定「盒（box）」的呈現方式。 又「區塊元素（block element）」則會佔用可用寬度的最大值，前後有換行符。 以下範例分別顯示了是否有將<span>元素顯示為區塊元素（block element）的結果。 在下方的顯示視窗中，按「CSS」，就可以觀看 CSS 的語法如何設定了！ See the Pen display: block by Tedutw ( @Tedutw ) on CodePen . 上述範例的 網頁前端 CSS 語法設定如下： span.block{ display:block; } display:inline inline 元素只佔用可用寬度的最大值，並不強制換行。 將上一段範例的<span>元素，CSS 換成「display: inline」的結果如下。跟上一個範例一樣，在下方的顯示視窗中，按「CSS」可以觀看 CSS 的語法如何設定。 See the Pen display: block by Tedutw ( @Tedutw ) on CodePen . 上述範例的 CSS 語法設定如下： span{ display:inline; } display:none 「display:none」用來將元素隱藏使用，當元素隱藏後，就不佔用任何空間了，且在 網頁前端 頁面顯示時也不會被展現出來，就好像該元素不存在一樣。 在以下範例中，我們將第 2、4 段設為「display:none」，其他設為「display:block」。 See the Pen display: none by Tedutw ( @Tedutw ) on CodePen . 上述介紹的「block」、「inline」、「none」都是最常碰到的的 d
閱讀完整內容