Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Qu' est ce que c' est ce Meteor ?

by
Difficulty:IntermediateLength:LongLanguages:

French (Français) translation by Zeta Politi (you can also view the original English article)

Dernièrement, il a été énormément de buzz autour d’une nouvelle plateforme web, appelée Meteor. Dans cet article, je vais vous expliquer ce que c’est et pourquoi vous devriez le considérer pour vos futures applications !


First Things First

Ne pense pas de Meteor comme un gestionnaire de paquets, car il est beaucoup plus puissante que ca !

Meteor est un framework JavaScript, construit autour de nombreux petits emballages - dont certains vous pouvez déjà utiliser, comme MongoDB ou jQuery. Mais ne pense pas que de Meteor comme un gestionnaire de paquets, car il est beaucoup plus puissante que ca! Meteor personnalisé ces paquets dans ce qu’ils appellent « paquets intelligentes » qui communiquent en toute transparence avec l’autre.

Meteor est de loin l’environnement de développement plus facile à installer, avec juste une commande d’une seule ligne qui installe une base de données, le serveur de développement et un programme de ligne de commande, qui s’occupe de la création et le déploiement de vos applications. Je vais vous montrer comment l’installer en juste un peu.

Si je devais définir, en bref, comment Meteor peut vous aider, je dois dire que c’est la vitesse à laquelle vous pouvez développer vos applications. Sites, qui nécessitent des milliers de lignes de code, prendre seulement quelques centaines de Meteor. Il fait ceci en combinant trois clés principales fonctionnalités:

  1. Meteor est « Realtime by Design »
  2. « Base de données Access » du Client
  3. « Compensation de latence »

En associant ces trois caractéristiques, le personnel de meteor a créé un cadre très puissant et une toute nouvelle approche de la programmation. Maintenant nous allons voir ce que chacune de ces moyennes.


1 - « Realtime by Design »

Dans Meteor, vous ne programmez fonctions et routines, vous programmez des éléments de la page. Il est très orienté sur les composants, en ce que juste instruire Meteor comment quelque chose devrait fonctionner, et il se chargera de mettre à jour la page en temps réel. Cela signifie que vous n’avez pas besoin d’écrire du code AJAX ou DOM manipulation, vous permet d’économiser un temps considérable.

Dans ce tutoriel, je vais utiliser Meteor telles quelles, sans personnalisation de ses forfaits. Le plugin de création de modèles par défaut pour disposer vos composants est Handlebars. Au Handlebars, vous créez des modèles pour vos composants et Meteor traitera ces lors de l’exécution et générer le HTML dynamique. Nous allons construire une application de Meteor qui prend un tableau d’objets JSON, un pour chaque produit et affiche le nom, le prix et la disponibilité. Pour commencer, j’ai installera Meteor et créez un nouveau projet.

Tout d’abord, ouvrir une fenêtre de Terminal et tapez les commandes suivantes :

Dans le répertoire du projet, vous trouverez trois fichiers : un fichier JavaScript, HTML et CSS. Ouvrez le fichier HTML et remplacez son contenu par le texte suivant :

Ci-dessus, nous avons créé un modèle pour nos produits, qui fondamentalement juste parcourt chacun et affiche le nom, le prix et la disponibilité. Maintenant, nous allons ouvrir le fichier JavaScript et remplacer tout dans la Meteor.is_client if déclaration :

Tout ce qui est à l’intérieur de la section Meteor.is_client est exécuté uniquement sur le client. La plupart de notre code sera placée dans ici. Le JavaScript est ce que vous vous en doutez : un tableau pour contenir les produits et la variable ProductsArr que nous avons définie dans le modèle. Pour tester votre application, il suffit de taper « meteor » dans le Terminal, et Meteor lancera le serveur de développement pour vous permettre de tester votre application.

