[[422976]]

【51CTO.com快譯】由于發(fā)生新冠疫情，如今很多企業(yè)通過網(wǎng)絡(luò)和云平臺開展業(yè)務(wù)，并在市場上保持競爭力。這種工作方式的轉(zhuǎn)變加劇了包括編程語言和框架在內(nèi)的技術(shù)解決方案之間的競爭。

因此，運(yùn)行Web項(xiàng)目變得更加困難。考慮到技術(shù)的發(fā)展趨勢，企業(yè)的首席技術(shù)官(CTO)和產(chǎn)品負(fù)責(zé)人可能會害怕錯過更多機(jī)會。因?yàn)殄e誤選擇付出的高昂代價讓他們感到后怕，尤其是在開發(fā)或部署大型項(xiàng)目的情況下。

本文將介紹一些網(wǎng)絡(luò)發(fā)展的最新趨勢和技術(shù)創(chuàng)新，并探討如何縮短開發(fā)時間、提高性能和安全性的技術(shù)堆棧。

1.選擇適合的基礎(chǔ)設(shè)施

選擇適合的基礎(chǔ)設(shè)施對于Web開發(fā)項(xiàng)目至關(guān)重要。對于架構(gòu)備選方案的評估和比較應(yīng)該考慮很多因素，例如性能、可擴(kuò)展性、容量、維護(hù)成本等。在這里產(chǎn)生的歧義可能會造成混淆。例如沒有DevOps的微服務(wù)架構(gòu)并不會運(yùn)行得更快。而為了提高開發(fā)速度，云平臺仍然是最好的選擇之一，盡管需要支出大量的費(fèi)用。

目前可以使用兩種主要類型的基礎(chǔ)設(shè)施服務(wù)——后端即服務(wù)(BaaS)和平臺即服務(wù)(PaaS)。開發(fā)人員對于采用BaaS和PaaS的態(tài)度以及兩者之間的選擇是不同的。

后端即服務(wù)(BaaS)也稱為移動后端即服務(wù)(MBaaS)，它為開發(fā)人員提供一種服務(wù)，可以借助應(yīng)用程序編程接口(API)或軟件開發(fā)人員工具包(SDK)將Web或移動應(yīng)用程序連接到云服務(wù)。采用BaaS，企業(yè)可以縮短上市時間，并減少在基礎(chǔ)設(shè)施管理方面的成本。主要的BaaS包括Parse、Firebase、AWS Amplify、Azure Mobile Apps、CloudKit。

功能即服務(wù)(FaaS)是另一種集成到BaaS中的云計(jì)算服務(wù)。它預(yù)見了一個用于開發(fā)、運(yùn)行和管理應(yīng)用程序功能的平臺。這種模型支持創(chuàng)建微服務(wù)應(yīng)用程序。在采用FaaS的情況下，其擴(kuò)展或縮減可以實(shí)現(xiàn)自動化。而行業(yè)知名的FaaS是IBM的CloudFunctions、亞馬遜的AWS Lambda、谷歌Cloud Functions、微軟Azure Functions，以及OpenFaaS。

平臺即服務(wù)(PaaS)為應(yīng)用程序開發(fā)提供基礎(chǔ)設(shè)施，允許客戶設(shè)計(jì)、測試和托管。這種基于平臺的服務(wù)作為公共基礎(chǔ)設(shè)施、私有云或公共云服務(wù)上的軟件運(yùn)行。它包括各種模板、工具、庫和代碼。采用PaaS，可以加快項(xiàng)目開發(fā)過程，同時降低成本。

下圖是跨各種類型基礎(chǔ)設(shè)施管理功能的示例。需要注意的是，這些功能的命名是通用的。

2.JAMstack作為單體架構(gòu)工具的替代品

JAMstack這一術(shù)語由Netlify公司的首席執(zhí)行官M(fèi)athias Billman引入，它意味著三個基本元素的組合：JavaScript、API和標(biāo)記。它可以被看作是一種快速、安全、可擴(kuò)展的Web和應(yīng)用程序開發(fā)的方法論。采用JAMstack，開發(fā)人員不必?fù)?dān)心后端服務(wù)器邏輯，只需關(guān)注表示層。大部分功能保留在客戶端，其他需要大量人工的功能通過第三方API實(shí)現(xiàn)。因此，許多SaaS應(yīng)用程序和出色的網(wǎng)站已經(jīng)使用JAMstack構(gòu)建。

