前端經驗分享

目錄

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

JavaScript 的歷史

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

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

Component

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

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

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

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

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

約定優於配置

版本控管

Code Review

RESTful API，Web API

自動化測試

前端的定位分歧

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

聚焦在網頁設計（Web Design）

主要技能：
HTML、CSS、視覺設計、動態效果、SEO、a11y（無障礙網頁）
互動設計、使用者體驗、易用性測試、遊戲設計

介面設計師

2. 前端工程師

技能圍繞著 JavaScript，理解 瀏覽器，處理數據來呈現各種應用

將設計稿轉換為具體呈現並可操作互動的網站

Svg、Canvas、Audio、Video
地圖應用：Google Map、Leaflet、OpenLayers、Cesium、ArcGIS
圖表資料視覺化：D3.js、Chart.js
3D 應用：Three.js、Babylon.js
遊戲：Pixi.js、Phaser
跨平台技術：Electron、React Native

tags: 前端經驗分享