前端開發，最新技術棧總結

1. 基礎前端開發者

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. 一個成熟的前端開發者

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 全棧開發工程師

3.1 學習一門後端語言

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

Node.js

Python

PHP

C#

Go

學習的順序:

基礎的後端語言語法

數據結構和工做流

包管理

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等等)

 

4. 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執行效率快

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

開放 & 可調試