Ainsi, vous pourriez dire que c’est assez cool, mais c’est essentiellement juste la fonctionnalité de guidon standard - et nous avons tous vu cela auparavant. Cependant, c’est ce que fait Meteor en arrière-plan qui est la partie vraiment cool. Meteor reconnaît que cette section de la page dépend de la gamme de Products, donc il surveillera cette variable et, chaque fois que ça change, (c.-à-d., vous ajoutez un élément) Meteor sera automatiquement mise à jour de la page avec vos nouveaux changements... en temps réel ! Ce n’est pas tout ; Si vous deviez ajouter un gestionnaire d’événements à ces produits, vous n’auriez pas de commencer à deviner quel bouton l’utilisateur a appuyé sur, en ajoutant des attributs personnalisés ou en lisant le DOM, étant donné que Meteor appelle l’événement sur l’objet proprement dit - donc vous avez accès à ses propriétés.

Pour illustrer cela, nous allons ajouter une alerte de confirmation, lorsqu’un utilisateur clique sur un produit. Ajoutez le code suivant après la fonction précédente :

Cette fonction est appelée sur l’objet d’origine, pas sur l’élément de page, ce qui vous permet de commencer à travailler avec lui sans avoir à déterminer le produit qui correspond à l’élément cliqué. Une autre chose à souligner est que nous utilisons des règles CSS, lorsque vous déclarez des événements dans Meteor. Cela consiste à utiliser des périodes pour les classes, symboles de livre pour les ID et nom de la balise pour les éléments HTML.


2 - Database Partous

Meteor est livré avec une version de MongoDB qui fonctionne aussi bien sur le serveur et le client.

Par défaut, Meteor est livré avec une version de MongoDB qui fonctionne aussi bien sur le serveur et le client. Sur le serveur, il fonctionne comme vous vous en doutez à, mais la base de données sur le client est plus d’un pseudo-base de données. Ce que je veux dire par là est que Meteor a une API écrite à imiter l’API Mongo, mais pour un usage de base de données qui est mise en cache en mémoire sur le client. Cela vous permet d’envoyer des sous-ensembles de données. Par exemple, si vous ne voulez que l’utilisateur dispose de certaines lignes, ou vous ne voulez pas envoyer la colonne password, Meteor vous permet tout simplement de « publier » les infos que vous voulez et Meteor il traitera comme une base de données sur le client, permettant à vous pour rendre votre application plus rapide et plus s fixer !

En mettant la base de données sur le client, vous pouvez alimenter la base de données directement dans votre page HTML. Par exemple, dans l’exemple précédent, au lieu d’obtenir les products à partir d’un tableau, nous pouvons nourrir dans la base de données de produits. Donc chaque fois que la base de données change, vos mises à jour seront poussés en temps réel à tous les clients.

Pour intégrer cela dans notre application, nous devons d’abord ajouter la base de données vers le haut de notre application, avant is_client if déclaration, car la base de données est pour le client et le serveur. Ajoutez le code suivant :

Ensuite, vous pouvez supprimer le tableau Products que nous avons créé plus tôt et modifier la fonction ProductsArr pour ressembler à ce qui suit :

Un autre plus pour avoir la base de données sur le client, c’est qu’il permet d’utiliser MongoDB de tri API pour trier automatiquement les éléments sur la page au niveau base de données, ce qui, encore une fois, vous évite que beaucoup plus de temps, lors du développement de votre application. Vous pouvez soit ajouter des enregistrements dans le code ou dans la console de votre navigateur. Quoi qu’il en soit, vous utiliseriez la commande insert sur la variable Products. Voici un exemple :

J’ai utilisé la console de Google Chrome à saisir ce code, mais vous pouvez certainement le faire dans votre éditeur ainsi.


3 - Compensation de latence

Meteor mettra à jour votre interface utilisateur en temps réel.

Enfin, nous arrivons à compensation de latence de Meteor. Maintenant, nous savons que nous pouvons définir des éléments, connectez-les à une base de données, et Meteor mettra à jour votre site automatiquement. Mais la connexion de votre application si étroitement à une base de données peut poser un problème grave. Si votre application modifie uniquement lorsque la base de données est le cas, alors il y a peut-être un peu de décalage entre lorsque l’utilisateur clique sur quelque chose, à quand les changements sont poussés à la base de données et renvoyés à votre application. Cela peut rendre votre site se sentent plus lentement que prévu.