這一趨勢為Web和應(yīng)用程序開發(fā)提供了更具潛力的發(fā)展前景，可以將更好的工具和技術(shù)(例如React、Webpack、React-router、GraphQL)結(jié)合在一個解決方案中。

JAMstack工作流

(1)編寫代碼并將其推送到源存儲庫。

(2)設(shè)計(jì)預(yù)建內(nèi)容。

(3)將構(gòu)建的文件發(fā)送到內(nèi)容交付網(wǎng)絡(luò)(CDN)。

(4)用戶請求頁面(不需要與源服務(wù)器交互，因?yàn)轭A(yù)構(gòu)建的內(nèi)容可以從CDN獲得)。

至于核心更新，它們是通過Git推送的。這允許通過最新的工具重新構(gòu)建站點(diǎn)。像Gatsby或Hugo這樣的靜態(tài)站點(diǎn)生成器就是此類工具的典型示例，因?yàn)樗鼈兪荍AMstack方法的一個組成部分。

Mozilla、Nike、Smashing Magazine等世界知名公司都在使用JAMstack。他們選擇這一解決方案的原因有所不同，其主要原因是通過在客戶端解決任務(wù)、加速負(fù)載和提高性能來減少對服務(wù)器的依賴。

根據(jù)Netlify公司進(jìn)行的一項(xiàng)調(diào)查，Jamstack的典型業(yè)務(wù)用例包括消費(fèi)者軟件(45%)、內(nèi)部工具(36%)和企業(yè)軟件(35%)(由于受訪者可以選擇多個選項(xiàng)，所以其總體比例高于100%)。

JAMstack非常適合每年為數(shù)百萬用戶提供服務(wù)的大型站點(diǎn)提供高可用性。但它不適合Web應(yīng)用程序開發(fā)。

3.靜態(tài)站點(diǎn)生成器的廣泛使用

靜態(tài)站點(diǎn)生成器(SSG)是用于基于模板或組件和內(nèi)容源創(chuàng)建HTML頁面的軟件應(yīng)用程序。SSG可能是數(shù)據(jù)庫驅(qū)動的內(nèi)容管理系統(tǒng)(CMS)的一種很好的替代方案。

SSG的應(yīng)用是開發(fā)新類或Web應(yīng)用程序的一個日益流行的趨勢。原因在于傳統(tǒng)Web應(yīng)用程序堆棧和SSG之間的差異。靜態(tài)站點(diǎn)生成器允許提前獲取頁面視圖并提供服務(wù)，而無需等待頁面被請求和生成。它涉及構(gòu)建時網(wǎng)站的任何視圖。由于預(yù)先呈現(xiàn)，使用SSG開發(fā)的網(wǎng)站對惡意軟件的防御性更高。

管理大型內(nèi)容項(xiàng)目的任務(wù)正在通過Web框架應(yīng)用程序(從Gatsby、Gridsome和Next到Nuxt)得到簡化。值得注意的是，F(xiàn)igma和DigitalOcean基于GatsbyJS，GatsbyJS被稱為擁有先進(jìn)生態(tài)系統(tǒng)的快速流暢的框架。

4.切換到Headless CMS

選擇Headless CMS的企業(yè)通過實(shí)施可擴(kuò)展且靈活的解決方案而受益。在被稱為后端內(nèi)容管理系統(tǒng)的Headless CMS中，作為表示層的“頭部”和內(nèi)容存儲庫的“主體”彼此分離。

Headless CMS中設(shè)想的界面允許用戶管理API和內(nèi)容。但是在這個解決方案中，內(nèi)容的顯示方式并未受到關(guān)注。其主要思想是存儲和交付內(nèi)容，使編輯人員能夠共同開發(fā)。

