相信很多非專(zhuān)業(yè)人士并不了解web前端，但是隨著web前端的發(fā)展，已經(jīng)有越來(lái)越多的人開(kāi)始加入到前端的隊(duì)伍中來(lái)了。那么web前端都學(xué)什么？Web都有哪些新技術(shù)？要知道前端開(kāi)發(fā)的快速發(fā)展，幾乎每年都會(huì)給開(kāi)發(fā)者帶來(lái)新的關(guān)鍵詞。在未來(lái)的一年，前端仍將專(zhuān)注于小程序，跨端開(kāi)發(fā)，超級(jí)應(yīng)用，前端工程化以及新技術(shù)應(yīng)用。下面我們就來(lái)具體看看。

web前端開(kāi)發(fā)需要學(xué)習(xí)的技術(shù)：

1、掌握基本web前端開(kāi)發(fā)技術(shù)：HTML、CSS、JavaScript、DOM、BOM、AJAX等，而且要了解它們?cè)诓煌瑸g覽器上的兼容情況、渲染原理和存在的Bug。

2、必須掌握網(wǎng)站性能優(yōu)化、SEO和服務(wù)器端開(kāi)發(fā)技術(shù)的基礎(chǔ)知識(shí)。

3、必須學(xué)會(huì)運(yùn)用各種web前端開(kāi)發(fā)與測(cè)試工具進(jìn)行輔助開(kāi)發(fā)。

4、除了掌握技術(shù)層面的知識(shí)，還要掌握理論層面的知識(shí)，包括代碼的可維護(hù)性、組件的易用性、分層語(yǔ)義模板和瀏覽器分級(jí)支持等。

5、未來(lái)web前端開(kāi)發(fā)工程師還要研究HTML5、web視覺(jué)設(shè)計(jì)、網(wǎng)站配色、網(wǎng)站交互設(shè)計(jì)模式等相關(guān)技術(shù)，前端的崗位很多，要注意選擇自己的技術(shù)方向，需要精通流行的幾個(gè)框架開(kāi)發(fā)。前端是入門(mén)簡(jiǎn)單，深入難，所以要往高級(jí)前端發(fā)展還需要不斷學(xué)習(xí)新技術(shù)。在互聯(lián)網(wǎng)行業(yè)，前端有WEB前端、HTML前端等，隨著互聯(lián)網(wǎng)技術(shù)發(fā)展，就業(yè)方向也有很多。web前端的就業(yè)方向有web架構(gòu)師、web前端工程師、HTML前端開(kāi)發(fā)工程師、網(wǎng)頁(yè)設(shè)計(jì)師等等。

HTML前端開(kāi)發(fā)

與Web前端開(kāi)發(fā)不同的是，使用HTML5不僅僅可以開(kāi)發(fā)前端，還有網(wǎng)頁(yè)游戲，手機(jī)APP，使用瀏覽器進(jìn)行3D渲染等一系列建立在HTML5標(biāo)準(zhǔn)與搭載其標(biāo)準(zhǔn)瀏覽器上的開(kāi)發(fā)，而未來(lái)可能會(huì)有更多的功能分支并入HTML5標(biāo)準(zhǔn)。web前端工程師

這個(gè)方向是目前從事Web前端開(kāi)發(fā)的主要就業(yè)方向

Web架構(gòu)師

薪資普遍比較高，技術(shù)要求高，掌握多種技能，包括：后端技術(shù)、DBA、Platform等等，甚至包括網(wǎng)站優(yōu)化SEO技術(shù)。

數(shù)據(jù)方向

數(shù)據(jù)研發(fā)這個(gè)是在Web開(kāi)發(fā)的基礎(chǔ)上用數(shù)據(jù)附能，懂可視化的一定是有前端能力的，懂hadoop的一定java玩的溜，屬于Web開(kāi)發(fā)的拓展方向。

大前端方向

比如阿里，在大量實(shí)踐rn和weex;由于公司內(nèi)部安卓/ios式微，一定程度上，前端把ios和安卓收編了，統(tǒng)稱(chēng)大前端(還有node)。

圖形學(xué)方向

前端自然是與圖形學(xué)有千絲萬(wàn)縷的聯(lián)系，除了上面提到了可視化，還有相關(guān)3d引擎的開(kāi)發(fā)工作。做這一行要求也非常高了，圖形學(xué)相關(guān)的算法，3d引擎的開(kāi)發(fā)，這都需要圖形學(xué)相關(guān)知識(shí)。

Web都有哪些新技術(shù)?

1、小程序

在這個(gè)項(xiàng)目中，今年仍然是項(xiàng)目突然進(jìn)展的一年。所有主要應(yīng)用程序都已啟動(dòng)，所有前端團(tuán)隊(duì)都有專(zhuān)門(mén)的程序開(kāi)發(fā)團(tuán)隊(duì)來(lái)滿(mǎn)足更快程序開(kāi)發(fā)的需求。與此同時(shí)，APP程序中的許多關(guān)鍵功能已經(jīng)被小程序所取代，甚至有些APP程序已經(jīng)變成了Nativex小程序外殼，上層應(yīng)用完全由小程序來(lái)實(shí)現(xiàn)。

