一、基礎者

1.1 HTML & CSS

最基礎的知識：

語(yu)義(yi)化的HTML元素(su)

基礎的CSS語法

Flexbox & Grid

CSS變量

瀏覽器開發(fa)者工具(ju)

1.2 響應式布(bu)局

響(xiang)應式設計將不(bu)再是網頁(ye)的(de)加(jia)分項, 而是必須的(de)

設置viewport

非固定寬度

媒體查詢

使用 rem 替代 px

移動優先(xian),柱狀顯示

1.3 基礎(chu)的(de)部署工作

學會如(ru)何部署一(yi)個靜態網站到(dao)服務器

注冊一個域(yu)名(NameCheap, Google Domains)

管理共(gong)享(xiang)主機(ji)或(huo)虛擬機(ji)(Inmotion, Hostgator, Bluehost)

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

靜態頁面(mian)托(tuo)管(guan)(Netlify, Github Pages)

1.4 SASS預(yu)處理器

雖然(ran)不是必須(xu)的, 但是推薦去學, 基礎知(zhi)識的掌握很簡(jian)單

結構化CSS

變量

嵌套樣式表

Minxins & 函數

繼承

1.5 原(yuan)生語法

不使用任何框架和(he)庫區學習(xi)原生的JS語(yu)法

數據類型(xing), 函(han)數, 條件(jian)判斷, 循環(huan), 湊總府(fu)

DOM操作和事件

JSON

Fetch

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

1.6 滿足了(le)基本的前端開發者的條(tiao)件

構建靜態站點

構(gou)建UI布(bu)局(拿到設計(ji)圖能(neng)夠使用HTML/CSS還原(yuan))

添加一些交互功(gong)能

部署和維護網站

現在(zai)能找到最低水平(ping)的工(gong)作, 但是這是遠(yuan)遠(yuan)不(bu)夠的....

二、一個成熟的(de)前端(duan)開發者(zhe)

2.1 HTML & CSS框架

HTML/CSS框架目前沒有以前那么有意(yi)義, 但(dan)是(shi)我還(huan)是(shi)介意(yi)你選擇(ze)一個學習(這里作者想(xiang)隱射的應該是(shi), 在jquery時代, HTML/CSS框架的學習是(shi)必(bi)須的).

BootStrap

Materialize

Bulma

2.2 Git和其(qi)他工作流工具

Git絕對是每一(yi)個Web開發者(zhe)必須(xu)掌握的(de)工具, 這里也有一(yi)些其他的(de)工作流工具的(de)建議.推(tui)薦：超詳細的(de) Git 實戰教程。

基礎的(de)命(ming)令行( touch, cd, mkdir什么的(de)總得會(hui), 命(ming)令行在下面的(de)工具(ju)中(zhong)都會(hui)用到)

Git(版(ban)本(ben)控制)

NPM 或 Yarn(包管(guan)理)

Webpack 或(huo)者 Parcel(打包工(gong)具)

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

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

2.3 前端(duan)框架

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

在大公司(si)開發中(zhong)非常流(liu)行

更多的交互 & 有(you)趣(qu)的UI組件(jian)

組件(jian)化 & 模塊(kuai)化前端代(dai)碼

對團隊有利

2.4 狀態管(guan)理

對于使(shi)用(yong)框架的大(da)型前端項目, 你(ni)也許(xu)需要使(shi)用(yong)狀(zhuang)態管理(li)工具去管理(li)你(ni)的應用(yong)級的狀(zhuang)態

Redux(Context API)

Apollo(GraphQL Client)

Vuex

NgRx

2.5 滿(man)足一個(ge)成熟的前端開發者條件

構建一(yi)個優秀(xiu)的前端應用

流(liu)暢和穩定(ding)的前端工(gong)作流(liu)

多人開發(fa) & 熟練使用(yong)Git

請求后(hou)端(duan)API & 前端(duan)數據響應

滿(man)足以上(shang)條件(jian), 你能夠(gou)順利的找到一個前端(duan)的工作(zuo)并(bing)干(gan)得很出(chu)色~

三、全棧開(kai)發工程師

3.1 學習一門后端語(yu)言

成(cheng)為一個(ge)全(quan)棧工(gong)程(cheng)師或軟(ruan)件工(gong)程(cheng)師, 你將需要學習一個(ge)服務端語言和(he)相(xiang)關技術(shu)

學習的順序:

基(ji)礎的后端語言(yan)語法

數據結構(gou)和工(gong)作流

包管理

HTTP/路由

3.2 服務端(duan)框架

不要重復造輪子, 學(xue)習(xi)一門框架去(qu)構(gou)建更好和更快的應(ying)用

Node.js(Express, Koa, Adonis)

Python(Django, Flask)

PHP(Laravel, Symfony)

C# (ASP.NET)

3.3 數據庫

絕(jue)大多數(shu)覺得應用(yong)都會(hui)使用(yong)到數(shu)據庫(ku), 這(zhe)里有一些選擇:

關系型數據庫(ku)(My, PostgreSQL, MS SQL)

非關系型數據庫(ku) (MongoDB, Counchbase)

