Javascript tue les navigateurs Web

Un Web à 99 % sans JavaScript : est-ce possible ?

JavaScript est imprévisible, vieux et me fait parfois vomir. Je ne veux plus l'utiliser. Maintenant, cette ligne est parfaite pour attirer votre attention, mais en même temps, elle est fausse car les développeurs ne peuvent pas vivre sans JavaScript, en particulier les développeurs front-end.
Cette exploration consiste à trouver des moyens d'éviter JavaScript. Quand je dis « éviter JavaScript », je ne suggère pas d’utiliser quelque chose qui est transpilé en JavaScript. Ce que je veux dire en fait, c'est que je veux juste un minimum de JavaScript dans la sortie finale de mon code d'application.

Regardez ça sur YT

Utilisation excessive de JavaScript : pourquoi c'est un problème

Les développeurs d'aujourd'hui dépendent fortement de JavaScript pour tout, des frameworks front-end aux interactions API. Mais est-il vraiment nécessaire d’y compter autant ? Voici ce qui se passe : les développeurs se sentent souvent obligés d'utiliser JavaScript alors que des alternatives plus simples et plus efficaces sont disponibles.

Prenez des frameworks populaires comme React, Vue, Angular et Svelte. Ceux-ci sont géniaux pour créer des sites Web dynamiques et réactifs, mais peuvent être excessifs pour des applications plus simples. Ils introduisent une complexité inutile, augmentant finalement la courbe d'apprentissage et faisant de la maintenance un casse-tête.

Alors, quel est le problème avec JavaScript ?

Une utilisation intensive entraîne plusieurs problèmes critiques, notamment :

1. Temps de chargement plus lent – Les gros bundles JavaScript ralentissent les performances des pages. Chaque bibliothèque que vous ajoutez augmente le poids de votre projet, ce qui ralentit les temps de chargement.
2. Problèmes de rendu côté client – De nombreux frameworks s'appuient inutilement sur le rendu client, ce qui peut entraîner des retards et des problèmes de performances. Les applications React, par exemple, restituent l'intégralité de la page Web à l'aide d'un DOM virtuel, ajoutant ainsi plus de temps avant qu'une page Web ne devienne interactive.
3. Dépendances lourdes – Plus vous ajoutez de bibliothèques, plus vous rencontrerez des problèmes de compatibilité, de mises à jour de version et de conflits de dépendances.
4. Coûts de maintenance cachés – Suivre les mises à jour constantes et les changements potentiels dus à une dépendance excessive à l'égard des packages devient une affaire coûteuse en termes de temps et de ressources.

Le compilateur JIT : O Boy !

L'un des domaines clés dans lesquels JavaScript tente d'améliorer les performances est la compilation JIT (Just-In-Time). Les navigateurs modernes, comme le moteur V8 de Chrome, compilent JavaScript en code machine au moment de l'exécution.

L'objectif est de rendre JavaScript aussi rapide que possible.

Cependant, cette optimisation a un coût. Les compilateurs JIT modifient parfois le comportement du code JavaScript, introduisant souvent des bugs et des problèmes inattendus qui peuvent fragiliser votre application Web. En termes simples, les optimisations des compilateurs JIT peuvent être un pari.

Bogues courants du compilateur JIT

Voici quelques-uns des bugs les plus notoires :

• Mauvaise compilation : le compilateur JIT peut produire une sortie incorrecte s'il optimise mal les sections de code.
• Élimination des vérifications des limites : dans une tentative d'optimisation, le compilateur JIT peut ignorer les vérifications nécessaires telles que les limites du tableau, ouvrant ainsi la porte à des plantages.
• Élimination de la redondance : lorsque le compilateur JIT suppose que le code répété est redondant, il peut éliminer des sections importantes, provoquant un comportement imprévisible.

Ces problèmes de compilateur soulignent l'importance de tester JavaScript de manière approfondie pour éviter des problèmes inattendus. Mais plus important encore, ils montrent pourquoi nous devons réduire JavaScript autant que possible pour réduire le risque que de nouveaux problèmes surviennent.

Alternatives côté client à JavaScript

