---
title: '前端經驗分享'
---

<style>
iframe {
width: 100%;
height: 100%;
min-height: 600px;
}
</style>

## 前端經驗分享

---

## 目錄

1. JavaScript 的歷史
2. JavaScript 的崛起 + 前端工程化
3. Component
4. 約定優於配置
5. 前端的定位分歧

---

## JavaScript 的歷史

---

http://evolutionofweb.appspot.com/?hl=zh-tw

---

<iframe src="https://littlehorseboy.github.io/react-final-report/storybook-static/?path=/story/javascriptmilestone--allmilestone"></iframe>

---

<iframe src="https://littlehorseboy.github.io/react-final-report/storybook-static/?path=/story/javascriptmilestone--javascriptmilestone"></iframe>

---

<iframe src="https://littlehorseboy.github.io/react-final-report/storybook-static/?path=/story/javascriptmilestone--nodejsmilestone"></iframe>

---

## JavaScript 的崛起 + 前端工程化

---

可能也不算是崛起，而是必然的結果，因為無論怎麼變化，JavaScript 其實始終主宰著瀏覽器與外界交流的語言

---

### ECMAScript

ECMA （資訊和電信標準組織），訂定了 ECMAScript 的國際標準，讓各家瀏覽器必須遵照標準來實作

使得各家瀏覽器的差異逐漸縮小

---

### Ajax

因為這個技術，前端可以在瀏覽器上主動向伺服器發送請求，不需要跳頁就可以跟後端取得資料，所以有些資料邏輯的操作會放在瀏覽器端來管理

SPA 的購物網站

https://fandorashop.com/

傳統的購物網站

https://www.muji.com/tw/products/

---

### HTML5

初始版本 2014年10月

要讓瀏覽器實現的網路應用的標準集，實際指的是包括 HTML、CSS 和 JavaScript 在內的一套技術組合，減少瀏覽器對於外掛程式的需求 （像是 flash 或音樂之類的應用）

---

HTML5 的其中幾個 specification

Svg
Canvas
Audio
Video
Drag and Drop
Web Sockets
Web Workers
Web Storage

---

### Node.js

還有 [Node.js](https://hackmd.io/@VG05q7U5Rl6Xkj4FeqBHrA/ry3rxDa2E?type=slide#/)

---

## Component

這邊就要跳過 ES6 及 webpack 直接到 React 了

https://github.com/adam-golab/react-developer-roadmap

---

此時前端更注重的是資料與狀態的管理，以及它們如何跟畫面的整合與同步。

前端框架慢慢發展成 MVVM 模式，簡單說就是資料驅動畫面

---

React 可以將 UI 拆分為獨立的 Component，單獨考慮每個部分，可重複使用的部分，然後利用組合這些 Component 來製作複雜的 UI

---

## 約定優於配置

---

### 版本控管

---

### [Code Review](https://ithelp.ithome.com.tw/articles/10202760)

---

### [RESTful API](https://progressbar.tw/posts/53)，Web API

---

### 自動化測試

---

## 前端的定位分歧

---

1. 前端設計師 or UI/UX 設計師

聚焦在網頁設計（Web Design）
<!-- .element: class="fragment" -->

主要技能：
HTML、CSS、視覺設計、動態效果、SEO、a11y（無障礙網頁）
互動設計、使用者體驗、易用性測試、遊戲設計
<!-- .element: class="fragment" -->

[介面設計師](https://challenge.thef2e.com/news/9)

---

2. 前端工程師

技能圍繞著 JavaScript，理解 ==瀏覽器==，處理數據來呈現各種應用
<!-- .element: class="fragment" -->
將設計稿轉換為具體呈現並可操作互動的網站
<!-- .element: class="fragment" -->

<span>Svg、Canvas、Audio、Video</span><!-- .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" -->

---

###### tags: `前端經驗分享`