開發(fā)人員如今發(fā)現(xiàn)Headless CMS是一個合適的解決方案，因此可以看到基于Jamstack的Headless Ghost、Strapi和Netlify CMS越來越受歡迎。Tinder、Buffer、DuoLingo、Mozilla和DuckDuck將Ghost用于他們的博客。IBM、沃爾瑪、美國宇航局和法國興業(yè)銀行更喜歡在生產(chǎn)中使用Strapi。

根據(jù)調(diào)研機(jī)構(gòu)的一項(xiàng)調(diào)查，2019年全球Headless CMS軟件市場規(guī)模估計(jì)為3.285億美元，預(yù)計(jì)到2027年將達(dá)到16.286億美元;而從2020年到2027年將以22.6%的復(fù)合年增長率增長。

5.將無服務(wù)器和微服務(wù)結(jié)合起來

在過去的幾年中，后端開發(fā)趨勢已經(jīng)從單一應(yīng)用轉(zhuǎn)向微服務(wù)。與Docker、Kubernetes和無服務(wù)器架構(gòu)相結(jié)合，微服務(wù)架構(gòu)成為一種以指數(shù)級用戶群增長來擴(kuò)展快速增長項(xiàng)目的方法。

任何無服務(wù)器的微服務(wù)都位于無服務(wù)器供應(yīng)商的基礎(chǔ)設(shè)施中，如果應(yīng)用程序需要就會啟動。當(dāng)企業(yè)對高速實(shí)施和減少投資感興趣，他們通常選擇FaaS。通過采用無服務(wù)器的微服務(wù)，可以擺脫供應(yīng)商鎖定，企業(yè)根據(jù)項(xiàng)目選擇Lambda Serverless、Google Cloud Functions或Microsoft Azure Functions。

6.訪問自定義API

GraphQL用于提供API中數(shù)據(jù)的描述。它可以被視為基于REST架構(gòu)的替代方案。與REST相比，GraphQL是請求特定數(shù)據(jù)的合適工具。

為了呈現(xiàn)頁面，大多數(shù)應(yīng)用程序需要獲取復(fù)雜的數(shù)據(jù)。而采用GraphQL，可以在查詢中獲取所需的數(shù)據(jù)，而不會造成不必要的延遲。因此，用戶將會更快運(yùn)行應(yīng)用程序。數(shù)百家企業(yè)如今已經(jīng)采用了GraphQL。

企業(yè)Web應(yīng)用程序開發(fā)具有與企業(yè)級業(yè)務(wù)需求相關(guān)的特性。通過正確的開發(fā)方法，企業(yè)應(yīng)用程序有助于解決現(xiàn)有挑戰(zhàn)、實(shí)現(xiàn)營銷和其他業(yè)務(wù)目標(biāo)，其中包括更高的投資回報(bào)率。

由于企業(yè)的各個部門都有自己面臨的挑戰(zhàn)，因此軟件解決方案應(yīng)該與他們的需求相關(guān)聯(lián)。有時，企業(yè)會選擇一些應(yīng)以一致方式相互通信的企業(yè)應(yīng)用程序，從而獲得運(yùn)營優(yōu)勢。

7.調(diào)整Web開發(fā)路線圖

從前端的角度考慮Web應(yīng)用程序的開發(fā)表明，創(chuàng)建一致的產(chǎn)品風(fēng)格是一個挑戰(zhàn)。對于許多團(tuán)隊(duì)在產(chǎn)品方面進(jìn)行協(xié)調(diào)的大型企業(yè)來說尤其如此。因此，要創(chuàng)建具有吸引力的數(shù)字產(chǎn)品，企業(yè)需要一支在設(shè)計(jì)系統(tǒng)方面具有深厚專業(yè)知識的團(tuán)隊(duì)。

在這種情況下，樣式指南使企業(yè)能夠查找和使用所需的庫和文檔。而指南是一種受版本控制的代碼，因此與任何的文檔相比，它更清晰，更易于維護(hù)。在Web開發(fā)中，應(yīng)用設(shè)計(jì)系統(tǒng)已經(jīng)成為團(tuán)隊(duì)和方向之間合作的好方法，從而產(chǎn)生更好的關(guān)注點(diǎn)。

