前端技能樹

前端技術簡史

前端开发 20 年变迁史

【CSDN 编者按】1990年，第一个Web浏览器诞生，而WWW的诞生直接拉开前端史的序幕。 从静态页面到JavaScript，从依赖后端到自主开发，前端开发者从不被重视的"页面仔"逆袭为如今很多前端工程师的薪资比后端还高，从前端技术由国外开发者主导到如今国内自主产生的小程序技术，我们走了20年。 作者 | 司徒正美责编 | 伍杏玲出品 | CSDN（ID：CSDNnews） 1990 ...

https://zhuanlan.zhihu.com/p/68030183

網頁代碼演進

• 1990-1994 洪荒時期：靜態網頁 HTML+CSS。

• 1995-2000 CGI後端動態生成頁面 ：
後端語言( PHP、JAVA、C# ... ) 加入，與前端程式大雜燴，形成 麵條式代碼 、單體式應用程式。
- 後端 CRUD 設計：僅需將資料傳給前端，其他的事由前端處理。
- 分頁設計：避免用戶等待頁面顯示的時間太久。 由於頁面由伺服器產生，每次更新頁面都需要全畫面重新渲染。

• 2000-2009 瀏覽器戰爭： - HTML、CSS、JavaScript 依據不同瀏覽器進行客製化調整。
- AJAX 回調地獄：讓網頁可以先渲染部分內容再向後端伺服器取資料更新頁面。
- 非即時刷新/前端定時器：固定時間重新向後端取得資料刷新頁面。
- iframe 實現頁面刷新。

• 2009-2012 JQuery 時期：
- JQuery 鍊式操作 & 全局汙染。

• 2012-2016 後端開發經驗轉至前端：Webpage → WebApp
- 前端庫管理工具：Npm、Yarn
- 前端打包工具：Gulp、Grunt、Webpack ...
- 前端模板： Express.js
- 前端路由：統一進入點，依據URL路徑參數轉至不同代碼區塊。

• 2016-至今 前後端分離：三大框架群雄割據 Angular、React、Vue
- 後端 RESTful API 設計：明確定義資料傳入傳出的規範。
- 前端 MVC 設計：透過關注點分離，讓程式碼更容易尋找與閱讀。
 

• 靜態網頁：著重閱讀體驗、SEO、快速製作。 如: 公司介紹網頁、一頁式行銷頁面 ( Landing Page )、部落格 ...

• 動態網頁：提供額外網頁功能插件 如: 留言板、金流、報名系統 ...

• 資料庫管理：業務場景有 資料量大 搜索緩慢的困擾時。

• 前後端分離：業務場景需要提供 高流量、高穩定性、高擴展性 時。

隨著技術的發展，技術只會越來越適應細分領域，可能無法見到單一技術走天下的未來。