先分享下 Frontend 的發音
https://www.youtube.com/watch?v=ZdtpKFbhTtk

記得是 Frontend 不是 Front-end 喔 XD

不知道大家有沒有看過類似的工程師梗圖呢?

前端就是給客戶看到的主要畫面
所以不管後面的開發流程怎樣的混亂
程式碼是如何的髒阿
後端是滿滿的workaround
DB一團資料黏在一起等等
客戶看到的都是漂漂亮亮的畫面就是
做出這畫面去和使用者互動就是前端工程師在做的

前端的工作會需要跟UI/UX去討論說這些介面的設計好不好看且好不好用
最主要的技術就是JavaScript, HTML(HTML5), CSS(CSS3)啦
早期的話其實都算是用server side render的方式
全部都由server根據狀態及input去資料庫撈資料之後
直接產生出必要的HTML CSS JavaScript等等
後端的framework配合上一些template的幫忙
這是一種比較早期的做法
但隨著Ajax, HTML5和瀏覽器的發展
SPA(Single Page Application)變成了新的潮流
server只會回傳基本的html js css之後
剩下就全部都靠JavaScript了

在這情形之下
加上JavaScript演進之賜
就衍生出了許多強大framework
現在的三大主流就是

1. React
2. Vue
3. Angular

曾聽過前輩說
如果沒有熟悉個兩三套以上的話是不能自稱前端工程師的(我: 只會React......QQ)
但不管哪一個
基本的JavaScript, HTML, CSS都是必須要熟悉逃不到的
HTML 是最基本的骨架
CSS 則是永遠學不完(我總是戲稱拉窗簾)
但是基本的display, position, box model的概念要有
JavaScript的標準也一直再進化 到現在都到ECMAScript 2020
甚至還可以看看TypeScript這個強型別的JavaScript
這些都有概念之後
再去看選擇一種framework
了解怎麼樣元件化 開發一個元件
以及元件的狀態與生命週期等等(這邊都以React的概念)
然後再去找找那個生態系提供的App狀態管理的工具
我覺得這是前端開發還蠻需要注意的地方
接下來就是各種前端的design pattern學習
學習正確的best practice

前端現在也需要compile(把新的語法轉成瀏覽器可以接受的語法)並產生release build
所以各種像是Babel, Gulp, Webpack等工具也是必須要知道的

再來你的平台都是瀏覽器
對瀏覽器的深入了解 我覺得也是有必要的
還有performance tuning的各種技巧
跟對應必要的profiling, debug, dev tool這些工具
這也都是不可或缺的

我自己對以上的東西其實也未必那麼有自信就是
我提到的可能都還只是冰山一角
加上前端的每個部分都進展得太快了
很可能明年就什麼技術都進化
或是有更好用的工具新推出
真的是個很難捉摸的領域
在變化那麼快的情塊下
只能說基本分析問題、評估技術、溝通協調的能力可能都是更重要的

前端這也可以衍生到mobile上面去
所以就有React-Native這framework出來
不過根據我做mobile的朋友說
大都還是需要寫原生的APP就是
很少拿這種誇平台的framework做production產品就是
有沒有大大可以分享使用這些跨mobile的framework的實戰經驗呢?