Share
Il existe de nombreuses bibliothèques JavaScript disponibles, et la plupart sont vraiment douées pour fournir les interactions traditionnelles centrées sur DOM dont vos sites Web classiques ont besoin. Mais lorsqu'il est temps de créer une base de code gérable pour une application d'une seule page, c'est là que toute une série de nouveaux cadres entrent en jeu pour aplanir les choses..
Le vieil adage est vrai: "Utilisez le meilleur outil pour la tâche."
Ce n'est pas que les bibliothèques traditionnelles comme jQuery ne puissent pas vous aider à créer des expériences de type bureau, ce n'est tout simplement pas son cas d'utilisation et il manque des éléments tels que la liaison de données, le routage des événements et la gestion des états. Bien sûr, vous pouvez probablement bricoler un tas de plugins pour réaliser certaines de ces fonctionnalités, mais commencer avec un framework spécialement construit à partir de la base pour traiter ces problèmes spécifiques est, à mon avis, plus logique. Le vieil adage est vrai: "Utilisez le meilleur outil pour la tâche."
J'ai récemment eu une interview avec l'équipe Ember.js; il était motivé par mon désir de savoir ce que je suis venu à appeler "la nouvelle chaleur": Ember.js.
Ember convient parfaitement à ce que j'ai décrit ci-dessus, et le fait d'une manière qui rappelle beaucoup à quel point jQuery permet aux développeurs de devenir rapidement opérationnels. L’équipe a délibérément pris des mesures pour résumer une grande partie des complexités inhérentes à la conception et à la création d’applications basées sur les modèles / vues / contrôleurs en utilisant des années d’expertise et de connaissances acquises lors de la création d’applications à grande échelle..
Ce que j'aimerais faire, c'est vous aider à vous familiariser avec Ember.js, via une série d'articles en plusieurs parties qui vous familiarisera progressivement avec les concepts du cadre. Nous allons commencer par l'intro habituelle (qui se trouve être ce post), puis nous allons progressivement mettre au point une application complète. Le grand avantage est que cela va également m'aider à renforcer les concepts que j'ai déjà appris, et peut-être à acquérir de nouvelles techniques en cours de route! Je ferai de mon mieux pour que l'équipe Ember.js vérifie l'exactitude de ce document et peut-être même y contribuer..
Avant de continuer, un heads-up: Ember.js fait beaucoup de magie pour vous. Il y a des moments où vous regardez le code et dites "Hein? Comment ça a fait ça?" J'y suis allé et je ferai de mon mieux pour distiller les choses, mais je ne vais pas plonger dans les entrailles du code-cadre d'Ember. Au lieu de cela, je discuterai de la façon dont vous pouvez exploiter ses outils et son API pour créer votre application..
Alors commençons ça.
Ember.js n'est pas un cadre pour la construction de sites Web traditionnels.
La première chose à garder à l'esprit est qu'Ember.js n'est pas un cadre pour la construction de sites Web traditionnels. Des bibliothèques comme jQuery et MooTools conviennent parfaitement à cela. Si vous envisagez d'utiliser Ember.js, vous supposez que vous souhaitez créer des expériences de type bureau, en particulier des expériences évolutives. En fait, le slogan du framework est "un framework pour développer des applications web ambitieuses" qui vous dit que ce n'est clairement pas la bibliothèque JavaScript de votre papa.
J'ai déjà mentionné qu'Ember utilisait le modèle MVC pour promouvoir une gestion et une organisation correctes du code. Si vous n'avez jamais fait de développement basé sur MVC, vous devriez absolument le lire. Nettuts + a un excellent article sur le sujet ici. Pour ceux qui connaissent les concepts, vous devriez vous sentir chez vous. La seule chose que j'ai souvent entendue est qu'il est facile de passer de Backbone à Ember.js, car Ember se charge beaucoup de la tâche lourde tout en maintenant les schémas d'organisation du code auxquels ces développeurs sont habitués..
Ember s’appuie également sur des modèles côté client… un LOT. Il utilise la bibliothèque de modèles Handlebars, qui fournit des expressions vous permettant de créer des modèles dynamiques basés sur HTML. Un développeur Ember peut lier des données à ces expressions incorporables et modifier de manière dynamique l'affichage de son application à la volée. Par exemple, je peux créer un modèle pouvant recevoir un tableau de personnes et les afficher dans une liste non ordonnée:
Remarquez l'expression "#each" qui fonctionne comme une directive de boucle, énumérant chaque élément du tableau "people" et remplaçant l'expression "name" par une valeur réelle. Il est important de noter que les doubles crochets sont des jetons utilisés par le guidon pour identifier des expressions. Ceci est un petit exemple, et nous allons plonger dans plus de détails plus tard.
Handlebars est un moteur de gabarit côté client incroyablement puissant et je vous conseillerais de consulter non seulement les guides Ember, mais également le site Web Handlebars lui-même pour mieux comprendre les options disponibles. Vous allez l'utiliser un peu.
Ember.js s'appuie sur des bibliothèques supplémentaires, vous devrez donc vous procurer une copie de jQuery et du guidon. Mais attendez, n’ai-je pas dit que jQuery et Ember jouent dans des espaces différents? Oui, je l’ai fait, mais voici le problème: l’équipe Ember a pour objectif de ne pas réinventer la roue. Ils ont choisi jQuery pour faire ce qu’il fait de mieux: travailler avec le DOM. Et c'est une bonne chose, car jQuery est vraiment bon à cela. C'est aussi pourquoi ils ont opté pour Handlebars, une excellente bibliothèque de modèles créée par Yehuda Katz, membre de l'équipe principale d'Ember..
Le moyen le plus simple d’obtenir les fichiers dont vous avez besoin est de vous rendre sur le dépôt Ember.js Github et d’abaisser le kit de démarrage. C'est un passe-partout pour vous. Au moment d'écrire ces lignes, il contient:
Il existe également un modèle HTML de base codé pour inclure toutes les bibliothèques associées (jQuery, Ember, etc.), ainsi qu'un exemple de modèle Handlebars et "app.js", qui inclut du code permettant de lancer une application Ember de base..
Notez simplement que app.js ne fait pas partie du framework. C'est un simple fichier JavaScript ole; vous pouvez le nommer comme vous voulez. Et, bien que nous l'utilisions pour les besoins de cette série de didacticiels, vous finirez probablement par diviser votre code JavaScript en plusieurs fichiers, comme vous le feriez pour tout autre site ou application. De plus, Ember ne s'attend pas à une structure de répertoires spécifique pour vos fichiers de structure..
Lorsque vous regardez le code du kit de démarrage, il peut ressembler à votre code de site Web typique. À certains égards, vous avez raison! Cependant, une fois que nous aurons commencé à organiser les choses, vous verrez à quel point la création d'une application Ember est différente..
Avant de commencer à pirater du code, il est important de comprendre le fonctionnement d'Ember.js et de bien comprendre les éléments en mouvement qui composent une application Ember. Jetons un coup d'oeil à ces parties et comment elles se rapportent les unes aux autres.
Les modèles sont un élément clé de la définition de votre interface utilisateur. Comme je l'ai mentionné précédemment, Handlebars est la bibliothèque côté client utilisée dans Ember et les expressions fournies par la bibliothèque sont largement utilisées lors de la création de l'interface utilisateur de votre application. Voici un exemple simple:
Notez que les expressions sont mélangées dans votre balise HTML et, via Ember, modifieront de manière dynamique le contenu affiché sur la page. Dans ce cas, les espaces réservés firstName et lastName seront remplacés par les données extraites de l'application..
Le guidon offre beaucoup de puissance, via une API flexible. Il sera important pour vous de comprendre ce qu’il offre.
Le routeur d'une application aide à gérer l'état de l'application.
Le routeur d'une application permet de gérer l'état de l'application et les ressources nécessaires lorsqu'un utilisateur navigue dans l'application. Cela peut inclure des tâches telles que demander des données à un modèle, connecter des contrôleurs à des vues ou afficher des modèles..
Pour ce faire, vous créez un itinéraire pour des emplacements spécifiques dans votre application. Les itinéraires spécifient des parties de l'application et les URL qui leur sont associées. L'URL est l'identifiant de clé qu'Ember utilise pour comprendre quel état d'application doit être présenté à l'utilisateur..
Accentsconagua
App.Router.map (function () this.route ('about'); // nous amène à "/ about"); Les comportements d'une route (par exemple: demander des données à un modèle) sont gérés via des instances de l'objet route Ember et sont déclenchés lorsqu'un utilisateur navigue vers une URL spécifique. Un exemple serait de demander des données à un modèle, comme ceci:
App.EmployeesRoute = Ember.Route.extend (model: function () return App.Employee.find (););
Dans ce cas, lorsqu'un utilisateur accède à la section "/ employés" de l'application, l'itinéraire demande au modèle une liste de tous les employés..
Une représentation objet des données.
Les modèles sont une représentation objet des données que votre application utilisera. Il peut s'agir d'un simple tableau ou de données récupérées dynamiquement à partir d'une API JSON RESTful, via une requête Ajax. La bibliothèque de données Ember offre l’API pour le chargement, le mappage et la mise à jour de données vers des modèles dans votre application..
Les contrôleurs sont généralement utilisés pour stocker et représenter les données et les attributs du modèle. Ils agissent comme un proxy, vous donnant accès aux attributs du modèle et permettant aux modèles d'y accéder pour rendre l'affichage dynamiquement. C'est pourquoi un modèle sera toujours connecté à un contrôleur.
La principale chose à garder à l'esprit est que, même si un modèle extrait des données, vous utiliserez un contrôleur pour exposer ces données par programme à différentes parties de votre application. Bien qu'il puisse sembler que les modèles et les contrôleurs soient étroitement couplés, en fait, les modèles eux-mêmes ne connaissent pas les contrôleurs qui les utiliseront plus tard..
Vous pouvez également stocker d'autres propriétés d'application qui doivent persister mais qui n'ont pas besoin d'être enregistrées sur un serveur..
Les vues dans Ember.js sont conçues pour gérer les événements liés aux interactions des utilisateurs et les traduire en événements significatifs au sein de votre application. Ainsi, si un utilisateur clique sur un bouton pour supprimer un employé, la vue est responsable de l'interprétation de cet événement de clic du navigateur natif et de son traitement approprié dans le contexte de l'état actuel de votre application..
Ember.js permet notamment de réduire la quantité de code nécessaire et de gérer les tâches pour vous dans les coulisses grâce aux conventions de dénomination. La façon dont vous définissez et nommez vos itinéraires (et ressources) a une incidence sur la dénomination de vos contrôleurs, modèles, vues et modèles. Par exemple, si je crée un itinéraire, appelé "employés":
App.Router.map (function () this.resource ('employés');); Je nommerais alors mes composants, comme ceci:
L'utilisation de cette convention d'appellation a un double objectif. Premièrement, cela vous donne une relation sémantique entre des composants similaires. Deuxièmement, Ember peut créer automatiquement les objets nécessaires qui peuvent ne pas exister (par exemple: un objet de route ou un contrôleur) et les relier pour une utilisation dans votre application. C'est la "magie" que j'ai mentionnée plus tôt. En fait, c'est précisément ce que fait Ember au niveau global de l'application lorsque vous instanciez l'objet Application:
var App = Ember.Application.create ();
Cette ligne unique crée les références par défaut au routeur, au contrôleur, à la vue et au modèle de l'application..
Pour revenir à la route "Employés" que j'ai créée ci-dessus, il se passera que lorsqu'un utilisateur accédera à "/ employés" dans votre application, Ember recherchera les objets suivants:
S'il ne les trouve pas, il créera une instance de chacun mais ne rendra rien, car vous n'avez pas spécifié de modèle à partir duquel dériver des données ni de modèle avec lequel afficher les données. C'est pourquoi la convention de nommage est si importante. Il permet à Ember de savoir gérer les tâches associées à un itinéraire spécifique, sans avoir à câbler manuellement les tâches..
Notez que, dans le premier exemple, j’ai utilisé le nom singulier "Employee" pour définir le modèle. C'est exprès. En raison de la nature même du nom "Employees", il est possible que je travaille avec 0 à plusieurs employés. Il est donc important de créer un modèle qui permette de renvoyer un ou plusieurs employés. La convention de nommage singulière de ce modèle n’est pas une exigence de Ember, car les modèles eux-mêmes n’ont aucune connaissance des contrôleurs qui les utiliseront plus tard. Vous pouvez donc les nommer de manière flexible, mais pour des raisons de cohérence, le respect de cette convention facilitera considérablement la gestion de votre code..
De plus, j'ai choisi d'utiliser le Ressource() méthode pour définir mon itinéraire, car dans ce scénario, j’aurais très probablement des itinéraires imbriqués pour gérer les pages de détails d’informations relatives à un employé. Nous parlerons de nidification plus tard dans la série.
La conclusion essentielle est qu'en utilisant un schéma de dénomination cohérent, Ember peut facilement gérer les points d'ancrage reliant ces composants sans que vous ayez besoin de définir explicitement les relations via une tonne de code..
Des détails complets sur les conventions de dénomination Ember sont fournis sur le site du projet et constituent un Doit lire.
Dans la prochaine partie de la série, nous allons plonger dans le code pour créer la base de notre application..
Nous avons passé en revue les concepts de base d'Ember et discuté des principaux aspects du cadre. Dans la prochaine partie de la série, nous allons plonger dans le code pour créer la base de notre application. Entre-temps, je vous recommande de nouveau de commencer à consulter la documentation de Handlebars pour avoir une idée de la syntaxe des expressions. De plus, si vous êtes vraiment impatient d'entrer dans Ember, restez à l'écoute de Tuts + Premium, qui proposera bientôt un cours complet qui vous guidera dans la création d'une application basée sur Ember.!
Comme je l'ai noté au début de cet article, l'équipe principale d'Ember.js, Yehuda Katz et Tom Dale, ont examiné cette information avec exactitude et l'ont félicitée. L'équipe Ember approuvée! À bientôt!
