Introduction à Rendr

Les cadres JavaScript isomorphes gagnent en popularité, permettant la création d'applications JavaScript qui s'exécutent de manière transparente sur le client et le serveur. Cette approche "Écrire une fois, exécuter n'importe où" exploite le rendu côté serveur pour les charges de page initiales plus rapides et l'interactivité côté client amélioré. Cet article explore Rendr, une bibliothèque open source d'Airbnb, initialement conçue pour leurs applications mobiles de dorsale.js et node.js.

Caractéristiques clés de Rendr:

• Rendu isomorphe: Rendr rend les applications Backbone.js sur le client et le serveur à l'aide d'une base de code partagée. Le rendu côté serveur fournit du contenu avant l'exécution JavaScript côté client, ce qui entraîne une expérience utilisateur plus rapide.
• Node.js et l'intégration de grogne: nécessite un serveur Node.js et utilise Grunt, un coureur de tâche, pour l'automatisation des tâches comme la minification et les tests.
• Structure modulaire: Les applications RENDR incluent généralement des composants tels que la page d'accueil, la vue de l'utilisateur, la vue de la liste des utilisateurs, la vue de référentiel et la vue de la liste des repos, chacune avec ses propres fichiers associés pour les modèles, les vues, les contrôleurs, etc.
• Fondation d'épine dorsale.js: construit sur dorsalbone.js, tirant parti de ses modèles, vues, collections et routeurs pour la structure des applications et la gestion des données.

Comprendre la fonctionnalité de Rendr:

Le principe principal de Rendr est d'activer le rendu des applications Backbone.js sur le serveur et le client en utilisant un code identique. Ce pré-rendu sur le serveur accélère considérablement les temps de chargement de page initiaux. Une fois que le cadre côté client se charge, Backbone.js gère le routage ultérieur. Rendr n'est pas un cadre à part entière; Sa conception se concentre sur:

• Logique d'application environnementale-agnostique (minimisation if (server) { ... } else { ... } blocs).
• Interaction API reposante sans couture.
• Abstraction des complexités de bibliothèque.
• Évitement DOM côté serveur.

Une application Rendr simple (exemple du navigateur GitHub):

L'article utilise un exemple d'application de navigateur GitHub pour illustrer la fonctionnalité de Rendr. Cette application, disponible dans l'exemple de référentiel de Rendr, comprend:

• RepOS List View: Affiche une liste des référentiels GitHub.
• View Repo: Affiche des informations détaillées pour un référentiel sélectionné.
• Affichage de la liste des utilisateurs: répertorie les utilisateurs de GitHub.
• View utilisateur: présente un profil utilisateur et leurs référentiels.

Configuration d'une application Rendr:

1. NODE.JS ET GRUNT INSTALLATION: Installez Node.js à partir du site officiel, puis installez Grunt à l'aide de npm install -g grunt-cli.
2. Dépendances du projet: Accédez à votre répertoire de projet et exécutez npm install pour installer Rendr et ses dépendances.
3. Démarrage du serveur: Exécuter grunt server pour lancer le serveur de développement. L'application sera accessible à localhost:3030.

Structure d'application:

La structure de l'application de l'échantillon reflète une application standard. Il comprend des dossiers pour les modèles, les vues, les contrôleurs, les collections et les modèles. Chaque dossier contient des fichiers pour chacune des vues de l'application (page d'accueil, vue utilisateur, etc.).

Composants clés:

• routes.js: définit la configuration de routage, le mappage des URL vers les contrôleurs et les actions (par exemple, match('', 'home#index')).
• index.js ou server.js: Initialise les configurations (par exemple, dataAdapterConfig, apiPath), démarre le serveur et configure le mécanisme de récupération des données.
• Vues: Étendent les vues de dorsale.js et de gérer le rendu. L'exemple montre une vue users_index.js.
• Modèles: Définissez la structure HTML à l'aide d'un moteur de modèle (par exemple, guidon). L'exemple montre un modèle users/index.hbs.
• Contrôleurs: Gire la logique de routage et la récupération des données. L'exemple montre un users_controller.js avec une méthode index.
• Modèles: Étendent les modèles Backbone.js pour la représentation des données et la récupération de l'API GitHub (par exemple, user.js).
• Collections: étendent les collections de dorsal. users.js

Conclusion:

RENDR fournit un moyen puissant de créer des applications JavaScript isomorphes. Bien que cet article couvre les bases, l'exploration plus approfondie de son référentiel GitHub et des exemples avancés révélera son plein potentiel. La combinaison de rendu côté serveur et d'interactivité côté client offre des performances et des avantages SEO significatifs.

(Remarque: Les URL de l'image n'ont pas été incluses dans l'entrée d'origine et sont supposées être présentes et correctement liées dans le fichier de démarrage réel. J'ai maintenu des références d'image d'image dans la sortie.)

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!