web開發2020年趨勢分析（概轉）

時間 2019-12-16

標籤 web 開發 2020年趨勢分析欄目 HTML 简体版

原文原文鏈接

2019-12-10 補充： 有人說標題黨，有人說不知所謂，2020亂入什麼的。再次強調一下背景，本文爲brad traversy在youtube視頻的中文濃縮版，若是英文能夠的話，能夠去看下英文視頻。做者本意也是將web開發的相關方面全面的介紹一下，並涉及將來的一些趨勢，例如3大框架的一些趨勢，webassembly的趨勢，語音識別，去框架化等等，視頻也考慮了web開發的初學者，給出了一些前期學習的方向和必須學習的基礎知識等等。css

但願可以客觀的討論技術，減小無謂的消耗。html

更新

2019-12-10 無服務器架構新增描述「雲函數」及對應英文。前端

如下爲原文。vue

start 2019-12-08 14:30:00node

聲明

首先聲明，本篇文章屬於外網內容歸納和轉摘，加上部分我的理解，若有侵權行爲請聯繫我，將適當予以調整。react

內容來源：www.youtube.com/watch?v=0pT…linux

標題爲：Web Development In 2020 - A Practical Guidewebpack

正文開始

爲何要有這篇文章（視頻），是爲了給廣大前端未入門或剛入門者有一個宏觀的瞭解，前端開發能夠作什麼，有哪些發展路徑，早日找到本身的方向，作到心中有數。ios

你想幹啥？

編程的出發點很重要，就是你到底爲啥編程？nginx

工做
自由職業者
作顧問
創造一個app或者服務來賺錢
僅僅做爲愛好

僅僅做爲愛好恐怕是富二代乾的事情，大多數人都是工做所需吧。

工具箱1：必需品

電腦/操做系統 Mac, Windows, Linux
編輯器 vscode, sublime, visual studio, eclipse
瀏覽器 chrome, firefox
終端 bash, powershell, git bash, iTerm, Hyper
設計（可選） Adobe系列, Sketch, Figma

首先，傢伙事要齊全，電腦要有一個，臺式機仍是筆記本看我的狀況，做者推薦是mac，理由是對開發者比較友好，用起來順手，有些軟件只有mac版本的，好比sketch，固然個人見解是，用linux做爲開發電腦也沒啥問題，更接近服務器部署環境。

編輯器，做爲web開發，首推vscode，固然市面上也有討論vim和xxx之戰的長篇大論，個人理解是vim是一種編輯模式，vscode是ide，兩種並無直接衝突，都掌握就能夠了。

瀏覽器，首選chrome啦，firefox市場佔有率很低，個別喜愛人士除外。

終端，這個沒什麼說的，喜歡，熟悉哪一個，不用挑。

設計軟件，對於自由職業者可能比較重要，仍是adobe系列是王道啊。

HTML & CSS

做爲前端開發者，不管什麼級別，HTML和CSS都是基礎，必須掌握的技能。

HTML5（語義化，屬性，文檔類型等等）
CSS基礎（顏色，字體，定位，盒模型）
CSS 柵格和flex佈局
CSS 自定義屬性
CSS 動畫

贊成，這方面的典範就是張鑫旭同窗，若是對css或者html有疑問，只要在張同窗的博客裏面搜索一下，基本上95%的問題都能找到答案，這就是專業啊。css其實一直在與時俱進，時不時仍是得回頭看一下，總能習得一些過去不知道不會或者不熟悉的東西。做爲初學者，最好紮紮實實將這兩個基礎知識學習透徹。

響應式佈局

做爲現代網站項目，響應式佈局能力已是一個對開發人員的基本要求了。話很少說。

視口
媒體查詢
流寬度
rem單位制
移動端優先

從上面幾個方面去了解下響應式佈局，而後作幾個案例熟悉一下吧，不會太難的，注意，小程序裏的單位是rpx（若是我沒記錯的話）

自定義可複用CSS組件

建立你本身的模塊，熟練使用本身的可複用CSS組件。

Sass能夠研究下。

變量化
嵌套式定義
條件定義

這裏能夠對postcss再多瞭解瞭解，固然一切以項目須要爲基礎。sass，less，stylus之類均可以去了解下。

CSS 框架

CSS框架特別多

bootstrap
tailwind CSS
materialize
bulma

很差意思，我知道bootstrap大名鼎鼎，其餘的還了解semantic ui，你們去搜索一下css framework，會出來不少。這裏還接觸了一個新鮮的tailwind css，這個框架不提供成品組件，它以爲那些框架作的太多了，而是提供讓你定製本身框架的能力，具體有興趣的同窗能夠去了解下。

