作者：李棠輝

https://segmentfault.com/a/1190000017483325

這是一個(gè)2019年你成為前端，后端或全棧開發(fā)者的進(jìn)階指南:

1、你不需要學(xué)習(xí)所有的技術(shù)成為一個(gè)web開發(fā)者

2、這個(gè)指南只是通過(guò)簡(jiǎn)單分類列出了技術(shù)選項(xiàng)

3、我將從我的經(jīng)驗(yàn)和參考中給出建議

4、首選我們會(huì)介紹通用的知識(shí), 最后介紹2019年的Web的一些趨勢(shì)

1、基礎(chǔ)前端開發(fā)者

1.1 HTML & CSS

最基礎(chǔ)的知識(shí)：

• 語(yǔ)義化的HTML元素

• 基礎(chǔ)的CSS語(yǔ)法

• Flexbox & Grid

• CSS變量

• 瀏覽器開發(fā)者工具

1.2 響應(yīng)式布局

響應(yīng)式設(shè)計(jì)將不再是網(wǎng)頁(yè)的加分項(xiàng), 而是必須的

• 設(shè)置viewport

• 非固定寬度

• 媒體查詢

• 使用?rem?替代?px

• 移動(dòng)優(yōu)先,柱狀顯示

1.3 基礎(chǔ)的部署工作

學(xué)會(huì)如何部署一個(gè)靜態(tài)網(wǎng)站到服務(wù)器

• 注冊(cè)一個(gè)域名(NameCheap, Google Domains)

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

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

• 靜態(tài)頁(yè)面托管(Netlify, Github Pages)

1.4 SASS預(yù)處理器

雖然不是必須的, 但是推薦去學(xué), 基礎(chǔ)知識(shí)的掌握很簡(jiǎn)單

• 結(jié)構(gòu)化CSS

• 變量

• 嵌套樣式表

• Minxins & 函數(shù)

• 繼承

1.5 原生JavaScript語(yǔ)法

不使用任何框架和庫(kù)區(qū)學(xué)習(xí)原生的JS語(yǔ)法

• 數(shù)據(jù)類型, 函數(shù), 條件判斷, 循環(huán), 湊總府

• DOM操作和事件

• JSON

• Fetch

• ES6+(箭頭函數(shù), Promise, async/await, 解構(gòu))

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

• 構(gòu)建靜態(tài)站點(diǎn)

• 構(gòu)建UI布局(拿到設(shè)計(jì)圖能夠使用HTML/CSS還原)

• 添加一些交互功能

• 部署和維護(hù)網(wǎng)站

現(xiàn)在能找到最低水平的Web開發(fā)工作, 但是這是遠(yuǎn)遠(yuǎn)不夠的....

?

2、一個(gè)成熟的前端開發(fā)者

2.1 HTML & CSS框架

HTML/CSS框架目前沒有以前那么有意義, 但是我還是介意你選擇一個(gè)學(xué)習(xí)(這里作者想隱射的應(yīng)該是, 在jquery時(shí)代, HTML/CSS框架的學(xué)習(xí)是必須的).

• BootStrap

• Materialize

• Bulma

2.2 Git和其他工作流工具

Git絕對(duì)是每一個(gè)Web開發(fā)者必須掌握的工具, 這里也有一些其他的工作流工具的建議。

• 基礎(chǔ)的命令行(?touch,?cd,?mkdir什么的總得會(huì), 命令行在下面的工具中都會(huì)用到)

• Git(版本控制)

• NPM 或 Yarn(包管理)

• Webpack 或者 Parcel(打包工具)

• Gulp 或者 Grunt(任務(wù)管理和構(gòu)建工具)

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

2.3 前端框架

?

學(xué)習(xí)一個(gè)前端框架在目前前端開發(fā)中是必須的.

• 在大公司開發(fā)中非常流行

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

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

• 對(duì)團(tuán)隊(duì)有利

2.4 狀態(tài)管理

對(duì)于使用框架的大型前端項(xiàng)目, 你也許需要使用狀態(tài)管理工具去管理你的應(yīng)用級(jí)的狀態(tài)

• Redux(Context API)

• Apollo(GraphQL Client)

• Vuex

• NgRx

2.5 滿足一個(gè)成熟的前端開發(fā)者條件

• 構(gòu)建一個(gè)優(yōu)秀的前端應(yīng)用

• 流暢和穩(wěn)定的前端工作流

• 多人開發(fā) & 熟練使用Git

• 請(qǐng)求后端API & 前端數(shù)據(jù)響應(yīng)

滿足以上條件, 你能夠順利的找到一個(gè)前端的工作并干得很出色~

?

3、全棧開發(fā)工程師

3.1 學(xué)習(xí)一門后端語(yǔ)言

成為一個(gè)全棧工程師或軟件工程師, 你將需要學(xué)習(xí)一個(gè)服務(wù)端語(yǔ)言和相關(guān)技術(shù)

學(xué)習(xí)的順序:

• 基礎(chǔ)的后端語(yǔ)言語(yǔ)法

• 數(shù)據(jù)結(jié)構(gòu)和工作流

• 包管理

• HTTP/路由

3.2 服務(wù)端框架

不要重復(fù)造輪子, 學(xué)習(xí)一門框架去構(gòu)建更好和更快的應(yīng)用

• Node.js(Express, Koa, Adonis)

• Python(Django, Flask)

• PHP(Laravel, Symfony)

• C# (ASP.NET)

3.3 數(shù)據(jù)庫(kù)

絕大多數(shù)覺得應(yīng)用都會(huì)使用到數(shù)據(jù)庫(kù), 這里有一些選擇:

• 關(guān)系型數(shù)據(jù)庫(kù)(MySQL, PostgreSQL, MS SQL)

