當你掌握了HTML、CSS
學會使用JavaScript、Jquery
準備投入網頁開發領域大展身手時
沒想到這樣竟然遠遠不夠......?
為什麼會出現前端框架?
網頁功能逐漸複雜
網頁最初發明時以純閱讀瀏覽為主,之後漸漸發展出處理複雜的功能,使用者可以透過網頁來寫論文、聽音樂、看電影、與人遠距離交流,做到原先在電腦內的原生軟體才能完成的事情。
為了解決更複雜的網頁功能,開發者研發許多 JavaScript 函式庫(library)。
以 jQuery 為例,其語法簡潔,有直覺好用的元素選取器、事件監聽註冊,
開發者可以依據使用者的行為,靈活操作 DOM 元素的結構及樣式。
讓開發者只需要專注在想實作的邏輯即可。
開發難以維護
然而隨著專案規模逐漸增大,程式複雜度不斷上升,直接操作 DOM 的缺點也逐漸浮現。因為需要透過 JavaScript 處理互動內容,需要將結構、樣式寫到 JavaScript 中,HTML、CSS、JavaScript 難以各司其職,造成程式碼管理困難。
另外,當使用者操作網頁改變內容時,勢必要觸發整個畫面渲染的流程,頻繁的改動觸發重複渲染,也會影響網頁效能。
現今的「框架」,其實就是一種提供完整解決方案的函式庫,用以提升開發效率、降低維護難度。讓網頁擴展到巨大的規模時依舊能維護,對軟體的健康和長壽至關重要。
前端御三家
現在搜尋任何前端相關職缺,幾乎都會在求職條件中提到目前的三大框架:React、Vue、Angular。他們有哪些特性?
三大前端框架的Google搜尋熱度
(2017/07~2022/07) 參考資料
Vue
新手容易上手
適合做輕量級的開發、擁有最乾淨的代碼、簡單的學習曲線。 有些中小公司會採納Vue, 因為入門相對簡單, 讓流動率高的新創科技產業可以減少新人學習的時間!
Angular
套件豐富成熟
三者中最成熟的框架,擁有相當豐富的套件, 但學習曲線相對之下非常陡峭, 一開始接觸網站開發的人會很辛苦, 而如果你是一個很會寫Typescript的人,則推薦使用Angular!
React
開發社群廣大
也是相當成熟的框架,適合拿來開發一些小型的案子。 因為自由度高,開發者社群非常的龐大,套件選擇豐富。 React也非常適合新手。以目前職場上來看, React的接受度較高,前景佳。
各地區的使用狀況
根據Google搜尋熱度來看,React在世界各地的查詢比例較高,而Vue在亞洲比較流行。
前端框架的發展趨勢
哪個前端框架比較有發展性?
目前職場上需要的比較多是Angular和React的人才, 同時React確實擁有比較完善且龐大的資料庫, 眾多的開發者讓它成為非常flexible的前端框架。然而如果真的將來想要成為前端工程師, 至少會兩樣框架是非常正常的事情QQ
還有其他的前端框架嗎?
市面上還有許多前端框架,其中2019年的框架滿意度調查中,有個名叫 Svelte 的框架橫空出世,直接一舉拿下滿意度調查的第2名。
Svelte 提供不同的方法來建構網站應用程式。 當應用程式運行時,React、Vue 等框架會在使用者的瀏覽器直接做他們想要做的事情, 而 Svelte 則是將做的這些事移到編譯階段處理, 因此那些做的事情只發生在你建置應用程式的時候, 進而產生高度優化的原生JavaScript程式碼。