--- # System prepended metadata title: 2020 年 Web 開發人員 - 實用指南 tags: [Job] --- --- tags: Job --- # 2020 年 Web 開發人員 - 實用指南 ## Web Development In 2020 - A Practical Guide @TraversyMedia * Youtube影片:point_down: {%youtube 0pThnRneDjw %} ## 前言 Intro In this complete and practical guide, we will look at just about every technology in web development. You do NOT have to learn everything here. It is simply a guide of options to help you understand what is what and pick your learning path 在這份完整而實用的指南中，我們將介紹Web開發中的幾乎所有技術。 您不必學習所有內容。 它是一份指南，可幫助您了解什麼是什麼並選擇學習路徑。 ## 影片快速跳轉 What Do You Want To Do? - 1:28 The Necessities - 2:38 HTML/CSS (Building Blocks) - 7:10 Responsive Web Design - 9:18 Reusable CSS Components - 10:50 CSS Frameworks - 12:26 Vanilla JavaScript - 13:52 Tools (Git, Dev Tools, etc) - 16:28 Basic Deployment - 20:45 Basic Frontend Dev - 23:15 Where To Now? - 24:12 Frontend Framework - 25:00 Svelte - 27:14 State Management - 28:32 SSR (Next & Nuxt) - 30:40 SSG (Gatsby & Gridsome) - 33:04 TypeScript - 35:05 Frontend Wizard - 37:06 Server Side Language - 37:42 Server Side Framework - 42:52 Database - 47:37 GraphQL - 52:08 CMS & Headless CMS - 53:41 Deployment & DevOps - 55:22 Full Stack Dev - 59:23 Mobile Development - 59:51 PWA - 1:01:43 Desktop Apps With Electron - 1:03:19 JAMstack - 1:04:24 Serverless Architecture - 1:06:10 API-First Design - 1:07:24 Machine Learning & AI - 1:08:12 Speech Recognition - 1:09:03 Web Assembly - 1:09:42 Advice & Thank You - 1:11:21 --- ## 目標導向 What Do You Want To Do? ![](https://i.imgur.com/cQAYOnh.png) ## 必要工具 The Necessities ![](https://i.imgur.com/DzSAJ7B.png) ## 外觀區塊 HTML/CSS (Building Blocks) ![](https://i.imgur.com/g4ZYRdG.png) ## 響應式設計 Responsive Web Design ![](https://i.imgur.com/fXgmLCQ.png) ## 自製CSS樣式 Reusable CSS Components ![](https://i.imgur.com/sqCKMBc.png) ## CSS框架 CSS Frameworks ![](https://i.imgur.com/vdGtRUQ.png) ## 原生(香草口味)JavaScript Vanilla JavaScript ![](https://i.imgur.com/y2uHi4B.png) ## 相關工具 Tools (Git, Dev Tools, etc) ![](https://i.imgur.com/oucvtIi.png) ## 部屬基礎 Basic Deployment ![](https://i.imgur.com/rSVTRUs.png) ## 成為初階前端開發者 Basic Frontend Dev ![](https://i.imgur.com/zPG6Wc2.png) ## 選哪一道? Where To Now? ![](https://i.imgur.com/KiCU2jF.png) - [ ] 前端: 三大框架 - [ ] 後端: 後端語言 ## 前端框架 Frontend Framework ![](https://i.imgur.com/6BqY7rz.png) * 建議都試試看，選擇一個深入 :::info ## 2020 值得關注 ::: ## 編譯時框架 Svelte ![](https://i.imgur.com/aifRJbb.png) * 官網 https://svelte.dev/ ## 狀態管理 State Management ![](https://i.imgur.com/3Q73It3.png) ## SSR (Next & Nuxt) ![](https://i.imgur.com/G0EU7Wp.png) ## SSG (Gatsby & Gridsome) ![](https://i.imgur.com/L8DomtN.png) ## TypeScript ![](https://i.imgur.com/pJDADkx.png) ## 資深前端(巫師) Frontend Wizard ![](https://i.imgur.com/plvrWBE.png) :::warning ## 後端之路 ::: ## 後端語言 Server Side Language ![](https://i.imgur.com/71yrWpU.png) ## 後端框架 Server Side Framework ![](https://i.imgur.com/DEaznll.png) ## 資料庫 Database ![](https://i.imgur.com/4GRdzEU.png) ## GraphQL ![](https://i.imgur.com/uVkgsyH.png) ## 網站後臺管理系統 CMS & Headless CMS ![](https://i.imgur.com/gHXKPbY.png) * 適合接案 ## 部屬環境 軟體開發與IT運維 Deployment & DevOps ![](https://i.imgur.com/H2ywagm.png) ## 全端開發 Full Stack Dev ![](https://i.imgur.com/ChkPerw.png) ## 手機程式開發 Mobile Development ![](https://i.imgur.com/gm02M2R.png) * 用網頁技術開發手機程式 ## PWA ![](https://i.imgur.com/yh6QQlI.png) ## 桌面程式開發 Desktop Apps With Electron ![](https://i.imgur.com/CqX97TI.png) * 用網頁技術開發應用程式 ## JAMstack ![](https://i.imgur.com/jzmmZOp.png) ## Serverless Architecture ![](https://i.imgur.com/Ktitw3P.png) ## API-First Design ![](https://i.imgur.com/WRFsycz.png) ## Machine Learning & AI ![](https://i.imgur.com/h0dA1CI.png) * Python ## Speech Recognition ![](https://i.imgur.com/C4vzqAM.png) ## Web Assembly ![](https://i.imgur.com/agTy2xW.png) ## Advice & Thank You ![](https://i.imgur.com/1945wc2.png) ![](https://i.imgur.com/304u6Ot.png) --- ## 相關連結 Reference ### Svelte * [網頁元件開發框架Svelte 3釋出，強調回應性](https://www.ithome.com.tw/news/130180) * [如何看待 svelte 这个前端框架？-知乎](https://www.zhihu.com/question/53150351) ### SSR (Next & Nuxt) ![](https://i.imgur.com/G03cHZW.png) * [Isomorphic SSR 的第一哩路： Next.js](https://blog.v123582.tw/2018/09/18/Isomorphic-SSR-%E7%9A%84%E7%AC%AC%E4%B8%80%E5%93%A9%E8%B7%AF%EF%BC%9A-Next-js/) ### Web Assembly * [W3C 接納 WebAssembley 成為正式標準，提升瀏覽器內程式效能和效果](https://technews.tw/2019/12/06/w3c-accepts-webassemble-as-official-standard/?fbclid=IwAR1glkvGk8XiS46__TzP54YZ-3w0wNURqMOc02UuWu5_GOu3as8Qp1OB1HE)