# 現代 Web 開發的現況與未來 - 楊揚
###### tags: `jsdc2019`

{%hackmd @JSDC-tw/2019-announcement %}

> Start here

回顧 Modern Web 的分享
- **Spellbok of Modern Webbook**
- 理解現代 Web 開發 @上海
1. 分工模式的改變
1. 前後端（水平） -> 面向人、資料、機器（垂直）
2. 特徵：包含但不限於 Client Side，JS Everywhere
2. JavaScript Fatigue (JS 疲勞)
1. 多樣性：各種背景融入
2. 需求多
3. 成本低

Agenda: 現代 / 未來

## 現代
- [The Great Divide](https://css-tricks.com/the-great-divide/): 分成兩個世界
- 兩種不同的思維(注重用戶體驗 vs 完成基本需求)
- [The Design Tools Dilemma](https://www.freecodecamp.org/news/the-design-tool-dilemma-225541c4ad1d/)
- 設計師要不斷學習新工具
- Design vs Coding
- [Great DX vs Excellent UX](https://www.youtube.com/watch?v=-xZHWK-vHbQ)
- 開發工具工作變多變複雜，但 UX / UI 沒有跟上

2019.09 -> Web is Dead by Wired
App 崛起
不過若一個功能一個 App，會裝太多（2000 個？！），增加認知負擔，要建立複雜的負擔（圖示的順序 + 資料夾）
> 參考生物分類學 ...

超級 App -> 一大堆功能作在同一個 App 裡面，但對使用者最友善應該是一個具體服務一個 App，其實還是回歸到 Web Browser 的模式

### PWA vs AMP
AMP 漸漸被 Google 導入
中國傾向 App 內的小程序，對 W3C 也提出了 MiniApp 的標準，
但整體來說還是向 Web 靠攏

MiniApp 標準有六種

中台應用
> 許多具體服務整合到一個 UI 平台中

Desktop App? Productiveity App? Immersive App

Facebook Horizon

在線開發工具（不需配置在本機）：
2018.09 -> Prisma - 自動將 DB / API 轉成 GraphQL
2018.10 -> Netfixy
2018.10 -> Repl.it
2019.07 -> CodeSandbox
2019.07 -> Glitch
2019.09 -> Gatsby 靜態網頁產生 (取代 wordpress)
2019.10 -> Strapi

## 未來
開發上的大分裂
Web (Server 產生 HTML) vs App (App 本身的生命週期)
-> 開發者 vs 使用者體驗

"Frontend design"
不只是 Application

"Consumable UI Components"
分工組件 -> 視覺層面 / 資料組面

[Content Mesh (網狀內容)](https://www.gatsbyjs.org/blog/2018-10-04-journey-to-the-content-mesh/)
技術一體化 -> 看需求導入不同的混搭服務

提供工具：No-code vs Low-code

Web Dev Engine: 讓網頁製作像遊戲的關卡編輯器一樣簡單

#### Meta-framework:
- Mixed Language
- TypeScript 融入到 Babel + ESLint
- Rust + Reason + WebAssembly
- Modern CSS
- Monorepo
- 把數個應用放到同一個 repo 內開發
- [Micro-frontend](https://micro-frontends.org/)
- 拆分不同成的子應用，讓各自團隊開發，並整合到同一個產品內
- Architecture
- 提高抽象層級
- 分離 State / render

- Smart Assistant
- Prettier
1. Read your code
2. Create AST
3. Re-write code
- ESLint

- Design System
- Atom components
- Design Tokens (Atom 切更小)

### Web 3 DAPP3
- Blockchain 智能合約的應用：請求 resource 去中心化
- AlphaTown
- Decentraltown