切換
舊版
前往
大廳
主題

淺談前端工程

FizzyElt | 2020-05-29 00:30:58 | 巴幣 118 | 人氣 324

本篇文章會有一些主觀意識及個人想法
覺得不認同就看看就好

AJAX的誕生
說到前端,我覺得是大家發現有AJAX這東西可以用的時候才慢慢有的
為什麼說發現呢 ?
AJAX誕生在1997年,但是幾年間並沒有很頻繁的拿來使用
但是Google爸爸大力推,在他們產品上使用,最經典的就是Gmail
當網頁需求需要在不換頁的情況下拿到資料更換上去,就需要用到AJAX
不然以前都只能讓後端把html填資料填好送到前端去
也是現代前端覺得麻煩的東西,叫做 SSR ( Server Side Render )
因為傳統的 SSR 需要一直換頁導致使用者體驗很差
大家才發覺 AJAX 這東西好像真的有搞頭。

jQuery的出現
雖然開始用 AJAX,但是又遇到另一個問題
雖然非同步拿到資料了,但是用 javascript 操作畫面極為複雜
而且這語言在發明時並沒有考慮的很周全所以衍生出很多的坑
這時就出現 jQuery 來當救星
jQuery 只是一個函示庫但卻幫你封裝好很多功能,使用起來很方便
在前端框架出來前 jQuery 都是首選。

前端框架
然而 Angular.js 的出現開始慢慢打破這個局勢
雖然剛開始很多人覺得 jQuery 用好好的幹嘛用 Angular.js
但之後出的 React 讓人們開始慢慢改觀
雖然當時 React 也有一些奇怪的設計
但是他卻帶領前端嘗試走向不同的路
隨著時間 React 慢慢成熟穩定,大家也發覺前端要做的頁面越來越複雜
對畫面要求也越來越高
如果只用 jQuery 做變得不好管理也不夠快速
漸漸地開始嘗試使用前端框架。

前端框架特點
後來出現的 Vue 因為好學且不用太深的 javascript 知識等特點慢慢紅起來
造成現在前端三本柱 VAR (Vue Angular React)
你問說前端框架的共通特點是什麼 ?
我會回答說是模組化的機制
模組化使一個複雜頁面可拆分成各個子元件
每個子元件都可以重複使用,也變得好管理
哪邊壞了我可以直接找到該子元件做檢查。

前端框架的好幫手
我認為前端框架出現有一部份要歸功於 node.js 的出現
node.js 是將前端工程化的重要工具之一
現代前端已不是以往的刻個畫面串個資料這麼簡單
我們不是管理資料庫而是管理多個複雜的狀態
根據狀態來渲染正確的畫面
管理狀態及渲染流程變成前端的重要課題
為了讓我們更專注在這些事衍生出很多輔助工具像是
babel (將JS轉舊語法及JS相關檔案轉譯)、webpack (程式碼打包及打包流程自動化)等等。

我該學哪個框架 ?
這問題沒有一定答案,但我可以稍微分析三本柱的特點,Angular比較不熟只講我知道的
Vue : 簡易好學,不需要太多的JS知識即可做些作品,方便的CLI工具。
React : HTML、CSS、JS都可以寫在JS檔內,單向資料流、眾多前端函示庫支援。
Angular : 體系完整,你想的到的用的到的都幫你準備妥當,全部使用 Typescript 撰寫
(注意 : 此Angular是指第2版以上的,第1版基本上被Google唾棄了)。
最近有點吸引我的svelte或許也不錯,寫起來像Vue但在更單純一點。

結語
當你看完上面的上面的淺談後大概就會懂為什麼需要前端工程師
以前都是後端統一包辦,現在叫後端弄這些肯定會白眼你
其實上面只是前端的一部份而已,還有UI框架跟狀態管理工具等議題
雖然前端只用HTML、CSS、JS這些,但它延伸出來的東西可不比我們想像的這麼少。

創作回應

驥哥
推ㄍ 我原本以為你是技能都點後端 原來連前端都會==
2020-05-29 01:14:37
FizzyElt
我學前端時間蠻長的,當初是因為對後端資料怎麼傳送有點好奇才學的,順便學習一種強型別語言
2020-05-29 01:29:37
真.肥宅
霸言霸語 卡個
2020-05-29 09:54:47
朝輝夕嵐
卡卡卡 先收藏 考完來看
2020-06-11 19:49:08
Absinthe
「根據狀態來渲染正確的畫面」解釋得真好~
2020-08-30 20:16:27

更多創作