在開發(fā)方面出現(xiàn)的挑戰(zhàn)與許多原因有關(guān)，例如流行的微服務(wù)、基礎(chǔ)設(shè)施即代碼和容器編排到Kubernetes。為了應(yīng)對這些挑戰(zhàn)，需要負(fù)責(zé)企業(yè)Web開發(fā)的平臺工程團(tuán)隊(duì)參與進(jìn)來。

8.促進(jìn)復(fù)雜的解決方案應(yīng)用

在應(yīng)用程序中采用人工智能解決方案需要大量計(jì)算資源，但也有可能使用云計(jì)算提供商提供的機(jī)器學(xué)習(xí)(ML)工具。這些工具有效果但價格昂貴。架構(gòu)中采用任何一個新工具都會增加總成本。對復(fù)雜工具的部分需求是可以避免的，企業(yè)必須考慮到這一點(diǎn)。

值得注意的是，為了解決機(jī)器學(xué)習(xí)方面的挑戰(zhàn)，并不總是需要采用神經(jīng)網(wǎng)絡(luò)或GPU。簡單模型和工具以及適當(dāng)?shù)腜ython代碼的組合足以完成這些任務(wù)。

關(guān)于遺留應(yīng)用程序的現(xiàn)代化，正在使用“由外而內(nèi)”的方法來完成任務(wù)，舊代碼被封裝在新代碼中。這種方法提高了管理功能的能力。遺留系統(tǒng)的替代方法是一種“由內(nèi)而外”的方法，這意味著將新的單頁應(yīng)用程序(SPA)的開頭嵌入到包含舊SPA的HTML文檔中。

SPA框架用戶可以容忍增加的頁面大小帶來的性能影響。SPA注入允許刪除舊的SPA，直到新的SPA完全接管。

9.仔細(xì)研究新的機(jī)會

低代碼或無代碼平臺已經(jīng)成為人們關(guān)注的焦點(diǎn)。它們適用于解決有限領(lǐng)域的特定挑戰(zhàn)。低代碼平臺允許企業(yè)通過可視化界面和簡單邏輯而不是密集編碼來開發(fā)應(yīng)用程序和流程。

另一個有益的方法是為微前端導(dǎo)入地圖。當(dāng)多個微前端在一個應(yīng)用程序中組合時，系統(tǒng)會選擇哪些以及如何加載。開發(fā)人員集中創(chuàng)建獨(dú)特的解決方案或應(yīng)用更大的框架。導(dǎo)入地圖是在這兩種情況下都會提供幫助的新標(biāo)準(zhǔn)。

為微前端導(dǎo)入地圖可以準(zhǔn)確分離關(guān)注點(diǎn)。JS代碼指出要導(dǎo)入的部分，HTML中的腳本標(biāo)記顯示從何處加載前端。服務(wù)器用于生成HTML，因此可以在渲染時應(yīng)用動態(tài)配置。如今，導(dǎo)入地圖由Chrome維護(hù)。無論如何，SystemJ Spolyfill使更廣泛的應(yīng)用成為可能。

10.開發(fā)企業(yè)工具

Sentry是許多需要報(bào)告前端錯誤的團(tuán)隊(duì)的合適工具。在不同的終端用戶設(shè)備上檢測到的錯誤正在通過內(nèi)置功能(拒絕錯誤的模式和分組工具)進(jìn)行分類和處理。由于在持續(xù)交付(CD)管道中添加了Sentry，其調(diào)試變得更加方便和高效，因?yàn)楦菀渍页雠c哪些軟件錯誤相關(guān)。Sentry是一種Saas，但它確保了公共訪問，并且對于規(guī)模較小的用例是免費(fèi)的。

MLflow是一個用于管理機(jī)器學(xué)習(xí)生命周期的開源平臺。該工具由單獨(dú)的組件組成，即運(yùn)行集合、指標(biāo)和項(xiàng)目集合，以及在中央存儲庫中存儲和發(fā)現(xiàn)它們的注冊表。

