2019Web開發技術指南和趨勢

​如下內容來自我特別喜歡的一個Youtube頻道: Traversy Media

這是一個2019年你成爲前端，後端或全棧開發者的進階指南:

一、你不須要學習全部的技術成爲一個web開發者

二、這個指南只是經過簡單分類列出了技術選項

三、我將從個人經驗和參考中給出建議

四、首選咱們會介紹通用的知識, 最後介紹2019年的Web的一些趨勢

一、基礎前端開發者

1.1 HTML & CSS

最基礎的知識：

• 語義化的HTML元素

• 基礎的CSS語法

• Flexbox & Grid

• CSS變量

• 瀏覽器開發者工具

1.2 響應式佈局

響應式設計將再也不是網頁的加分項, 而是必須的

• 設置viewport

• 非固定寬度

• 媒體查詢

• 使用 rem 替代 px

• 移動優先,柱狀顯示

1.3 基礎的部署工做

學會如何部署一個靜態網站到服務器

• 註冊一個域名(NameCheap, Google Domains)

• 管理共享主機或虛擬機(Inmotion, Hostgator, Bluehost)

• FTP, SFTP 文件上傳(Filezilla, Cyberduck)

• 靜態頁面託管(Netlify, Github Pages)

1.4 SASS預處理器

雖然不是必須的, 可是推薦去學, 基礎知識的掌握很簡單

• 結構化CSS

• 變量

• 嵌套樣式表

• Minxins & 函數

• 繼承

1.5 原生JavaScript語法

不使用任何框架和庫區學習原生的JS語法

• 數據類型, 函數, 條件判斷, 循環, 湊總府

• DOM操做和事件

• JSON

• Fetch

• ES6+(箭頭函數, Promise, async/await, 解構)

1.6 知足了基本的前端開發者的條件

• 構建靜態站點

• 構建UI佈局(拿到設計圖可以使用HTML/CSS還原)

• 添加一些交互功能

• 部署和維護網站

如今能找到最低水平的Web開發工做, 可是這是遠遠不夠的....

二、一個成熟的前端開發者

2.1 HTML & CSS框架

HTML/CSS框架目前沒有之前那麼有意義, 可是我仍是介意你選擇一個學習(這裏做者想隱射的應該是, 在jquery時代, HTML/CSS框架的學習是必須的).

• BootStrap

• Materialize

• Bulma

2.2 Git和其餘工做流工具

Git絕對是每個Web開發者必須掌握的工具, 這裏也有一些其餘的工做流工具的建議.,

• 基礎的命令行( touch, cd, mkdir什麼的總得會, 命令行在下面的工具中都會用到)

• Git(版本控制)

• NPM 或 Yarn(包管理)

• Webpack 或者 Parcel(打包工具)

• Gulp 或者 Grunt(任務管理和構建工具)

• 編輯器插件(ESLint, Prettier, Live Server等)

2.3 前端框架

學習一個前端框架在目前前端開發中是必須的.

• 在大公司開發中很是流行

• 更多的交互 & 有趣的UI組件

• 組件化 & 模塊化前端代碼

• 對團隊有利

2.4 狀態管理

對於使用框架的大型前端項目, 你也許須要使用狀態管理工具去管理你的應用級的狀態

• Redux(Context API)

• Apollo(GraphQL Client)

• Vuex

• NgRx

2.5 知足一個成熟的前端開發者條件

• 構建一個優秀的前端應用

• 流暢和穩定的前端工做流

• 多人開發 & 熟練使用Git

• 請求後端API & 前端數據響應

知足以上條件, 你可以順利的找到一個前端的工做並乾得很出色~

三、全棧開發工程師

3.1 學習一門後端語言

成爲一個全棧工程師或軟件工程師, 你將須要學習一個服務端語言和相關技術

學習的順序:

• 基礎的後端語言語法

• 數據結構和工做流

• 包管理

• HTTP/路由

3.2 服務端框架

不要重複造輪子, 學習一門框架去構建更好和更快的應用

• Node.js(Express, Koa, Adonis)

• Python(Django, Flask)

• PHP(Laravel, Symfony)

• C# (ASP.NET)

3.3 數據庫

絕大多數以爲應用都會使用到數據庫, 這裏有一些選擇:

• 關係型數據庫(MySQL, PostgreSQL, MS SQL)

• 非關係型數據庫 (MongoDB, Counchbase)

