前端工程師的旅程 - 啟動

2024-03-26 08:00

前言

哈囉大家~

這是我的第一篇文章，想和大家分享何謂前端工程師，並且可以從甚麼方向入門，讓完全不懂程式的人可以有一個好的入門方向，另外，有關前端的文章可以透過本部落格的搜尋功能去查找，以下正文開始。

善用 google: 聽起來很奇怪對嗎? 其實一點也不奇怪，無論是學習一個新的程式語言或者是在編寫的過程中遇到問題，幾本上都可以透過 google 來解決。
大膽假設: 因為前端有許許多多的套件，當你認為這個功能應該要存在，就不要怕大膽去搜尋，使用套件可以加速你的開發，即使套件的功能與你所需有些許落差也可以將其修改成你所需的套件。

所以想成為一名前端的必要條件不在於有沒有接觸過程式語言，而在於善用 google，因為 google 不只可以加速學習並且可以讓你事半功倍。

甚麼是前端工程師? 用一句話來解就是，實現 UI，提升 UX，

所謂 UI **(使用者介面)就是使用者所看到的畫面，包含整體的形狀、顏色、排版等等，至於UX(使用者體驗)**就是使用者在使用過程中的方便性、流暢性、效能等等，當然並不是說前端的工作只需要這樣就好，這邊就不細說了。

前端也分為 web前端 和 app前端:

web前端: 簡單來說就是透過瀏覽器開啟的網頁，都是web前端所做出來的。
app前端: 從手機的google play或是apple store所下載下來的app，都是app前端所做出來的，且現在有futter、react native等框架，可以達到寫一份代碼兩個平台共用的效果。

想入門成為一個前端工程師該具備甚麼基本技能，首先是 web 部分:

HTML、CSS(Sass/SCSS): 這兩者是前端最基本的兩項技能，尤其是以 CSS 為重中之重，至於 Sass 和 SCSS 好處在於可以新增變數、樣式元件化等等，對於開發者來說相對好開發和維護。
JavaScript(Typescript): 簡稱 js(ts)，當你的畫面透過 HTML、CSS 實作成功後，就需要 js 來添加互動性，例如: 點擊這個按鈕會觸發某事件或者是透過 api 來撈取所需的資料等等這都是 js 的功能，至於 ts 就是在 js 的基礎上加上型別和一些其他的功能，讓開發者更好的開發和維護。
框架: 當你上網搜尋"前端框架"，應該會常常看到React、Vue、Angular這三個，其中 Angular 的學習成本較高，另外兩者個人認為差不多，使用框架的好處在於加速以及提升開發效率，且很多常遇到的問題框架本身都已經幫你處理完了，基本上專注開發即可。

app 部分:

Flutter: 前面提到的app框架，可編譯成 ios 或是 Android，語言為 dart，該語言和 JavaScript 有許多共通之處，包含迴圈、同步、非同步等等，由於 dart 語言為強型別，如果是已學會 Typescript 那共通之處就更多了。
React Native: 一樣可編譯成 ios 或是 Android，主要語言為 JavaScript 且 web 框架的React是 React Native 的核心，所以先學會 React 就可以更好的理解學習 React Native。

就結果來說，我推薦可以先朝web前端的方向去做學習，在可以獨立完成一個小專案後再往app前端的方向去做延伸，這樣一來除了可以掌握web和app外，學習的效率也是大大增加。

在前端的世界裡很常常一兩年就會有大更新，大家一定要多看，不一定所有新功能都要實作，但一定要知道有甚麼新的功能，這樣不只可以提升自己也可以提升專案的品質。

最後歡迎大家加入前端的行列，如有任何問題的都透過網站的留言板或是信箱來聯絡我，我們下次見~