在微信小程序出現(xiàn)之前，每個(gè)人都在談?wù)揌ybird和ReactNative，但這只是技術(shù)層面的狂歡，沒(méi)有注入商業(yè)屬性。小程序的出現(xiàn)，一方面告訴業(yè)界，Webview在當(dāng)前的設(shè)備上并沒(méi)有變壞，另一方面，告訴業(yè)界如何讓有能力的企業(yè)在超級(jí)應(yīng)用程序上的私有域中運(yùn)行。

另一方面，從技術(shù)角度來(lái)看，在上層DSL的嚴(yán)格限制下，超級(jí)APP可以定義滿(mǎn)足自身需求的網(wǎng)絡(luò)標(biāo)準(zhǔn)，彌補(bǔ)了當(dāng)前網(wǎng)絡(luò)標(biāo)準(zhǔn)的不足。最后，它可以與客戶(hù)端合作生產(chǎn)出各種類(lèi)似NSR的酷技術(shù)模型，離線(xiàn)、預(yù)裝、定制的網(wǎng)絡(luò)視圖(Webview)，這樣網(wǎng)絡(luò)最終可以以低成本實(shí)現(xiàn)原生版本的體驗(yàn)，不會(huì)像Weex那樣在終端外有點(diǎn)尷尬。然而，由于需要依靠超級(jí)應(yīng)用(微信、支付寶、百度、美團(tuán)、頭標(biāo)等)，由于各種平臺(tái)采用的具體方案不同，目前小程序的登陸方案也不同，有時(shí)需要開(kāi)發(fā)多套代碼。

2、跨終端開(kāi)發(fā)

對(duì)于跨終端開(kāi)發(fā)，RN狀態(tài)通常是成熟的，或者沒(méi)有太多的開(kāi)發(fā)前景，因?yàn)樗匀惶幱?.61版本，而1.0版本似乎還很遙遠(yuǎn)。因此，今年許多團(tuán)隊(duì)改變了他們的調(diào)子，以 Flutter為Release，這重新點(diǎn)燃了希望，并使 Flutter前端渴望嘗試。

3、前端工程

在前端編程中，開(kāi)發(fā)人員最重要的基本成就是提高效率，此時(shí)前端開(kāi)發(fā)人員將繼續(xù)迭代和優(yōu)化。我們?cè)?jīng)談?wù)撨^(guò)Yoman、CLI和其他系列的構(gòu)建工具，但是在團(tuán)隊(duì)成長(zhǎng)之后，我們?nèi)匀粠缀鯖](méi)有任何感覺(jué)。相比之下，Java學(xué)生從未聽(tīng)說(shuō)過(guò)從沒(méi)聽(tīng)說(shuō)過(guò) Spring Boot 配置工程師。今年，許多團(tuán)隊(duì)正在構(gòu)建一個(gè)完整的前端DevOps流程套件，一些團(tuán)隊(duì)也開(kāi)始協(xié)作并一起構(gòu)建。無(wú)論是網(wǎng)絡(luò)項(xiàng)目還是程序項(xiàng)目，從新項(xiàng)目、開(kāi)發(fā)、調(diào)運(yùn)、部署、測(cè)試、發(fā)布、運(yùn)行和維護(hù)到監(jiān)控統(tǒng)計(jì)，都有完善的設(shè)施來(lái)保證和提高效率，前端流程在未來(lái)將更加標(biāo)準(zhǔn)化。

展望2020年前端的發(fā)展，前端工程系統(tǒng)肯定會(huì)更加閉環(huán)，不像腳手架那么簡(jiǎn)單，而是將集成開(kāi)發(fā)環(huán)境(IDE)結(jié)合起來(lái)，從項(xiàng)目初始化、代碼編寫(xiě)、配置項(xiàng)、灰度級(jí)和發(fā)布，打開(kāi)業(yè)務(wù)屬性，形成一個(gè)完整的閉環(huán)。

4、Serverless

目前，許多公司都在做BFF層來(lái)滿(mǎn)足這部分需求，但仍然無(wú)法擺脫運(yùn)行維護(hù)和機(jī)器配送的障礙。隨著無(wú)服務(wù)器(Serverless)的逐步登陸，代碼的BFF層將擺脫操作和維護(hù)、機(jī)器分配等復(fù)雜問(wèn)題。同時(shí)，前端學(xué)生將高概率地編寫(xiě)這部分代碼，而服務(wù)器端學(xué)生將專(zhuān)注于中型系統(tǒng)的實(shí)現(xiàn)。就業(yè)務(wù)而言，試錯(cuò)的成本也將大大降低。