MLflow支持開放標(biāo)準(zhǔn)，可以與生態(tài)系統(tǒng)的各種工具相結(jié)合。MLflow在AWS和Azure中可用，并且正在快速改進(jìn)，適用于現(xiàn)代項(xiàng)目。該工具適用于管理和跟蹤任務(wù)，并支持基于用戶界面(UI)和API的模型。與MLflow相關(guān)的主要問題是單一平臺中的大規(guī)模統(tǒng)一，包括模型評分和服務(wù)。

持續(xù)集成(CI)服務(wù)器和開發(fā)工具的需求量很大。他們將范圍從簡單的云托管服務(wù)轉(zhuǎn)變?yōu)橹С謽?gòu)建機(jī)器隊(duì)列的復(fù)雜的代碼定義的管道服務(wù)器。如今已有大量的選項(xiàng)，因此GitHub Actions的引入被認(rèn)為是非常關(guān)鍵的措施。無論如何，GitHub Actions使開發(fā)人員能夠處理小型項(xiàng)目。

內(nèi)置工具位于源代碼存儲庫中。社區(qū)圍繞這一功能聚集在一起，這導(dǎo)致了用戶貢獻(xiàn)工具的出現(xiàn)。這些工具正在通過GitHub市場實(shí)施。

代碼和Git歷史可以在備用主機(jī)中導(dǎo)出，但GitHub Actions上的開發(fā)工作流程沒有相同的功能。此外，開發(fā)人員應(yīng)該確定項(xiàng)目的規(guī)模是否足夠大，可以應(yīng)用獨(dú)立的管道工具。但是對于小型項(xiàng)目，GitHub Actions值得關(guān)注。

Web開發(fā)的未來

.NET5代表了將.NET Core和.NET Framework整合到單一平臺中的重要一步。企業(yè)應(yīng)該開始制定策略，將他們的開發(fā)環(huán)境(取決于部署目標(biāo)的框架的碎片組合)遷移到.NET 5或.NET 6的單一版本。當(dāng)它可用時，這種方法的優(yōu)勢將是一個通用的開發(fā)平臺，無論其運(yùn)營環(huán)境如何：Windows、Linux、跨平臺移動設(shè)備(通過Xamarin)或?yàn)g覽器(使用Blazor)。雖然多語言開發(fā)仍然是具有工程文化支持的企業(yè)的首選方法，但其他企業(yè)會發(fā)現(xiàn)在單一平臺上進(jìn)行標(biāo)準(zhǔn)化以使.NET開發(fā)更有效。

谷歌公司最近為Web開發(fā)人員提供了Flutter2.0版本。到目前為止，F(xiàn)lutter主要支持原生iOS和Android應(yīng)用程序。但是，F(xiàn)lutter團(tuán)隊(duì)的愿景是支持在每個平臺上構(gòu)建應(yīng)用程序。Flutter for Web是朝這個方向邁出的一步，因?yàn)樗m合從相同的代碼庫構(gòu)建適用于iOS、Android和瀏覽器的應(yīng)用程序，從而實(shí)現(xiàn)業(yè)務(wù)目標(biāo)。

為Web構(gòu)建表單仍然是前端開發(fā)的長期挑戰(zhàn)之一，尤其是React。React Hook Form可以替代以前使用的Formik。React Hooks在React Hook Form創(chuàng)建時就已經(jīng)存在，因此可以作為一流的概念：框架通過Hook將表單元素注冊和跟蹤為不受控制的組件，從而顯著減少重新渲染的需要。它的大小和所需的樣板代碼數(shù)量也得到了簡化。因此，開發(fā)人員可以使用現(xiàn)代工具為企業(yè)Web項(xiàng)目提供無縫的用戶體驗(yàn)。

以上概述了企業(yè)的首席技術(shù)官在定義開發(fā)策略時應(yīng)該考慮的Web應(yīng)用程序開發(fā)趨勢。這些趨勢可以為涵蓋其他趨勢的項(xiàng)目提供補(bǔ)充——從物聯(lián)網(wǎng)支持的語音搜索到運(yùn)動設(shè)計(jì)，以及網(wǎng)絡(luò)安全重要性的提高。

原文標(biāo)題：Top 10 Web Development Trends: How To Stay Ahead In 2021，作者：Yuriy Luchaninov

【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】