原生JavaScript

JavaScript是瀏覽器所使用的語言，也是web開發者所必須掌握的核心技能，讓你的頁面動起來。

基礎（變量，數據類型，函數，條件語句等等）
DOM（文檔對象模型）
JSON（懶得翻譯了）
Fetch API（請求/響應/Ajax）
Modern JS（ES6）

無論vue, react, typescript 最後一切都回到JavaScript，因此一個初學者，仍是要老老實實將JavaScript基礎打牢，原生JavaScript語法和特性多瞭解，框架的東西都是基於基礎上的一套理念的實現，各有各長處，甚至近些年還有一些反框架運動出現，提出了一切以業務目標爲前提。ES6的標準，看看阮老師的教程學習一下。

五分之一分割線

工具箱2

如下列出一些前端開發者另外一個工具箱裏面的東西。

git & github
瀏覽器開發者工具
編輯器擴展
emmet
npm/yarn
axios
webpack/parcel

版本控制，這個不可或缺哈，新近的開發者處於最好的時代，基本遠離了ftp,svn，只要掌握git和github的基本使用，就能夠活得不錯了，有空的時候再熟悉熟悉git bash，掌握下基本的git操做。

熟練掌握瀏覽器開發者工具，chrome開發者工具便可，有餘力的化，跟進下chrome每次版本更新的變化，保持知識的新鮮，也可做爲與同好的談資哈。

編輯器擴展，vscode或者其餘現代編輯器，自己功能基本已經足夠，可是仍然有一些個性化需求，是以擴展的形式來知足的，多嘗試一些前輩以爲好的擴展，不過也不要太貪心，機器配置很差的化，只留必須的擴展就夠了。

emmet 輔助html工具，不知道做者爲何單獨拎出來強調這個哈。

npm/yarn 這個做爲一個web開發，要有往全棧發展的覺悟，npm包是一個大海，一個星系，甚至是一個黑洞，好東西仍是須要淘的。yarn我的以爲不用也能夠了。npm ci已經基本夠用了。

axios 這裏我又不理解了，單獨把這個拎出來說是想表達瀏覽器從後臺服務取數據的重要性嗎，不過對於初學者，axios仍是很大衆的一個技能庫。

打包工具，從簡單使用到配置熟練，最後能掌握原理，提升打包效率，遇水架橋吧。parcel，號稱性能比webpack還高，學有餘力的同窗能夠多瞭解瞭解。

發佈基礎

web開發應該掌握一些基礎的發佈技能。

域名註冊(Namecheap, Google Domains等等)
主機管理(InMotion, Hostgator, Bluehost等等)
靜態主機服務(Netlify, Github Pages)
SSL證書
FTP/SFTP
SSH
CLI & GIT

大廠的同窗，發佈的工做基本是運維同窗給作了，不過對於中小企業，不少可能還須要本身來操做，這裏的技能基本都不太難，習慣了哪一個，其餘也基本能觸類旁通。好比域名註冊，騰訊雲、阿里雲都提供了相應的服務，主機管理學問就大了，國內的選擇阿里雲、騰訊雲、各類雲，國外的選擇也是選花眼。這個只能根據經驗來了。最近國外有關虛擬主機vps的競爭仍是很激烈的，基本都提供了免費1年，200、300美金不等的免費額度，能夠多試試。

做者特別強調了Netlify，以前我也有使用過，github+netlify的確也是一個不錯的選擇，對於想體驗自動化部署的同窗來講，能夠試試。

SSL證書，推薦letsencrypt 翻譯成中文就是「讓咱們加密吧」，雖然長可是比較好記。現時不少環境下對https仍是有很高要求的，免費的letsencrypt是不二之選啊。

FTP/SFTP 不想多少， SSH和基本的CLI命令行操做，後面的雲主機部分還會涉及到，這些知識都漸進了解便可。

前端開發基礎能力

綜合上述知識，一個前端開發已經具有了如下能力。

爲我的或小型商業機構創建站點
良好的移動端佈局
建立CSS動畫和效果
熟練掌握一個CSS框架
製做動態頁面
使用JavaScript建立小型客戶端應用
熟練使用瀏覽器開發者工具
具有熟練使用版本控制的能力
發佈和維護小型的項目

不補充啥了，比較簡單

接下來要幹啥呢？兩條路（向前仍是向後）

接下來你將面臨兩個選擇，不一樣的選擇針對不一樣的學習路徑。

