方格精選

甚麼是前端開發?

閱讀時間約 5 分鐘
如果有接觸過網頁開發的讀者,或者會聽過很多不同的專有名詞,其中不少得Front-end (前端) 和 Back-end (後端)這兩個字詞。有一些網站可能只需要設計師和前端開發者,有些則需要後端開發者和測試人員等等,那究竟前端和後端如何分辨?首先,讓我們搞清楚前端開發是什麼一回事。

Front-end 前端開發

前端包含所有用家能夠見到、繼而互動的畫面,而現今的網頁主要仍是利用HTML、CSS 和 Javascript 來建構這些畫面。
HTML相信即使不是程式員都不陌生,HTML 全名是 Hypertext Markup Language(超文件標示語言),是建立網頁的標準標示語言,簡單來說就是一個網頁的骨幹。早期的網頁,如這個有關WWW萬維網的網站(連結),主要只有文字,充其量會有一些圖像,所以畫面比較乏味,如下面的例子1a)。於是,就有CSS的誕生了。
1a) 只使用HTML的網頁 :
CSS 於 1998年出現, 全名是 Cascading Style Sheets(層疊樣式表), 一種用來為例如HTML、XML 等這些結構化文件添加樣式的電腦語言,亦即是一個網頁的表皮/裝飾
在CSS 誕生前,要控制網頁如何顯示,就要在HTML檔案內包含顯示的資訊,例如字型的大小和顏色、背景應該是怎樣的、如何排列等等,這些都必須逐一在HTML檔案內列出。有時會因為資訊重複列出而令到網站過份冗長。CSS的出現使開發者可以將大部分這些顯示用的資訊中隔離出來,從而簡化 HTML 的檔案。這些資訊會被放在一個輔助的,用CSS語言寫的檔案中。理想來說, 現在的HTML檔案中應該只包含結構和內容的資訊,而CSS檔案中就包含樣式的資訊,以達致分工的目的。
1b) 使用了 HTML 和 CSS 的網頁:
在上面的例子1b),是將純粹使用HTML作為框架的 1a),加上 CSS 的裝飾,例如文字顏色、 邊框和背景顏色。
網頁的骨幹和表皮都有了,已經可以製作一些漂亮的靜態頁面,但如果要有一些能夠互動的部分,例如持續取得一些即時的資訊、儲存數據,甚至只是按下按鈕時彈出對話框,只用HTML和CSS的話都難以實行。 JavaScript 就正正能夠補充給予網頁「肌肉」並得以「活動」這個角色了。
1995 面世的 JavaScript 主要用作管理網頁的內容以及用戶的操作行為,而由於不同PHP、ASP的伺服器端手稿語言,不需要伺服器的支援也能夠在用戶的瀏覽器上運行,所以的確能夠減少對伺服器的負擔。
1c) 使用 HTML 、CSS 和 JavaScript 的網頁:
在上面的例子 1c) 中,加了JavaScript 的輔助後,按下按鈕就會彈出「clicked」的對話框。
時至今日,前端的技術不斷轉變, 中間有過Flash、 Silverlight 這類 Web前端應用程式的開發解決方案曾經稱霸多年,卻因為手機平台不支援等因素而被淘汰。反而最基礎的 HTML、JavaScript、CSS不斷改進,以致如播放實時影片、繪圖、動畫等的功能都無須額外方案處理。而現在有不少 framework 和 library,如 ReactJS/Bootstrap 等等,能夠提供規格化的開發資源,使得開發的效率和水準得以大大提升。
前端開發者的主要職責,除了負責網頁的內容如何擺放,亦即所謂的 User Interface(使用者介面),也要照顧到用戶的瀏覽體驗,那就是 User EXperience(使用者體驗),這就要和專門的 UI、UX 設計師合作才得以處理得宜。前端開發者也要和後端開發者處理前後端之間的編程介面(API),使得有需要數據得以儲存、獲取和處理等等。
有興趣理解前端開發者的技術路線圖,可以看:
更多資訊可以留意 ONES Publication 定期發佈的文章,亦可以聯絡我們,我們的網址是: https://ones.software
ONES Publication
We share what we have learned about app and web development. Find us in ones.software. Email: hello@ones.software
聯絡我們:
電郵地址: hello@ones.software
Contact us:
Email address: hello@ones.software
Ref:
為什麼會看到廣告
通過 Offision 立即提高您的辦公績效!免費試用! 無需信用卡 即開即用
留言0
查看全部
發表第一個留言支持創作者!
「究竟應該花多點時間去寫好編碼,還是應該快快寫好新的功能,往後才改善編碼的質素」,雖然大家心裏面都希望花時間寫好每一個功能的編碼,但面對開發時間永遠不足、上司的壓力,很多時就會無視編碼的質素,來成就新功能/新產品可以及早推出。我們怎麼說服你自己、你的上司一開始的編碼質素是何其重要?
在現今的商業世界,軟件是企業營運中不可缺少的部份。要決定您的企業是否購買現成的軟件,還是自行開發一套軟件,這可能是一項艱鉅的決定:自行開發一套軟件相對昂貴,但現成的軟件卻缺乏彈性。但為什麼還會有企業自行開發軟件?
軟件可以即要即用?企業級軟件訂閲服務 (SaaS) 開發 - 系統架構篇:Single tenancy (單一租戶模式) 和 Multi tenancy (多租戶模式) 歡迎聯絡我們: http://ones.software
「究竟應該花多點時間去寫好編碼,還是應該快快寫好新的功能,往後才改善編碼的質素」,雖然大家心裏面都希望花時間寫好每一個功能的編碼,但面對開發時間永遠不足、上司的壓力,很多時就會無視編碼的質素,來成就新功能/新產品可以及早推出。我們怎麼說服你自己、你的上司一開始的編碼質素是何其重要?
在現今的商業世界,軟件是企業營運中不可缺少的部份。要決定您的企業是否購買現成的軟件,還是自行開發一套軟件,這可能是一項艱鉅的決定:自行開發一套軟件相對昂貴,但現成的軟件卻缺乏彈性。但為什麼還會有企業自行開發軟件?
軟件可以即要即用?企業級軟件訂閲服務 (SaaS) 開發 - 系統架構篇:Single tenancy (單一租戶模式) 和 Multi tenancy (多租戶模式) 歡迎聯絡我們: http://ones.software
你可能也想看
Google News 追蹤
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
初學程式的時候,可能會有幾個問題讓你的開發速度低落,腦袋動得很快,但是手卻跟不上想法。 舉例來說: 瀏覽器的DevTool一直報錯,畫面的邏輯出錯,或是畫面根本出不來,但你卻不知道問題出在哪。
Thumbnail
還記得在我小學的時候,筆記型電腦不那麼普遍,如果想要看小說或是漫畫,人就一定要跟桌上型電腦綁定,沒辦法像一般書本一樣在任何地點隨心所欲地閱讀小說。 後來到了我國中的時候,mp4 開始變得非常的盛行,除了聽音樂之外,還可以將 .txt 檔案匯入mp4,讓我可以在看網路小說時不再受限於電腦⋯⋯
Thumbnail
國際企業研究常把國家經濟發展程度當成一個重要的變數去研究各國企業發展的相同及相異處。
Thumbnail
圖片來源:未來商務展 Hi 大家好,我是渙恩(Alvin) 【陌生開發】,一直都是 Sales & BD 在工作的環節中,最基礎,同時也是最重要的一項技能,如果沒有【陌生開發】,就不會有後續的 Demo、解決客戶疑慮、談判、成交等等的業務成交公式。
程式交易是一種使用程式自動處理買賣股票、期權、期貨、外匯貨幣的技術。在華爾街,程式交易也被稱為演算法交易、高頻交易、自動交易或黑箱交易。
Thumbnail
會議室中,行銷部門正在討論下一季要推出的新品。 A君:公司的技術強項是越野登山車,我們要全力多推幾個SKU。  B君:我認為我們應該推輕量化的產品,現代人喜歡輕巧的腳踏車。  C君:折疊車才是主流吧,我看人家XX的折疊車賣得很好呢!  主管:我有一堆庫存處理的壓力,我們來弄個看起來不錯的庫存處
Thumbnail
沒有對錯,純粹是選擇 之前演講分享,怎麼透過內容和社群洞悉消費者的需求,進而打造爆款的產品,並且持續優化讓產品力更強。在這個前提之下,失敗的風險是非常低的。   打造爆款的好處: 利於跟供應鏈上的
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
初學程式的時候,可能會有幾個問題讓你的開發速度低落,腦袋動得很快,但是手卻跟不上想法。 舉例來說: 瀏覽器的DevTool一直報錯,畫面的邏輯出錯,或是畫面根本出不來,但你卻不知道問題出在哪。
Thumbnail
還記得在我小學的時候,筆記型電腦不那麼普遍,如果想要看小說或是漫畫,人就一定要跟桌上型電腦綁定,沒辦法像一般書本一樣在任何地點隨心所欲地閱讀小說。 後來到了我國中的時候,mp4 開始變得非常的盛行,除了聽音樂之外,還可以將 .txt 檔案匯入mp4,讓我可以在看網路小說時不再受限於電腦⋯⋯
Thumbnail
國際企業研究常把國家經濟發展程度當成一個重要的變數去研究各國企業發展的相同及相異處。
Thumbnail
圖片來源:未來商務展 Hi 大家好,我是渙恩(Alvin) 【陌生開發】,一直都是 Sales & BD 在工作的環節中,最基礎,同時也是最重要的一項技能,如果沒有【陌生開發】,就不會有後續的 Demo、解決客戶疑慮、談判、成交等等的業務成交公式。
程式交易是一種使用程式自動處理買賣股票、期權、期貨、外匯貨幣的技術。在華爾街,程式交易也被稱為演算法交易、高頻交易、自動交易或黑箱交易。
Thumbnail
會議室中,行銷部門正在討論下一季要推出的新品。 A君:公司的技術強項是越野登山車,我們要全力多推幾個SKU。  B君:我認為我們應該推輕量化的產品,現代人喜歡輕巧的腳踏車。  C君:折疊車才是主流吧,我看人家XX的折疊車賣得很好呢!  主管:我有一堆庫存處理的壓力,我們來弄個看起來不錯的庫存處
Thumbnail
沒有對錯,純粹是選擇 之前演講分享,怎麼透過內容和社群洞悉消費者的需求,進而打造爆款的產品,並且持續優化讓產品力更強。在這個前提之下,失敗的風險是非常低的。   打造爆款的好處: 利於跟供應鏈上的