您是否曾經看過自己喜歡的網站,并想知道為什么要這樣布置,單擊按鈕時按鈕的操作方式,網站的任何其他部分并想到:“我想知道這有多復雜?” 還是“ 我希望我能做到 ”?好吧,所有這些可見的站點功能都是通過前端開發(有時也稱為“前端Web開發”)構建的,其背后的人有個名字:前端網頁開發人員。
前端網頁開發人員是一些需求最大的角色,并且有充分的理由-沒有它們,我們將無法享受互聯網的黑洞。稍后,我們將分解前端網頁開發人員使用和需要的所有技能,但這是前端開發的快速定義:
什么是前端開發?
Web設計是網站的外觀,而前端開發則是該設計實際上在Web上的實現方式。
那么,什么是前端網頁開發人員?
前端Web開發人員是通過HTML,CSS和JavaScript等編碼語言實現Web設計的人。盡管不再那么普遍了,前端網頁開發人員有時也被稱為“客戶端開發人員”,以區別于對后臺程序進行編程的后端開發人員,例如數據庫。如果您訪問任何站點,您都可以在導航,布局(包括本文頁面)中看到前端網頁開發人員的工作,甚至可以看到站點與手機的外觀不同(由于采用了移動優先或響應式設計) 。
前端Web開發人員使用哪些技能?
前端Web開發人員使用三種主要的編碼語言來編碼由Web設計人員創建的網站和Web應用程序設計:
HTML
CSS
JavaScript
他們編寫的代碼在用戶的瀏覽器中運行(與后端開發人員相反,后者的代碼在Web服務器上運行)??梢赃@樣想:后端開發人員就像是工程師,負責設計和創建使城市工作的系統(電力,供水和下水道,分區等),而前端網頁開發人員則是由工程師在街上并確保一切都正確連接,以便人們可以過上自己的生活(簡化的比喻,但您有一個大概的想法)。前端Web開發人員還負責確保前端沒有錯誤或錯誤,并確保該設計在各種平臺和瀏覽器上均按預期顯示。
我梳理了數十個前端Web開發人員的工作清單,以了解哪些技能是目前最需要的技能。這些是當今真正的雇主正在求職者中尋找的東西(并且在不久的將來仍會尋找)。掌握這些東西,您肯定會找到出色的前端網頁開發人員工作!
HTML和CSS
HTML(超文本標記語言)和CSS(級聯樣式表)是Web編碼的最基本構建塊。沒有這兩件事,您將無法創建網站設計,最終您只能得到屏幕上未格式化的純文本。沒有HTML,您甚至無法將圖像添加到頁面!
在開始任何Web開發職業道路之前,您必須精通HTML和CSS編碼。好消息是,可以在短短幾周內獲得其中任何一項的扎實的工作知識。
最好的部分:僅HTML和CSS知識就可以讓您建立基本的網站。
JavaScript
JavaScript使您可以為網站添加更多功能,并且可以使用HTML,CSS和JavaScript(簡稱JS)創建許多基本的Web應用程序。在最基本的級別上,JS用于創建和控制諸如實時更新的地圖,交互式電影和在線游戲之類的東西。諸如Pinterest之類的網站大量使用JavaScript來使其用戶界面易于使用(事實上,只要您固定某些內容,頁面就不會重新加載,這要歸功于JavaScript!)。
它也是世界上最受歡迎的編程語言,因此,無論您的開發人員職業計劃如何,這都是一門非常有價值的東西。
jQuery
jQuery是一個JavaScript庫:一系列插件和擴展,使使用JavaScript進行開發變得更快,更容易。jQuery不必讓所有的工作從頭開始編寫代碼,而是讓前端Web開發人員向項目添加現成的元素,然后根據需要進行自定義(了解JavaScript如此重要的一個原因)。您可以將jQuery用于倒數計時器,搜索表單自動完成,甚至自動重新排列和調整網格布局大小。
JavaScript框架
JS框架(包括AngularJS,Backbone,Ember和ReactJS)為您的JavaScript代碼提供了現成的結構。有多種類型的JavaScript框架可滿足不同的需求,盡管提到的四種在實際工作清單中最受歡迎。這些框架通過為您提供快速入門,確實加快了開發速度,可與jQuery之類的庫一起使用,以最大程度地減少必須執行的從頭開始編寫的代碼。
前端框架
CSS和前端框架(最流行的前端框架是Bootstrap)對CSS的作用類似于JS框架對JavaScript的作用:它們為您提供了一個起點,可以加快編碼速度。由于很多CSS都是從項目到項目完全相同的元素開始的,因此一個為您預先定義所有這些元素的框架非常有價值。大多數前端網頁開發人員工作清單都希望您熟悉這些框架的工作方式以及如何使用它們。
具有CSS預處理器的經驗
預處理器是前端網頁開發人員可以用來加速CSS編碼的另一個元素。CSS預處理器為CSS添加了額外的功能,以保持CSS的可伸縮性并易于使用。在將代碼發布到網站之前,它會處理您的代碼,并將其轉換為格式良好且跨瀏覽器友好的CSS。根據實際工作清單,SASS和LESS是需求最大的兩個預處理器。
RESTful服務和API的經驗
REST并不代表太多技術,REST代表代表狀態轉移。從根本上講,它是一種輕量級體系結構,可簡化Web上的網絡通信,而RESTful服務和API是遵循REST體系結構的那些Web服務。在此處閱讀有關REST和RESTful服務的更多信息。
假設您想編寫一個應用程序,按照您成為朋友的順序向您顯示所有社交媒體朋友。您可以調用Facebook的RESTful API來閱讀您的朋友列表并返回該數據。Twitter也是如此(它也使用RESTful API)。對于使用RESTful API的任何服務,一般過程都是相同的,只是返回的數據會有所不同。
盡管這聽起來確實很復雜且技術性強,但它是一組設定了期望的簡單指南和實踐,因此您知道如何與Web服務進行通信。它們還使Web服務的性能更好,擴展性更好,工作更可靠,并且更易于修改或移動。
響應式和移動設計
僅在中國,通過移動設備訪問互聯網的人數就比臺式計算機更多,這也就不足為奇了,響應能力和移動設計技能對雇主來說至關重要。響應式設計意味著網站的布局(有時是功能和內容)會根據用戶使用的屏幕尺寸和設備而變化。
例如,當從具有大型顯示器的臺式計算機訪問網站時,用戶將獲得專為鼠標和鍵盤用戶創建的多列,大型圖形和交互。在移動設備上,相同的網站將顯示為針對觸摸交互進行優化的單個列,但使用的是相同的基本文件。
移動設計可以包括響應式設計,還可以包括創建單獨的移動專用設計。有時,您希望用戶在臺式計算機上訪問您的站點時所獲得的體驗與您希望他們從智能手機進行訪問時所獲得的體驗完全不同,在這種情況下,移動站點應該完全不同。例如,擁有在線銀行業務的銀行網站將從一個單獨的移動網站中受益,該網站可以讓用戶查看最近的銀行位置和簡化的帳戶視圖(由于移動屏幕較小)。
跨瀏覽器開發
現代瀏覽器在持續顯示網站方面已經變得非常擅長,但是它們在后臺解釋代碼的方式仍然存在差異。直到所有現代瀏覽器都可以與Web標準完美兼容之前,了解如何使每個瀏覽器都按照您希望的方式工作是一項重要技能。這就是跨瀏覽器開發的全部內容。
內容管理系統和電子商務平臺
幾乎每個網站都基于內容管理系統(CMS)構建。(電子商務平臺是CMS的一種特定類型。)全世界最受歡迎的CMS是WordPress,它是數百萬個網站(包括Skillcrush!)的幕后花絮- 使用CMS 的網站中幾乎有60%使用WordPress。
其他最受歡迎的CMS包括Joomla,Drupal和Magento。雖然知道這些不會給您帶來像WordPress專家那樣多的需求,但它們可以為您提供一個利基市場,這是使用這些系統的公司所需要的(并且這里面很多)。
測試與調試
對于前端Web開發人員而言,這是不爭的事實:會發生錯誤。熟悉測試和調試過程至關重要。
單元測試是測試各個源代碼塊(告訴網站如何工作的指令)的過程,而單元測試框架則提供了一種具體的方法和結構(每種編程語言都有不同的方法和結構)。
另一種常見的測試類型是UI測試(也稱為驗收測試,瀏覽器測試或功能測試),您可以在其中進行檢查以確保網站在用戶實際在網站上執行操作時表現正常。您可以編寫測試,以在執行某項操作后在頁面上查找諸如特定HTML之類的測試(例如,確保如果用戶忘記填寫必填的表單字段,則會彈出您的表單錯誤框)。
調試只是將那些測試發現的所有“錯誤”(錯誤)(或在您的網站啟動后您的用戶發現),戴上偵探帽以弄清它們發生的原因和方式,并解決問題。不同的公司為此使用略有不同的流程,但是如果您使用了一個流程,則可以輕松適應其他流程。
Git和版本控制系統
版本控制系統使您可以跟蹤隨著時間的推移對代碼所做的更改。如果您搞砸了,它們還使您可以輕松地還原到早期版本。因此,假設您添加了一個自定義的jQuery插件,突然其他代碼中斷了一半。無需費力手動取消它并修復所有錯誤,您可以回滾到以前的版本,然后使用其他解決方案再試一次。
Git是這些版本控制管理系統中使用最廣泛的。幾乎所有開發工作都需要知道如何使用Git。這是開發人員需要具備的重要工作技能之一,但很少有人真正談論。
解決問題的能力
如果所有前端網頁開發人員都必須做一件事,而不管職位描述或正式職位如何,它都是出色的解決問題的技能。從弄清楚如何最好地實現設計,修復出現的錯誤到弄清楚如何使前端代碼與正在實現的后端代碼一起工作,開發都是關于創造性問題的解決。
假設您已經創建了一個功能完善的網站前端,并將其移交給了后端開發人員,以便他們將其與內容管理系統集成。突然,您很棒的功能中的一半停止工作。一個好的前端網頁開發人員會將其視為要解決的難題,而不是制造過程中的災難。當然,優秀的,高級的前端網頁開發人員將預見到這些問題,并盡力防止它們!