La bonne nouvelle est que vous n’êtes pas obligé de rester coincé dans la boucle JavaScript. Plusieurs alternatives ont vu le jour pour réduire JavaScript tout en conservant les fonctionnalités. Deux des options les plus intéressantes sont HTMX et WebAssembly.

HTMX : l'hypermédia sous stéroïdes

HTMX permet aux développeurs de créer des applications Web dynamiques et interactives avec un minimum de JavaScript. Au lieu de s'appuyer sur JavaScript pour chaque interaction, HTMX envoie du HTML réel depuis le serveur, réduisant ainsi le besoin de restituer l'intégralité de l'interface utilisateur avec des frameworks JavaScript comme React.

Imaginez ceci : au lieu de renvoyer une réponse JSON pour que votre frontend la traite, HTMX vous permet d'envoyer du HTML directement depuis le backend, réduisant ainsi le taux de désabonnement côté client. HTMX s'appuie sur les ancres et formulaires HTML traditionnels pour passer des appels directement au serveur, le tout sans JavaScript.

HTMX가 인기 있는 이유:

• 최소 학습 곡선 – HTML에 몇 가지 속성을 추가하면 바로 실행됩니다.
• HTML과 함께 작동 – 과도한 JavaScript를 사용하여 DOM을 조작하지 마세요.
• 우아한 대체 – 누군가가 브라우저에서 JavaScript를 비활성화하더라도 HTMX 기반 앱은 일부 추가 기능 없이도 계속 작동합니다.

자바스크립트가 없으면 많은 앱이 중단되는 세상에서 HTMX는 더 넓은 호환성과 더 나은 성능을 보장합니다. 기본으로 돌아가서 HTML 요소에서 직접 요청하고, 스크립트로 앱을 부풀리지 않고 양식이나 클릭 가능한 요소와 같은 대화형 구성 요소를 처리합니다.

WebAssembly: 강력한 성능

WebAssembly(Wasm)의 목적은 JavaScript를 완전히 대체하는 것이 아니라 계산량이 많은 작업을 처리하는 것입니다. 이는 게임 성능, 데이터 과학 계산 또는 이미지 처리일 수 있으며 JavaScript는 성능 관점에서 이를 잘라내지 않습니다.

WebAssembly를 사용하면 C, C, Rust와 같은 언어를 컴파일하여 JavaScript를 사용하지 않고도 클라이언트 측에서 계산량이 많은 특정 작업을 수행할 수 있습니다. 따라서 WebAssembly는 웹 브라우저 내에서 비디오 편집, 게임 또는 데이터 처리와 같은 작업에 이상적입니다.

WebAssembly의 주요 이점:

• 뛰어난 성능: JavaScript가 처리하기 어려운 CPU 사용량이 많은 작업에 최적화되었습니다.
• 브라우저에서 직접 실행: JavaScript와 마찬가지로 브라우저 지원의 이점을 누리지만 JavaScript 파싱/렌더링 비효율성이 필요하지 않습니다.
• 이식성: 동일한 코드를 뛰어난 효율성으로 여러 브라우저에서 컴파일하고 실행할 수 있습니다.

많은 계산을 처리해야 하는 사이트의 경우 WebAssembly를 사용하면 작업 속도를 높이고 로딩 시간을 단축할 수 있습니다.

서버측: JavaScript를 버릴 시간인가?

JavaScript는 한때 클라이언트 측에만 국한되어 있었지만 Node.js가 도입되면서 서버에서도 엄청난 인기를 얻었습니다. Node에는 비동기식 이벤트 처리, 비차단 I/O, 그리고 물론 스택 전체에서 하나의 언어를 사용하는 등 많은 기능이 있습니다. 그러나 JavaScript의 함정(동적 타이핑, 프로토타입 오염과 같은 보안 위험, 복잡성 증가)은 여전히 ​​남아 있습니다.

다행히도 서버측에는 JavaScript를 100% 대체할 수 있는 방법이 있습니다. 다음은 몇 가지입니다:

1. 고(고랭)