• 雲服務 (Firebase, AWS, Azure, DocumentDB)

• 輕量級(SQLite, NeDB, Redis)

3.4 服務端渲染

像React, Vue 和 Angular等端架均可以進行服務端渲染

• Next.js(React)

• Nuxt(Vue)

• Angular Universal(Angular)

3.5 內容管理系統

內容管理系統容許快速開發併爲您的客戶提供更新內容的能力. 在你須要快速開發網站的時候, 它們是很適合的. 特別是對於自由開發者.

• 基於PHP的 (Wordpress, Drupal)

• 基於JS的 (Ghost, Keystone)

• 基於Python的 (Mezzazine)

• 基於.Net的 (Piranha, Orchard CMS)

3.6 DevOps 和部署

學習語言和框架是一回事, 可是安裝環境, 測試和部署有事另一回事

• 部署 (Linux, SSH, Git, Nginx, Apache)

• 平臺 (Digital Ocean, AWS, Heroku, Azure)

• 可視化(Docker, Vagrant)

• 測試 (單元測試, 集成測試, 函數式測試, 系統測試)

3.7 知足全棧工程師的條件

• 設置全棧的開發環境和工做流

• 構建後端服務API和微服務

• 數據庫操做

• 可以獨立開發應用(前端和服務端)

• 部署到雲端(SSH, Git, Servers等等)

四、2019技術趨勢和其餘

4.1 原生應用開發

• React Native(使用React構建原生應用)

• NativeScirpt(Angular, Typescript, JavaScript)

• Ionic (HTML/CSS/JS 實現混合應用)

• Flutter (使用Dart語言開發原生應用的移動端SDK)

• Xamarin (使用C#開發的移動端應用)

4.2 使用Electron開發桌面應用

Electron是一個使用JavaScript構建跨平臺的桌面應用工具.

• 使用到了 Chromium內核和Node.js

• 兼容Windows, Mac & Linux

• 崩潰報告, 調試和性能分析

4.3 GraphQL & Apollo

GraphQl是對於API的一種革命性新方法，查詢語言比標準RESET嚴格得多

• 只查詢你想要的東西

• 前端和後端能夠合做得更爲順利

• 查詢語句很是簡單且很像JSON語句

• Apollo是一個發送請求到GraphQL的客戶端

• 使用的是Gatsby靜態站點生成器

4.4 TypeScript

TypeScript是一個JavaScript的超集, 它添加了靜態類型等不少特性.

• 變量, 函數等類型

• 類

• 其餘ES6的特性

• 在Angular中被使用到, 同時也能夠在React和Vue中被使用

4.5 無服務架構

無需建立和管理本身的服務器

• 使用第三服務執行「無服務器功能」

• 例如 AWS, Netify & Firebase

• 在Gatsby靜態站點生成器很流行

• 無服務框架

4.6 AI和機器學習

AI和機器學習已經被普遍應用在全部的程序和技術中, 甚至包括web開發中.

• 機器學習能夠容許Web應用程序隨時間進行調整

• 雖然AI還有很長的路要走, 可是咱們會看到它會更多的用在web中

• 雖然目前絕大多數都是Python寫的, 但也有Tensorflow.js和Brain.js這些JS的庫

4.7 區塊鏈技術

如今許多公司使用區塊鏈技術進行數字交易, 由於它們更安全和有效率.

• Solidity(一門智能合約的編程語言)

• Mist(以太坊開發的瀏覽器, 用於發送交易和合約)

• 比特幣API(能夠構建app和整和比特幣的區塊鏈開發)

4.8 PWA

Progressive Web Apps是一個web app可是在功能和樣式上給用戶帶來原生應用使用體驗的一項技術.

• 響應式

• 在離線環境下也可以提供服務

• 相似App的交互

• HTTPS

• 可靠, 迅速, 更好

4.9 Web Assembly

相似彙編的二進制格式的代碼能夠被瀏覽器執行. 能夠使用相似C/c++和Rust等高級語言進行編寫.

• 比JavaScript執行效率快

• 更安全 - 強制的瀏覽器同源和安全協議

• 開放 & 可調試

以上就是2019 - Web開發技術指南和趨勢的所有內容, 要想知道更多細節, 請看Youtube視頻: Web Development in 2019

來自：李棠輝

連接：https://segmentfault.com/a/1190000017483325