譯者 | 布加迪

審校 | 重樓

2024年可謂是Web開發(fā)領(lǐng)域的多事之秋。大約70%的開發(fā)人員接受了人工智能（AI）的存在，在一定程度上平息了整個行業(yè)的擔(dān)憂。2025年將會有更多相同的一幕，但Web開發(fā)領(lǐng)域又會有哪些不太為人所知的開發(fā)技術(shù)趨勢？什么會讓你有別于其他可能已經(jīng)依賴AI的開發(fā)人員？

以下五個技術(shù)趨勢代表了塑造Web開發(fā)未來的重大轉(zhuǎn)變，它們將幫助你在新的一年里從開發(fā)人員當(dāng)中脫穎而出。

1. 不要低估Vanilla JS的力量

隨著開發(fā)人員意識到沒有依賴項(xiàng)的精簡代碼具有的價值，Vanilla JavaScript的重要性又重新引人矚目。

像React、Angular和Vue這樣的框架主導(dǎo)著Web，但它們會給簡單的項(xiàng)目增添不必要的復(fù)雜性。Vanilla JS的堅(jiān)固基礎(chǔ)不僅可以減少臃腫，還可以增強(qiáng)開發(fā)人員跨堆棧排除故障和優(yōu)化代碼的能力。

當(dāng)然，這并不意味著我們應(yīng)該成為穴居人，堅(jiān)持JS純粹主義，但我們不能否認(rèn)對框架的過度依賴及其對Web性能的影響。

不妨考慮一下這個用純JavaScript實(shí)現(xiàn)的簡單直觀的圖像滑動器的示例：

<div id="slider">
 <img id="slide" src="image1.jpg" alt="Image Slide">
 <button id="prev">Previous</button>
 <button id="next">Next</button>
</div>
const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
let currentIndex = 0;

const slide = document.getElementById('slide');
const prevButton = document.getElementById('prev');
const nextButton = document.getElementById('next');

prevButton.addEventListener('click', () => {
 currentIndex = (currentIndex - 1 + images.length) % images.length;
 slide.src = images[currentIndex];
});

nextButton.addEventListener('click', () => {
 currentIndex = (currentIndex + 1) % images.length;
 slide.src = images[currentIndex];
});

通常，人們會使用Swiper、Slick甚至Glide.js來執(zhí)行此操作，并添加額外的部分。但是如果使用Vanilla JS，你可以全面控制實(shí)現(xiàn)，無需額外庫帶來的開銷。這種方法不僅占用資源少，還促進(jìn)了對核心Web原則更深入的理解。

2. 傳統(tǒng)簡歷已死，使用Three.js

鑒于人人都在使用AI，如果你想成為一名脫穎而出的開發(fā)人員，僅僅發(fā)送一份文本簡歷還不夠。你希望它對ATS友好，但是你的實(shí)際工作成果又如何？你能創(chuàng)建什么？你又有什么引以為傲的資本？

一份出色的開發(fā)人員作品集可以讓你在競爭激烈的市場中脫穎而出，Three.js提供了一種無與倫比的方式來創(chuàng)建驚艷的交互式Web體驗(yàn)。

簡歷不再是靜態(tài)文檔，它們可以實(shí)時展示你的技術(shù)能力。一個精心執(zhí)行的Three.js項(xiàng)目可以展示你掌握現(xiàn)代Web技術(shù)的程度，同時給潛在的雇主留下深刻的印象。

下面是一個創(chuàng)建交互式旋轉(zhuǎn)立方體的基本示例：

<canvas id="three-canvas"></canvas>
import * as THREE from 'three';

const canvas = document.getElementById('three-canvas');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas });

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
 requestAnimationFrame(animate);
 cube.rotation.x += 0.01;
 cube.rotation.y += 0.01;
 renderer.render(scene, camera);
}

animate();

Three.js的優(yōu)點(diǎn)在于它允許你使用自定義紋理和著色器，以及從Blender導(dǎo)入你自己的模型。你掌握了這種JS方法后，還可以開始整合交互式要素，比如用戶控制的動畫或動態(tài)數(shù)據(jù)可視化。

3. 安全知識變得更為重要

僅在2022年，公司企業(yè)在網(wǎng)絡(luò)安全方面的支出就超過了700億美元，預(yù)計(jì)這個數(shù)字還會進(jìn)一步上升。這足以表明安全不再是一個可選的考慮因素。開發(fā)人員不能僅僅是碼農(nóng)，不能忽視內(nèi)容創(chuàng)建者在現(xiàn)實(shí)世界中的影響。

我們需要隨時了解常見的漏洞，比如跨站腳本（XSS）、SQL注入和不安全的API配置。積極主動的安全措施可以使組織避免代價高昂的安全事件，并保護(hù)用戶遠(yuǎn)離危害，擅長這些措施的開發(fā)人員將始終領(lǐng)先一步。

比如說，內(nèi)容安全策略（CSP）是緩解XSS攻擊的一種方法，你可以按照以下方式實(shí)現(xiàn)它們：

const express = require('express');
const helmet = require('helmet');

const app = express();

// Use Helmet to set secure headers
app.use(helmet());

// Example CSP
app.use(helmet.contentSecurityPolicy({
 directives: {
 defaultSrc: ["'self'"],
 scriptSrc: ["'self'", "'unsafe-inline'"]
 }
}));

app.get('/', (req, res) => {
 res.send('<h1>Secure App</h1>');
});