云服務 (Firebase, AWS, Azure, DocumentDB)

輕量級(SQLite, NeDB, Redis)

3.4 服務端渲染(ran)

像React, Vue 和 Angular等端架都可(ke)以進行服務端渲(xuan)染

Next.js(React)

Nuxt(Vue)

Angular Universal(Angular)

3.5 內容管理(li)系統

內(nei)容管理系統允許快速開發并為您的(de)客戶提供(gong)更新內(nei)容的(de)能(neng)力. 在你需要快速開發網站的(de)時候, 它們是(shi)很適合(he)的(de). 特別是(shi)對于(yu)自由開發者.

基(ji)于(yu)PHP的 (Wordpress, Drupal)

基于(yu)JS的(de) (Ghost, Keystone)

基于Python的 (Mezzazine)

基(ji)于.Net的 (Piranha, Orchard CMS)

3.6 DevOps 和部署

學習語言和(he)框架是一回事(shi), 但是安裝環境(jing), 測試和(he)部署有(you)事(shi)另(ling)外一回事(shi)。

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

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

可視化(Docker, Vagrant)

測試(shi) (單(dan)元測試(shi), 集(ji)成測試(shi), 函數式測試(shi), 系統測試(shi))

3.7 滿足全棧(zhan)工程師的條件

設(she)置全棧(zhan)的開發環(huan)境和工作(zuo)流

構(gou)建后端服務(wu)API和微服務(wu)

數據庫操作

能(neng)夠(gou)獨(du)立(li)開發應(ying)用(前端和服(fu)務端)

部署到云端(duan)(SSH, Git, Servers等等)

四(si)、2019技術趨勢和其他(ta)

4.1 原生應用開發

React Native(使(shi)用React構建原(yuan)生應用)

NativeScirpt(Angular, Typescript, Script)

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

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

Xamarin (使(shi)用C#開發的(de)移(yi)動端(duan)應用)

4.2 使(shi)用(yong)Electron開(kai)發桌(zhuo)面應用(yong)

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

使用到了 Chromium內(nei)核和Node.js

兼容Windows, Mac & Linux

崩潰報告, 調(diao)試和性能分析(xi)

4.3 GraphQL & Apollo

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

只查詢你想要的(de)東(dong)西

前端和后端可以合作得更為順利

查詢語句非常(chang)簡單且很像JSON語句

Apollo是一(yi)個發(fa)送請求到GraphQL的客戶端

使(shi)用的是Gatsby靜態站點生成器(qi)

4.4 TypeScript

TypeScript是一(yi)個JavaScript的(de)超(chao)集, 它添加(jia)了靜態(tai)類型等(deng)很多特性.

變(bian)量, 函數等類(lei)型

類

其他(ta)ES6的特性(xing)

在Angular中被(bei)使用到, 同時也(ye)可以(yi)在React和Vue中被(bei)使用

4.5 無服務架構

無需創建和(he)管(guan)理自己的服(fu)務器

使(shi)用第三服(fu)務執行(xing)“無服(fu)務器功能”

例如(ru) AWS, Netify & Firebase

在(zai)Gatsby靜態站點生成器(qi)很流行

無服務框架

4.6 AI和(he)機器(qi)學習

AI和(he)機器學習已經被廣泛應用在(zai)所(suo)有的(de)程序和(he)技(ji)術中, 甚至包括中.

機(ji)器(qi)學習可以允許Web應用程序隨時間進行調整

雖然AI還有很長的(de)路要走, 但是我們會看到它會更(geng)多的(de)用在(zai)web中

雖然目前絕大多數(shu)都是(shi)Python寫(xie)的, 但也有(you)Tensorflow.js和Brain.js這些JS的庫

4.7 區塊鏈技術

現在許(xu)多公司使用區塊鏈技術進(jin)行數字交(jiao)易, 因為它們更安全和有效(xiao)率.

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

Mist(以太坊開發的瀏(liu)覽器, 用(yong)于發送交易(yi)和合約)

比特幣API(可以構建app和整和比特幣的區(qu)塊鏈開發)

4.8 PWA

Progressive Web Apps是(shi)(shi)一(yi)個web app但(dan)是(shi)(shi)在功能(neng)和樣式(shi)上給(gei)用戶帶來(lai)原生應用使用體驗的一(yi)項技術.

響應式

在離線(xian)環境(jing)下也(ye)能夠提(ti)供(gong)服務

類(lei)似App的交互

HTT

可(ke)靠, 迅速, 更(geng)好

4.9 Web Assembly

類(lei)(lei)似(si)匯編的(de)二(er)進制格式的(de)代(dai)碼(ma)可(ke)(ke)以被(bei)瀏(liu)覽器(qi)執行(xing). 可(ke)(ke)以使用類(lei)(lei)似(si)C/c++和Rust等高級語(yu)言進行(xing)編寫.

比(bi)JavaScript執行效率快

更安全(quan) - 強制的瀏(liu)覽器同源和(he)安全(quan)協議(yi)

開(kai)放(fang) & 可調試(shi)

以(yi)上就是2019 - Web開發(fa)技(ji)術指南和趨勢的全部內容，希望對你有所(suo)幫助。