Go의 경량 고루틴은 스레드의 메모리 오버헤드 없이 동시 확장성이 뛰어난 시스템을 가능하게 합니다. 이 언어는 대규모 트래픽과 함께 매우 빠른 성능이 필요한 애플리케이션에 특히 적합합니다.

2. 장고(파이썬)

Django는 보안 분야에서 가장 인기 있는 제품입니다. 프로토타입 오염 및 Redos 공격(JavaScript에서 발생하기 쉬운)과 같은 취약점을 줄입니다. Go만큼 확장되지는 않지만 Django는 소규모 애플리케이션이나 보안에 민감한 애플리케이션에 적합합니다.

3. PHP(라라벨)

PHP는 항상 신뢰할 수 있는 백엔드 언어였으며 최신 프레임워크인 Laravel을 사용하면 중소 규모 프로젝트를 쉽게 관리할 수 있습니다. 자동 라우팅과 뛰어난 플러그인 생태계를 갖춘 PHP는 JavaScript의 부상에도 불구하고 여전히 개발 분야에서 그 자리를 지키고 있습니다.

4. 루비 온 레일스

빠른 개발을 위해 Ruby on Rails는 우아하고 개발자 친화적인 환경을 제공합니다. 대규모 애플리케이션을 처리하는 데 최고는 아닐 수 있지만 빠르고 확장 가능한 솔루션을 목표로 하는 소규모 팀에는 적합합니다.

JavaScript 프레임워크의 숨겨진 비용

특히 클라이언트 측과 서버 측의 모든 작업에 더 많은 JavaScript를 사용하면 숨겨진 비용이 많이 발생합니다. JavaScript 번들의 크기가 클수록 더 많은 문제에 직면하게 됩니다. 당신이 반대하는 것은 다음과 같습니다:

• Package Bloat – Lebih banyak perpustakaan dan kebergantungan yang anda tambahkan, lebih banyak keluaran akhir anda melambung dengan kod yang tidak diperlukan.
• Peningkatan Penyelenggaraan – Memastikan kebergantungan tersebut dikemas kini akan mewujudkan overhed penyelenggaraan dan berisiko merosakkan apl anda apabila perpustakaan menjalani kemas kini utama.
• Memecahkan Perubahan – Kemas kini rangka kerja (atau kemas kini perpustakaan kecil) mungkin memecahkan kefungsian sedia ada, menyebabkan anda berebut untuk menulis semula sebahagian besar kod.

Penyelesaiannya? Utamakan Prestasi dan Keselamatan

Akhirnya, mengurangkan JavaScript bukan sahaja tentang mengelakkan pepijat atau masa muat yang perlahan—ia adalah tentang membina aplikasi web yang lebih pantas, lebih mudah dan lebih selamat. Dengan memunggah pengiraan berat ke WebAssembly, mengendalikan kemas kini UI secara asli dengan HTMX dan mengalihkan logik bahagian belakang ke bahasa yang lebih selamat seperti Go atau Python, anda akan meningkatkan projek web anda secara drastik.

Walaupun memotong JavaScript sepenuhnya mungkin tidak boleh dilaksanakan untuk semua orang, mengurangkan JavaScript sebanyak mungkin pastinya berbaloi untuk dilakukan. Ini semua tentang menggunakan alternatif moden untuk mengelak daripada menjadikan JavaScript sebagai hambatan pembangun.

Kesimpulan

Sama ada anda berhasrat untuk meminimumkan JavaScript pada klien atau pelayan, anda mempunyai kuasa untuk menjadikan aplikasi web anda lebih ramping, lebih pantas dan lebih selamat. HTMX dan WebAssembly menawarkan alternatif menarik untuk pembangunan bahagian hadapan yang berat JavaScript, manakala Go, Django dan Laravel ialah pilihan yang berdaya maju untuk bahagian belakang.

JavaScript berada di sini untuk kekal, tetapi kita tidak perlu bergantung padanya untuk segala-galanya. Dengan mengurangkan jejak JavaScript secara strategik, akhirnya kami boleh membina apl yang berprestasi lebih baik dan berskala dengan lancar.

Bersedia untuk mengurangkan JavaScript anda dan mengawal apl web anda? Mulakan percubaan hari ini!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!