app.listen(3000, () => console.log('App running on http://localhost:3000'));

除了創(chuàng)建更好的網(wǎng)站外，還有另一個好處——關(guān)注安全的開發(fā)人員日益因事先應(yīng)對威脅的能力而備受重視。

更不用說，在特定領(lǐng)域工作天生就需要安全知識。如果你不知道如何設(shè)置符合PCI的主機(jī)托管，怎么能為一家金融科技公司工作？醫(yī)院網(wǎng)站開發(fā)人員會不知道《健康保險可攜性及責(zé)任性法案》（HIPAA）嗎？

這可以促進(jìn)與DevOps團(tuán)隊(duì)與安全團(tuán)隊(duì)的協(xié)作，從而獲得寶貴的新知識、擴(kuò)大圈子的機(jī)會以及職業(yè)發(fā)展途徑。

4. AI編程助理的未來在本地

編程助理在Web開發(fā)領(lǐng)域掀起了一場風(fēng)暴，GitHub Copilot及其他主流解決方案站在了最前沿。

然而遠(yuǎn)離公眾視線的是，用于編程的開源本地LLM大行其道，這表明開發(fā)人員與AI工具交互的方式出現(xiàn)了重大轉(zhuǎn)變。基于云的AI助理已主導(dǎo)了這個領(lǐng)域，但本地模型提供了獨(dú)特的優(yōu)勢——包括增強(qiáng)隱私、減少延遲和易于定制的環(huán)境。

在本地運(yùn)行模型允許開發(fā)人員始終全面控制敏感數(shù)據(jù)，同時避免依賴外部API。像Ollama這樣的工具使這個過程變得簡單直觀，可以無縫地設(shè)置和管理開源模型。就像下面這么簡單：

# Install Ollama
brew install ollama

# Pull an open-source model, such as Llama 2
ollama pull llama-3.2

# Start the model locally
ollama start llama-3.2

# Query the model + include instructions for the output itself
ollama query llama-3.2 "Explain the concept of closures in JavaScript and give me 5 examples."

在本地運(yùn)行時，模型直接依賴于硬件運(yùn)行，從而消除了網(wǎng)絡(luò)調(diào)用帶來的延遲。這對于速度和響應(yīng)性至關(guān)重要的迭代式任務(wù)尤其有用。此外，本地部署提供了為特定任務(wù)微調(diào)模型或者將它們與你的開發(fā)工作流程緊密集成的靈活性。

比如說，開發(fā)人員可以將本地運(yùn)行的模型與自動化腳本結(jié)合起來，創(chuàng)建適合自己需要的編程助理：

import subprocess

def query_model(prompt):
 result = subprocess.run(["ollama", "query", "llama-2", prompt], capture_output=True, text=True)
 return result.stdout

response = query_model("How do I implement a linked list in Python?")
print(response)

這種方法突顯了本地模型具有的變革潛力。它們支持AI輔助的先進(jìn)開發(fā)，同時提供比基于云的方法更好的隱私和定制性。一旦我們擁有功能更強(qiáng)大的模型，它們將成為PC端和移動設(shè)備端開發(fā)人員的標(biāo)準(zhǔn)。

5. 不要忽視無代碼和低代碼工具

你知道有些公司稱采用無代碼解決方案可以節(jié)省高達(dá)70%的開發(fā)成本嗎？隨著AI制作Python腳本、制作基本的CSS，甚至制作任何人都可以使用的自制課程，是時候面對現(xiàn)實(shí)了。

作為開發(fā)人員，如果我們要在2025年及以后蓬勃發(fā)展，必須學(xué)會如何將我們的知識與無代碼平臺的易用性結(jié)合起來。Webflow、Xano甚至Backendless都是職業(yè)捷徑，而不是改變行當(dāng)?shù)墓ぞ?/span>。

不要擔(dān)心這些工具會把你的事業(yè)置于險境。相反，我們應(yīng)該這樣看待它：無代碼和低代碼平臺正在改變構(gòu)建應(yīng)用程序的方式，為非技術(shù)人群降低門檻，同時加快開發(fā)進(jìn)度。這些工具使開發(fā)人員能夠?qū)Ｗ⒂趶?fù)雜的后端邏輯和集成，同時允許團(tuán)隊(duì)快速創(chuàng)建原型、進(jìn)行迭代開發(fā)。

雖然一些開發(fā)人員最初可能會對這些工具持懷疑態(tài)度，但它們簡化流程和方便數(shù)字創(chuàng)作的能力不容忽視。

在2025年保持敏捷

Web開發(fā)的發(fā)展軌跡一如既往地充滿了變數(shù)。由于變化日新月異，開發(fā)人員必須保持靈活適應(yīng)，不斷學(xué)習(xí)和接受新的工具和實(shí)踐。從利用Vanilla JS的簡單性到探索本地AI模型的強(qiáng)大功能，作為一名開發(fā)人員有很多機(jī)會可以脫穎而出。

保持領(lǐng)先意味著不僅要了解當(dāng)前的趨勢，還要預(yù)測未來的轉(zhuǎn)變。如果采用這些實(shí)踐，并將其整合到工作流程中，你就可以鞏固自身作為具有前瞻性思維的開發(fā)人員這一角色，隨時準(zhǔn)備應(yīng)對快速發(fā)展的數(shù)字世界帶來的重重挑戰(zhàn)。

原文標(biāo)題：5 Technical Trends To Help Web Developers Stand Out in 2025，作者：Alexander Williams