繼續走前端開發之路(React, Vue, Angular)
服務器端語言(PHP, Python, C#, Go等等)

看做者的描述就能夠看出，前端開發沒啥好選的，就三條路，服務器端有個等等，意味着選擇的餘地大多了。誰說前端就是花裏胡哨呢，沒事就弄個新東西出來，其實服務器端語言纔是百花齊放，或者美其名曰解決不一樣的問題，這裏不爭論，繼續往下走。

前端開發框架(三選一)

前端開發框架方便你快速構建強大的單頁應用，具備統一的交互ui

React 仍然是最流行的框架，中等學習難度
Vue 持續增加中，最容易學習
Angular 更多使用在企業級開發中，學習曲線陡峭

我也只是對React和Vue略知一二，這裏你們能夠本身搜索下各大中小公司對前端崗位的要求條件，大致看來Vue在中國仍是比較火爆的，React在大公司中的使用比例也是很是高。

Svelte

編寫更少的代碼
不用虛擬DOM
很是快

做者很是喜歡的東西，我以前瞭解的也很少，就不瞎比比了，大意也是去框架化，僅用原生JavaScript來創造一些代碼。推薦在小型項目和我的項目中試着使用體驗如下。

狀態管理

大型應用，基本上都會用到第三方狀態管理工具庫，不過儘量少用吧。

React - Redux, Context API with Hooks
Vue -Vuex
Angular - NGRX, Services
Apollo Client

按做者的思路，好比React和Angular中已經有了一些狀態管理工具的替代品（方案），因此儘可能少用第三方的狀態管理工具，奧卡姆剃刀來了，能少用就少用吧。

五分之二分割線

服務器端渲染（SS-R）

使用NEXT(React)和NUXT(Vue)來進行服務器端渲染

更-好-的-搜-索-引-擎-優-化
文-件-系-統-路-由
靜-態-導-出
C-S-S寫在JS中

靜態站點生成(SSG)

使用Gatsby(React)和Gridsome(Vue)來構建靜態站點。

更好的搜索引擎優化
文件系統路由
構建時從本地文件獲取數據
插件系統
GraphQL獲取數據

本人不才，新的博客就是用Gatsby來搭建的，以前是hexo，靜態站點生成是一個趨勢，對於想在互聯網創建我的站點、或者小企業宣傳站點的開發者，靜態站點生成也是一個不錯的選擇，頁面打開夠快，維護也很方便。不事後面會提到，結合內容管理系統，事半功倍。

TypeScript

靜態類型（變量，函數等等）
工具支持
模塊、修飾器、類
編譯成乾淨的JS代碼

很遺憾，懶惰成性的我，一直說要學習下TS，但是始終仍是沒有系統學習下，隨着大趨勢來看，TS仍是值得花點時間學習的，若是想繼續往前端開發方向發展的話。畢竟微軟爸爸的親兒子，仍是很強的。

總結SHIKE：前端路徑圖

熟練掌握一個前端框架
創造一些高階的前端應用/接口
順暢的前端開發流程
熟練與後臺api進行交互
熟練管理應用和組件的狀態
JIAFEN項：服務器端渲染（S-S-R）/ JINGTAI站點SHENGCHENG（S-S-G）

上面的內容，加以多個項目的CHUILIAN，基本算是一個ZHONGJI的前端開發者了，下面咱們要往全棧開發者的MUBIAO前JIN了。

服務器端語言(多選一)

要成爲一個全棧開發者或者後臺開發者，就須要學習一下服務器端程序語言和相應的服務器技術

Node.js
Python
PHP
C#
Ruby
GoLang
Java
Rust

各類語言的優劣就不細講了，我也講不來，Node.js是對前端開發者來講最好的入門選擇，我的做爲興趣愛好，也用過一段時間的PHP和Python，腳本語言基本都是相通的。固然想更進一步的話，必須對服務器端技術有更深層次的認識，cpu、內存、進程管理等等。另外若是你對Web Assembly感興趣的話，Rust就是比較合適的選擇了。

服務器端框架（多選一）

Node.js - Express, Koa, Adonis, Feathers.js, Nest.js
PHP - Laravel, Symfony, Slim
Python - Django, Flask
C# - ASP.NET MVC
Java - Spring MVC, Grails
Ruby - Ruby On Rails, Sinatra
Go -Reval

這玩意，怎麼選，已有的項目選了什麼，你學就是了，若是你要本身選擇一個，我建議遵循這個原則：人員、業務、技術，必須保證有兩個指標是成熟的，你所熟悉的。怎麼理解呢，也就是說，千萬不要在你不熟悉的業務領域選擇一種新技術，那就是做死，若是開發這個項目的開發人員你還不是特別熟悉的話，回去準備一根繩子吧，長一點。上面說的那些框架，國內的使用狀況和國外其實還有一些不一樣，具體狀況具體分析。

五分之三分割線