<style>
#doc, .slides {
font-family: system-ui, -apple-system, "Roboto", "Helvetica", "Arial", sans-serif !important;
}
img {
max-height: 550px !important;
}
</style>
## 前端開發人員篇
---
### 緣起
只是想要分享我這一年多
所接觸到的也有小小做一些實驗的前端經驗
我認為是現代的 Web 開發趨勢
<!-- .element: class="fragment" -->
---
隨著現代化網頁開發專業和複雜性的提昇
以及對於使用者體驗的要求下
---
網頁開發已從 Web Developer (全端) 一夫當關
轉向專業分工並更加細分成
<!-- .element: class="fragment" data-fragment-index="1" -->
網頁前端（Web Front End）、網頁後端（Web Back End）等職位
<!-- .element: class="fragment" data-fragment-index="1" -->
簡稱 前後端分離
<!-- .element: class="fragment" data-fragment-index="2" -->
---
此外，由於跨平台、跨瀏覽器的需求日益增加，技術變化更迭快速
前端工程的（Front End Engineering）所要面對的挑戰也越來越多
此處跨平台是指用網頁技術跨足桌面應用程式或是手機APP
<!-- .element: class="fragment" -->
---
---
### 前端開發我認為分為兩大類
1. 前端設計師 or UI/UX 設計師
<!-- .element: class="fragment" -->
聚焦在網頁設計（Web Design）
<!-- .element: class="fragment" -->
主要技能：
HTML、CSS、視覺設計、動態效果、SEO、a11y（無障礙網頁）
互動設計、使用者體驗、易用性測試
<!-- .element: class="fragment" -->
---
2. 前端工程師
技能圍繞著 JavaScript，理解 ==瀏覽器==，處理數據來呈現各種應用
<!-- .element: class="fragment" -->
將設計稿轉換為具體呈現並可操作互動的網站
<!-- .element: class="fragment" -->
<span>地圖應用：[Google Map](https://developers.google.com/maps/documentation)、[Leaflet](https://leafletjs.com/)、[OpenLayers](https://openlayers.org/)、[Cesium](https://cesiumjs.org/)、[ArcGIS](https://developers.arcgis.com/javascript/)</span><!-- .element: class="fragment" -->
<span>圖表資料視覺化：[D3.js](https://d3js.org/)、[Chart.js](https://www.chartjs.org/)</span><!-- .element: class="fragment" -->
<span>3D 應用：[Three.js](https://threejs.org/)、[Babylon.js](https://www.babylonjs.com/)</span><!-- .element: class="fragment" -->
<span>遊戲：[Pixi.js](https://www.pixijs.com/)、[Phaser](http://phaser.io/)</span><!-- .element: class="fragment" -->
<span>跨平台技術：[Electron](https://electronjs.org/)、[React Native](https://facebook.github.io/react-native/)</span><!-- .element: class="fragment" -->
---
### 前後端的溝通
---
純前端
---
後端
---
### 前後端的溝通方式
- 傳統 form
- AJAX （synchronous JavaScript and XML）
---
傳統 form [GitHub](https://github.com/login)
---
AJAX [MSN](https://login.live.com/)
---
隨著 AJAX 的應用越來越複雜
畫面渲染的邏輯處理重心漸漸移轉到前端
---
### 單頁應用
### （single-page application，SPA）
改變路由時，頁面不刷新
<!-- .element: class="fragment" -->
使網頁的應用像一個桌面應用程式
<!-- .element: class="fragment" -->
像是你們一定有用到過的 Gmail
<!-- .element: class="fragment" -->
---
SPA 的購物網站
https://fandorashop.com/
傳統的購物網站
https://www.muji.com/tw/products/
---
圖片來源：[[四格] 前端框架御三家 POSTED BY 初夏](http://blog.natsusola.net/2018/02/blog-post_53.html)
---
這隻是 ~~小火龍~~ Angular
---
是由 Google 維護的開源 JavaScript 函式庫
全面採用 TypeScript
簡言之是一個包羅萬象的前端開發框架
擁有非常完整的工具鏈
前端的需求都能直接在這個框架內找到解法
---
這隻是 ~~種子~~ Vue
---
作者尤雨溪，在 AngularJS 工作之後，開發出了這個輕量的框架
在 github 上的三大前端框架中 [Vue](https://github.com/vuejs/vue) 擁有最多顆星
易學好上手
完整的擴展工具 Vue CLI 整合完整前端解決方案
大量的中文資源 豐富完整的文件
---
這隻是 ~~傑尼龜~~ React
---
Facebook 開發及維護的開源 JavaScript 函式庫
React 是一個產生及管理 UI 的函式庫
透過學習 React 生態系的過程中
可以讓我們順便學習現代化 Web 開發的重要觀念
（例如：模組化、ES6+、Webpack、Babel、ESLint、函數式程式設計等）
<!-- .element: class="fragment" -->
---
自定義 Component，透過 Component，可以將 UI 拆分為獨立的，可重複使用的部分
並單獨考慮每個部分，然後利用組合這些 Component 來製作複雜的 UI
---
react-developer-roadmap
https://github.com/adam-golab/react-developer-roadmap
---
###### tags: `前端`
下一章：[Node.js](https://hackmd.io/p/ry3rxDa2E#/)
{"metaMigratedAt":"2023-06-14T21:47:55.712Z","metaMigratedFrom":"YAML","title":"前端開發人員篇","breaks":true,"contributors":"[{\"id\":\"546d39ab-b539-465e-9792-3e057aa047ac\",\"add\":7866,\"del\":3857}]"}