L'une des devises les plus connues du Web est la d'écrire une fois, exécuter partout
. Mais cette devise s'applique-t-elle uniquement à Java? Pouvons-nous l'utiliser également pour décrire JavaScript? La réponse est oui.
Dans cet article, je vous présenterai le concept de applications JavaScript isomorphes , décrivant ce qu'elles sont et pointant des ressources qui vous aident à développer ce type d'application.
Il y a plusieurs années, le Web était un tas de pages statiques faites avec du HTML et du CSS sans trop d'interactivité. Chaque action de l'utilisateur a obligé le serveur à créer et à servir une page complète. Grâce à JavaScript, les développeurs ont commencé à créer de beaux effets, mais c'est avec l'avènement de l'Ajax qu'une révolution a commencé. Les développeurs Web ont commencé à écrire du code qui pourrait communiquer avec le serveur pour envoyer et recevoir des données sans avoir à recharger la page.
Au fil des années, les responsabilités du code côté client ont beaucoup augmenté, résultant en un nouveau type d'application appelé Application à une page (SPA). Dans un spa, tous les actifs nécessaires sont récupérés avec une seule charge de page ou chargés dynamiquement et ajoutés à la page si nécessaire. Quelques exemples de spas sont Gmail et l'éditeur EmpileDit.
Les spas permettent une meilleure interactivité, car presque toutes leurs opérations sont exécutées sur le client, en gardant les communications avec le serveur au strict minimum. Malheureusement, ils ont également des problèmes majeurs. Discutons de certains d'entre eux.
Parce que les spas nécessitent plus de code côté client que les pages statiques, la quantité de données à télécharger est augmentée. Cela conduit à des temps de chargement initiaux plus lents, qui peuvent avoir des conséquences drastiques - telles que les utilisateurs finaux frustrés et la perte de revenus. Selon un article de Microsoft -
Une étude Bing a révélé qu'une augmentation de 10 ms du délai de chargement coûte le site de 250 000 $ de revenus par an.
Étant donné que les applications à une page reposent sur l'exécution JavaScript, les serveurs ne produisent pas tout le contenu HTML auquel ils auraient l'habitude. Par conséquent, les robots Web ont beaucoup de difficultés d'indexation des pages. Ces robots sont des programmes qui font des demandes à un serveur Web et analysent le résultat en tant que texte brut, sans interpréter et exécuter le contenu comme un navigateur typique exécutant JavaScript. Récemment, Google a amélioré son robot Web afin qu'il puisse fonctionner avec des pages basées sur JavaScript, mais qu'en est-il de Bing, Yahoo et de tous les autres moteurs de recherche? Une bonne indexation est cruciale pour toute entreprise, car elle conduit généralement à plus de visites et de revenus plus élevés.
Les applications JavaScript isomorphes sont des applications écrites en JavaScript qui peuvent exécuter à la fois sur le client et sur le serveur. Pour cette raison, vous pouvez écrire le code une fois, puis l'exécuter sur le serveur pour rendre des pages statiques et sur le client pour permettre des interactions rapides. Ainsi, cette approche tire le meilleur des deux mondes et vous permet d'éviter les deux problèmes décrits auparavant.
Aujourd'hui, plusieurs cadres vous aident à développer ce type d'application. L'un d'eux - peut-être le plus connu - est le météore. Meteor est un framework JavaScript open source, écrit sur Node.js, qui se concentre sur les applications Web en temps réel. Un autre projet que je veux mentionner est Rendr. Il s'agit d'une petite bibliothèque développée par Airbnb qui vous permet d'exécuter des applications Backbone.js sur le client et le serveur.
D'autres entreprises adoptent Node.js pour leurs produits. Le partage du code entre le client et le serveur devient un choix plus commun et naturel, et à mon avis est l'avenir du développement Web. Cette tendance est améliorée en partageant des modèles via des bibliothèques comme React.
Dans cet article, je vous ai présenté le concept d'applications isomorphes JavaScript, une nouvelle approche pour développer des applications qui combine le meilleur de la programmation côté serveur et côté client. Nous avons également discuté des problèmes que cette approche essaie de résoudre, et certains projets que vous pouvez utiliser aujourd'hui pour adopter cette philosophie.
Avez-vous déjà entendu parler des applications JavaScript isomorphes? En avez-vous développé un? Quelle a été votre expérience?
JavaScript isomorphe, également connu sous le nom de JavaScript universel, offre plusieurs avantages. Premièrement, il offre une expérience utilisateur transparente en rendant des pages sur le serveur, ce qui est plus rapide que le rendu côté client. Il en résulte des charges de page plus rapides, l'amélioration de l'engagement et de la satisfaction des utilisateurs. Deuxièmement, il améliore les performances du référencement, car les robots de recherche peuvent facilement indexer les pages rendues au serveur. Enfin, il permet aux développeurs d'utiliser le même code du côté serveur et du client, réduisant la complexité de la base de code et facilitant la maintenance et le débogage.
Les applications JavaScript traditionnelles rendent le contenu du côté client, ce qui peut être difficile pour les robots de recherche de moteurs de recherche. Le JavaScript isomorphe, en revanche, rend les pages sur le côté du serveur, ce qui rend le contenu facilement disponible pour les robots. Cela améliore la visibilité du site Web sur les pages de résultats des moteurs de recherche, conduisant à une augmentation du trafic organique.
Oui, le JavaScript isomorphe peut être utilisé avec n'importe quel framework JavaScript qui prend en charge le rendu côté serveur. Cela comprend des cadres populaires comme React, Angular et Vue.js. Cependant, les détails de mise en œuvre peuvent varier en fonction du cadre spécifique.
Bien que le JavaScript isomorphe offre de nombreux avantages, il est également accompagné de son propre ensemble de défis . Ceux-ci incluent une complexité accrue dans la gestion du code, des problèmes de performances potentiels dus au rendu côté serveur et la nécessité pour les développeurs d'avoir une compréhension approfondie des environnements côté client et côté serveur.
JavaScript isomorphe améliore l'expérience utilisateur en fournissant des charges de page plus rapides. Étant donné que les pages sont rendues sur le serveur, elles sont livrées au navigateur de l'utilisateur entièrement formées, réduisant le temps nécessaire pour que la page devienne interactive. Ce qui se traduit par une expérience utilisateur plus lisse et plus engageante.
Oui, JavaScript isomorphe et JavaScript universel sont deux termes pour le même concept. Les deux se réfèrent aux applications JavaScript qui peuvent s'exécuter à la fois sur le côté client et le côté serveur.
Isomorphe JavaScript permet aux développeurs d'écrire du code qui peut Exécutez les deux sur le côté client et le côté serveur. Cela signifie que le même code peut être réutilisé sur différentes parties de l'application, réduisant la quantité de code qui doit être écrite et maintenue.
Le L'avenir du JavaScript isomorphe semble prometteur. Avec la demande croissante d'applications Web haute performance et adaptées au référencement, de plus en plus de développeurs se tournent vers le JavaScript isomorphe. De plus, avec l'amélioration continue des cadres JavaScript qui prennent en charge le rendu côté serveur, il est probable que l'adoption de JavaScript isomorphe continuera de croître.
JavaScript peut fonctionner avec les API de la même manière que JavaScript traditionnel. La différence est qu'avec un JavaScript isomorphe, les appels d'API peuvent être effectués à partir du côté client ou du côté serveur, selon l'endroit où le code est en cours d'exécution.
Bien que le JavaScript isomorphe soit principalement utilisé pour le développement d'applications Web, il peut également être utilisé pour le développement d'applications mobiles. Des cadres comme React Native permettent aux développeurs d'écrire du code JavaScript isomorphe qui peut s'exécuter sur les plates-formes Web et mobiles.
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!