• 非關(guān)系型數(shù)據(jù)庫(kù) (MongoDB, Counchbase)

• 云服務(wù) (Firebase, AWS, Azure, DocumentDB)

• 輕量級(jí)(SQLite, NeDB, Redis)

3.4 服務(wù)端渲染

像React, Vue 和 Angular等端架都可以進(jìn)行服務(wù)端渲染

• Next.js(React)

• Nuxt(Vue)

• Angular Universal(Angular)

3.5 內(nèi)容管理系統(tǒng)

內(nèi)容管理系統(tǒng)允許快速開發(fā)并為您的客戶提供更新內(nèi)容的能力. 在你需要快速開發(fā)網(wǎng)站的時(shí)候, 它們是很適合的. 特別是對(duì)于自由開發(fā)者.

• 基于PHP的 (Wordpress, Drupal)

• 基于JS的 (Ghost, Keystone)

• 基于Python的 (Mezzazine)

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

3.6 DevOps 和部署

學(xué)習(xí)語(yǔ)言和框架是一回事, 但是安裝環(huán)境, 測(cè)試和部署有事另外一回事。

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

• 平臺(tái) (Digital Ocean, AWS, Heroku, Azure)

• 可視化(Docker, Vagrant)

• 測(cè)試 (單元測(cè)試, 集成測(cè)試, 函數(shù)式測(cè)試, 系統(tǒng)測(cè)試)

3.7 滿足全棧工程師的條件

• 設(shè)置全棧的開發(fā)環(huán)境和工作流

• 構(gòu)建后端服務(wù)API和微服務(wù)

• 數(shù)據(jù)庫(kù)操作

• 能夠獨(dú)立開發(fā)應(yīng)用(前端和服務(wù)端)

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

?

4、2019技術(shù)趨勢(shì)和其他

4.1 原生應(yīng)用開發(fā)

• React Native(使用React構(gòu)建原生應(yīng)用)

• NativeScirpt(Angular, Typescript, JavaScript)

• Ionic (HTML/CSS/JS 實(shí)現(xiàn)混合應(yīng)用)

• Flutter (使用Dart語(yǔ)言開發(fā)原生應(yīng)用的移動(dòng)端SDK)

• Xamarin (使用C#開發(fā)的移動(dòng)端應(yīng)用)

4.2 使用Electron開發(fā)桌面應(yīng)用

Electron是一個(gè)使用JavaScript構(gòu)建跨平臺(tái)的桌面應(yīng)用工具.

• 使用到了 Chromium內(nèi)核和Node.js

• 兼容Windows, Mac & Linux

• 崩潰報(bào)告, 調(diào)試和性能分析

4.3 GraphQL & Apollo

GraphQl是對(duì)于API的一種革命性新方法，查詢語(yǔ)言比標(biāo)準(zhǔn)RESET嚴(yán)格得多

• 只查詢你想要的東西

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

• 查詢語(yǔ)句非常簡(jiǎn)單且很像JSON語(yǔ)句

• Apollo是一個(gè)發(fā)送請(qǐng)求到GraphQL的客戶端

• 使用的是Gatsby靜態(tài)站點(diǎn)生成器

4.4 TypeScript

TypeScript是一個(gè)JavaScript的超集, 它添加了靜態(tài)類型等很多特性.

• 變量, 函數(shù)等類型

• 類

• 其他ES6的特性

• 在Angular中被使用到, 同時(shí)也可以在React和Vue中被使用

4.5 無(wú)服務(wù)架構(gòu)

無(wú)需創(chuàng)建和管理自己的服務(wù)器

• 使用第三服務(wù)執(zhí)行“無(wú)服務(wù)器功能”

• 例如 AWS, Netify & Firebase

• 在Gatsby靜態(tài)站點(diǎn)生成器很流行

• 無(wú)服務(wù)框架

4.6 AI和機(jī)器學(xué)習(xí)

AI和機(jī)器學(xué)習(xí)已經(jīng)被廣泛應(yīng)用在所有的程序和技術(shù)中, 甚至包括web開發(fā)中.

• 機(jī)器學(xué)習(xí)可以允許Web應(yīng)用程序隨時(shí)間進(jìn)行調(diào)整

• 雖然AI還有很長(zhǎng)的路要走, 但是我們會(huì)看到它會(huì)更多的用在web中

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

4.7 區(qū)塊鏈技術(shù)

現(xiàn)在許多公司使用區(qū)塊鏈技術(shù)進(jìn)行數(shù)字交易, 因?yàn)樗鼈兏踩陀行?

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

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

• 比特幣API(可以構(gòu)建app和整和比特幣的區(qū)塊鏈開發(fā))

4.8 PWA

Progressive Web Apps是一個(gè)web app但是在功能和樣式上給用戶帶來(lái)原生應(yīng)用使用體驗(yàn)的一項(xiàng)技術(shù).

• 響應(yīng)式

• 在離線環(huán)境下也能夠提供服務(wù)

• 類似App的交互

• HTTPS

• 可靠, 迅速, 更好

4.9 Web Assembly

類似匯編的二進(jìn)制格式的代碼可以被瀏覽器執(zhí)行. 可以使用類似C/c++和Rust等高級(jí)語(yǔ)言進(jìn)行編寫.

• 比JavaScript執(zhí)行效率快

• 更安全 - 強(qiáng)制的瀏覽器同源和安全協(xié)議

• 開放 & 可調(diào)試

  ?

以上就是2019 - Web開發(fā)技術(shù)指南和趨勢(shì)的全部?jī)?nèi)容，你認(rèn)為哪個(gè)會(huì)更牛逼？

總結(jié)

以上是生活随笔為你收集整理的2019年全栈工程师技术指南和趋势！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。