iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 1
2
Modern Web

深入現代前端開發系列 第 1

Day1 現代網頁開發

前言

瀏覽器與互聯網的發展,讓前端的技術推陳出新,百花齊放。
過去許多的概念逐漸過時,瀏覽器能夠做的事情越來越多了。除了後端以外,前端也是需要嚴謹的工程化以及架構,才能應付日漸複雜的需求。

這次鐵人賽希望透過介紹各種新、舊的 Javascript 技術,以及講解在一般網頁開發時會遇到的問題以及了解整個瀏覽器、Javascript 的運作、再逐漸帶到近幾年逐漸流行的框架:web-component, ReactJS, Vue

這並不是一份從 0 到 1 的入門教材,而是記錄自己對於前端開發的理解,並分享一些自己的經驗,因此比較適合有經驗的前端工程師,像是能夠實作基本的切版需求,也有串接過 API 與後端串接的經驗,甚至使用過 React, jQuery 等等。

有鑒於前端要涉及的事情越來越繁雜,在初學階段,甚至一些有經驗的前端工程師也不容易搞清楚到底在做什麼。於是我希望透過這次鐵人賽,把自己所知道的事情,盡量透過簡單清晰的方式分享出來。

技術分為術和道兩種,術是做事的方法,而道是做事的原則。在學習的時候,如果一昧地追求術會過得相當辛苦,因為新的函式庫一直推陳出新,不會有結束的一天。但如果掌握了原則,那麼就算再怎麼變化,還是能夠應付未知的挑戰。

這次的系列也會盡量解釋清楚一些比較底層或比較進階的概念,所以一些人可能要失望了,這裡不會深入介紹太多函式庫(除了 React, Vue 跟 RxJS 以外)。

身為前端工程師,JavaScript 已經是開發時的必需品,也因為網頁與瀏覽器的易用性,讓上手前端的門檻並不高。但任何語言跟實作都是一種抽象化,認識背後的理論,除了出現問題可以更容易知道問題的原因在哪之外,也可以學到很多思考方式。畢竟不管是開發一個網頁應用、SPA、瀏覽器,本質上都會牽扯到軟體設計的知識。

由於前端的戰國時代已經慢慢趨於穩定,當中也會介紹一些常見的技術,讓大家有個敲門磚,也知道以後如果要在實際開發上使用可能需要的工具。

這份教材沒有什麼「新概念」,大部分的概念,你都可以在網路上的文章中找到,在介紹某些觀念時我也會將一些不錯的文章放在段落後。

想要寫好前端沒有捷徑,任何程式語言或領域都一樣,雖然前端因為實作的門檻比較低,而且容易上手,但要深入了解它需要涉及各種不同領域的知識,像是 UI/UX、如何和後端互動、和使用者互動、在不同瀏覽器中盡力達到一致性、如何優雅地處理錯誤、適應各種不同裝置(RWD)、管理複雜的資料流、兼顧效能等等,這就要靠持續學習與經驗的累積了。

發文規劃

  1. JavaScript Basic: 介紹一些基礎卻很重要的概念
  2. 瀏覽器運作 + Performance:大致了解瀏覽器的運作並且試著從 performance 的角度來看。
  3. 安全性:介紹一些前端常見的安全性問題
  4. 前端工程化
  5. 前端 UI 開發
  6. 前端框架淺談:談談 React, Vue 與 custom-element
  7. 進階篇:像是 i18n、Functional Reactive Programming、淺淺的密碼學、GraphQL、正規表達式等等,這裏能夠涵蓋的範圍很廣,就看到時候有多少時間產出了。

下一篇
Day2 [JavaScript 基礎] 淺談 ECMAScript 與 JavaScript
系列文
深入現代前端開發32

尚未有邦友留言

立即登入留言