Eh bien, l’équipe de Meteor a déjà pensé à cela ; ils ont créé ce qu’ils appellent « Compensation de latence ». Lorsque vous envoyez quelque chose à la base de données, Meteor sera immédiatement faire semblant comme si elle avait reçu les nouvelles mises à jour de la base de données et mettre à jour votre interface utilisateur en temps réel. Ce faisant, Meteor n’a pas besoin d’attendre pour la base de données mettre à jour et vos utilisateurs verront les changements immédiatement qu’ils rendent. Dans les rares cas où votre mise à jour n’atteint pas le serveur, Meteor va rapprocher vos données et pousser les mises à jour pour le navigateur, sans que vous ayez besoin d’écrire une seule ligne de code.

Pour finir avec ce tutoriel, nous allons ajouter un panier d’achat, aux fins de visualisation des compensation de latence en action. Tout d’abord, nous ajoutons le code HTML pour le chariot :

Maintenant, nous allons ajouter le code JavaScript nécessaire pour que cela fonctionne :

Ce JavaScript est assez simple. La première ligne ajoute Cart à la collection, la fonction suivante connecte à la base de données à la charrue, la troisième fonction retourne le prix total pour chaque élément dans le panier et la fonction finale renvoie le sous-total pour le bas du chariot.

La dernière chose que nous exigeons, pour en faire une démo entièrement fonctionnelle, consiste à modifier l’événement que nous avons fait pour lorsque l’utilisateur clique sur un produit et rendent à ajouter l’article au panier. Voici le gestionnaire d’événements complète :

Et là vous l’avez ! Une page de produit et un panier en seulement quelques lignes de code. En structurant le cadre de cette manière, votre code est non seulement plus courte, mais élégant. Malheureusement, dans la version de Meteor au moment d’écrire ces lignes, « upserting » dans la base de données n'a pas encore été appliquée, donc j’ai dû vérifier manuellement si le produit était déjà dans le panier ou pas.


Déploiement

Maintenant que vous avez construit votre application, il est temps de déployer sur le web. Meteor nous fournit deux options :

  • Utiliser leurs serveurs gratuits, qui ont mis en place le personnel de Meteor
  • Déployer sur n’importe quel serveur ayant NodeJS et MongoDB installé. Cela permet de déployer votre application sur n’importe quel serveur que vous avez Terminal accès à.

Déploiement sur les serveurs de Meteor

Il est facile de déployer sur leurs serveurs gratuits. Tout ce que vous devez faire est de type : « meteor deploy yourSitesName.meteor.com ». Vous fournir un nom d’hôte gratuitement et télécharger votre application s’exécute, il. Vous pouvez également utiliser cette option avec votre propre nom de domaine personnalisé, par exemple « YourSite.com », mais alors vous aurez besoin modifier les paramètres DNS de votre site pour pointer vers origin.meteor.com.

Déployer sur votre propre serveur

L’autre option consiste à exécuter sur votre propre serveur, vous pouvez le faire en tapant : « meteor bundle ». Il regroupera tous les fichiers nécessaires qui seront nécessaires pour exécuter. Alors, vous aurez besoin de configurer votre base de données MongoDB et dépendances NodeJS. L’équipe de Meteor ont inclus un README dans le paquet, quand il est de grouper votre application. Ce fichier fournira les instructions exactes pour obtenir votre application opérationnel.

Pour obtenir un exemple d’un site complet dans Meteor, j’ai créé un site de démo, appelé « Tasks» ; vous pouvez afficher la source sur GitHub ici, ou regarder la démo live schedule.meteor.com. Merci les gars de watracz.com pour faire de la conception.


Conclusion

Pour récapituler :

  • Vous n’écrivez pas Ajax
  • Aucune manipulation du DOM
  • Accès de base de données sur le client
  • Automatiquement en temps réel
  • Plate-forme ouverte

Même si Meteor est encore à ses balbutiements (bêta), il n’y a rien que vous ne pouvez pas vous déplacer. La quantité de temps que Meteor enregistre dans votre application justifie l’occurrence rare où vous pourriez avoir besoin d’écrire une solution de contournement. Avec une version complète en moins d’un an, aucune pliures actuels ou des bugs deviendra rapidement une chose du passé.

J’espère que vous avez apprécié ce tutoriel ; Si vous avez des questions, n’hésitez pas à laisser un commentaire dans la section commentaire ci-dessous, et je ferai de mon mieux pour aider !

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.