隨著Node.js成為前端開(kāi)發(fā)人員必備的技能，云計(jì)算的持續(xù)流行將使無(wú)服務(wù)器成為可能。隨著越來(lái)越多的開(kāi)發(fā)人員嘗到研發(fā)的甜頭，無(wú)服務(wù)器必將改變前端的研發(fā)模式。同時(shí)，使用無(wú)服務(wù)器的學(xué)生肯定會(huì)使用TS。這也意味著如果沒(méi)有在2020年寫(xiě)測(cè)試，它可能真的過(guò)時(shí)了。

5、WebAssembly

WebAssembly是一種新的字節(jié)碼格式。目前，主流瀏覽器支持WebAssembly。與JS的解釋和執(zhí)行不同，WebAssembly字節(jié)碼與底層機(jī)器代碼非常相似，可以快速加載和運(yùn)行，因此性能比JS解釋和執(zhí)行有了很大提高。也就是說(shuō)，WebAssembly不是一種編程語(yǔ)言，而是一種字節(jié)碼標(biāo)準(zhǔn)，需要用高級(jí)編程語(yǔ)言編譯并放入WebAssembly虛擬機(jī)中運(yùn)行。瀏覽器制造商需要做的是根據(jù)WebAssembly規(guī)范實(shí)現(xiàn)虛擬機(jī)。使用WebAssembly，您可以在瀏覽器上運(yùn)行任何語(yǔ)言。從Javascript到TypeScript到Babel，這些都需要翻譯成js來(lái)執(zhí)行，而WebAssembly嵌入在瀏覽器中，不需要翻譯就可以直接執(zhí)行，所以執(zhí)行效率自然要高得多。

例如，AutoCAD軟件是由AutoCAD生產(chǎn)的自動(dòng)計(jì)算機(jī)輔助設(shè)計(jì)軟件，可用于繪制二維圖形和基本三維設(shè)計(jì)。使用時(shí)無(wú)需編程即可自動(dòng)繪圖，因此廣泛應(yīng)用于民用建筑、裝飾、工業(yè)制圖、工程制圖、電子工業(yè)、服裝加工等諸多領(lǐng)域。

AutoCAD是由大量的C代碼編寫(xiě)的軟件，經(jīng)歷了從桌面到移動(dòng)再到網(wǎng)絡(luò)的許多技術(shù)變革。此前，在InfoQ上有一篇題為《AutoCAD WebAssembly: Moving a 30 Year Code Base to the Web》的演講，即通過(guò)網(wǎng)絡(luò)組裝(WebAssembly)，許多舊的C代碼可以在網(wǎng)絡(luò)上運(yùn)行，執(zhí)行效率得到保證。

Hrome的核心JavaScript引擎V8現(xiàn)在包括了Liftoff，一個(gè)新的WebAssembly baseline編譯器。Liftoff簡(jiǎn)單快速的代碼生成器大大提高了WebAssembly應(yīng)用程序的啟動(dòng)速度。2019年，許多公司將開(kāi)始投資于網(wǎng)絡(luò)組裝的學(xué)習(xí)和轉(zhuǎn)型。據(jù)信，網(wǎng)絡(luò)組裝將在2020年經(jīng)歷一個(gè)爆炸性時(shí)期。

6、5G

2021年，5G將是一個(gè)不可分割的話(huà)題。首先，5G帶寬的增加帶來(lái)了傳統(tǒng)網(wǎng)絡(luò)復(fù)雜性的提高，就像2G到4G過(guò)程中從WAP純超鏈接時(shí)代向4G全畫(huà)面視頻時(shí)代的轉(zhuǎn)變一樣。5G肯定是一個(gè)巨大的變化，但它絕對(duì)不會(huì)在一夜之間發(fā)生。因?yàn)橄鄳?yīng)的配套設(shè)施也需要逐步完善，如硬件性能和瀏覽器處理速度。服務(wù)器端渲染無(wú)疑是捷徑之一。輕前端和重后端，5G是一座橋梁。將渲染放在后端并不像同構(gòu)那么簡(jiǎn)單。它需要關(guān)注和優(yōu)化渲染性能。在這個(gè)機(jī)會(huì)下，WebAssembly可能會(huì)得到快速發(fā)展，因?yàn)樗梢栽诤笈_(tái)縫合和連接多種語(yǔ)言。背景渲染的優(yōu)化也將帶來(lái)前端研發(fā)模式和技術(shù)架構(gòu)的變化。5G帶來(lái)的一切互聯(lián)將帶來(lái)不同于智能機(jī)器和普通電腦的各種場(chǎng)景。虛擬現(xiàn)實(shí)、可穿戴設(shè)備、載體系統(tǒng)、智能投影、智能交互等。將把網(wǎng)絡(luò)帶入各種垂直領(lǐng)域，這也意味著前端會(huì)有更多的空間。

以上我們介紹了web前端都學(xué)什么？Web都有哪些新技術(shù)？相信隨著5G的大規(guī)模業(yè)務(wù)，一批新的互聯(lián)網(wǎng)巨頭將會(huì)誕生。如果您想了解更多相關(guān)內(nèi)容，請(qǐng)您及時(shí)關(guān)注中培偉業(yè)。