Découvrez le monde d'Ember.js

Il existe de nombreuses bibliothèques JavaScript disponibles, et la plupart d'entre elles sont très efficaces pour fournir les interactions traditionnelles centrées sur le DOM requises par les sites Web typiques. Mais lorsqu’il s’agit de créer une base de code gérable pour une application monopage, un tout nouvel ensemble de frameworks est nécessaire pour résoudre le problème.

Comme le dit le vieil adage : « Utilisez le meilleur outil pour le travail ».

Ce n'est pas qu'une bibliothèque traditionnelle comme jQuery ne peut pas vous aider à créer des expériences de type ordinateur de bureau, ce n'est tout simplement pas son cas d'utilisation et manque de fonctionnalités telles que la liaison de données, le routage d'événements et la gestion d'état. Bien sûr, vous pourriez probablement rassembler un tas de plugins pour implémenter certaines de ces fonctionnalités, mais à mon avis, il est plus logique de commencer avec un framework spécialement construit à partir de zéro pour résoudre ces problèmes spécifiques. Comme le dit le vieil adage : « Utilisez le meilleur outil pour le travail. »

J'ai récemment eu un entretien avec l'équipe Ember.js ; ma motivation était de découvrir ce que j'appelle « le nouveau truc chaud » : Ember.js.

Ember répond aux exigences que j'ai décrites ci-dessus, et d'une manière qui rappelle la façon dont jQuery permet aux développeurs d'être rapidement opérationnels. L'équipe a délibérément pris des mesures pour éliminer bon nombre des complexités inhérentes à la conception et à la création d'applications basées sur des modèles/vues/contrôleurs, en tirant parti d'années d'expertise et de connaissances acquises lors de la création d'applications de grande envergure.

Ce que je veux faire, c'est vous aider à vous familiariser avec Ember.js à travers une série d'articles en plusieurs parties qui vous présenteront étape par étape les concepts du framework. Nous commencerons par l'introduction habituelle (qui se trouve être cet article), puis construirons progressivement une application complète. Mieux encore, cela m'aidera également à renforcer les concepts que j'ai appris et peut-être à apprendre de nouvelles techniques ! Je ferai de mon mieux pour que l'équipe Ember.js examine l'exactitude de ce matériel et peut-être même y apporte quelque chose de précieux.

Avant de continuer, veuillez noter : Ember.js vous apporte beaucoup de magie. Parfois, vous regardez le code et dites "Hein ? Comment ça fait ça ?" J'y suis allé et je vais essayer de distiller certaines choses, mais je n'entrerai pas dans les détails internes du code du framework Ember. Au lieu de cela, j'expliquerai comment exploiter ses outils et ses API pour créer vos applications.

Alors commençons.

---

Concept de base

Ember.js n'est pas un framework pour créer des sites Web traditionnels.

La première chose à retenir est qu'Ember.js n'est pas un framework pour créer des sites Web traditionnels. Les bibliothèques comme jQuery et MooTools sont idéales pour cela. Si vous envisagez Ember.js, nous supposons que vous cherchez à créer des expériences de type ordinateur de bureau, en particulier celles qui sont évolutives. En fait, le slogan du framework est « Un framework pour développer des applications Web ambitieuses », ce qui vous indique qu’il ne s’agit clairement pas de la bibliothèque JavaScript de votre père.

J'ai déjà mentionné qu'Ember exploite le modèle MVC pour promouvoir une gestion et une organisation appropriées du code. Si vous n'avez jamais fait de développement basé sur MVC, vous devez absolument le lire. Nettuts+ propose un excellent article sur ce sujet. Pour ceux d’entre vous qui connaissent ces concepts, vous devriez vous sentir comme chez vous. Une chose que j'entends sans cesse, c'est que la migration de Backbone vers Ember.js est en fait facile car Ember fait le gros du travail pour vous tout en conservant les modèles d'organisation du code auxquels les développeurs sont habitués.

p>Ember s'appuie également sur des modèles côté client...

beaucoup. Il utilise la bibliothèque de modèles guidons, qui fournit des expressions qui vous permettent de créer des modèles dynamiques basés sur HTML. Les développeurs d'Ember peuvent lier des données à ces expressions intégrables et modifier dynamiquement l'affichage de leurs applications. Par exemple, je peux créer un modèle qui prend un ensemble de personnes et les affiche dans une liste non ordonnée :

<ul>
 {{#each people}}
   <li>Hello, {{name}}!</li>
 {{/each}}
</ul>

Notez que l'expression "#each" est utilisée comme une instruction de boucle, énumérant chaque élément du tableau "people" et remplaçant l'expression "{{name}}" par la valeur réelle. Notez que les doubles crochets sont les marqueurs utilisés par guidon pour identifier les expressions. Ceci est un petit exemple, nous y reviendrons plus en détail plus tard.

Handlebars est un moteur de création de modèles côté client très puissant, et je vous recommande de consulter non seulement le guide Ember, mais également le site Web de guidon lui-même pour avoir une idée complète des options disponibles. Vous l'utiliserez beaucoup.

---

Configurer Ember

Ember.js dépend d'autres bibliothèques, vous devrez donc obtenir une copie de jQuery et Handles. Mais attendez, n'ai-je pas dit que jQuery et Ember fonctionnent dans des espaces différents ? Eh bien, oui, je l'ai fait, mais voici le problème : l'équipe Ember s'engage à ne pas réinventer la roue. Ils ont choisi jQuery pour faire ce qu'il fait de mieux : travailler avec le DOM. C'est une bonne chose car jQuery est vraiment bon dans ce domaine. C'est pourquoi ils ont choisi Guidon, une fantastique bibliothèque de modèles écrite 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 visiter le référentiel Ember.js Github et de télécharger le kit de démarrage. Voici un exemple pour vous aider à démarrer. Au moment de la rédaction, il contient :

• 人类 1.0 RC1
• 处理栏 1.0 RC3
• jQuery 1.9.1

还有一个基本的 html 模板，其编码包含所有关联的库（jQuery、Ember 等），以及 Handlebars 模板和“app.js”的示例，其中包含用于启动基本的 Ember 应用程序。

<script src="js/libs/jquery-1.9.1.js"></script>
<script src="js/libs/handlebars-1.0.0-rc.3.js"></script>
<script src="js/libs/ember-1.0.0-rc.1.js"></script>
<script src="js/app.js"></script>

请注意，app.js 不是框架的一部分。这是一个普通的 ole JavaScript 文件；您可以将其命名为任何您想要的名称。而且，虽然我们将在本教程系列中使用它，但以后您可能最终会将 JavaScript 拆分为多个文件，就像处理任何其他网站或应用程序一样。此外，Ember 并不期望您的框架文件有特定的目录结构。

当您查看入门工具包代码时，它可能看起来像典型的网站代码。从某些方面来说，你是对的！不过，一旦我们开始组织事情，您就会看到构建 Ember 应用程序有何不同。

---

余烬之地的布局

在开始编写代码之前，了解 Ember.js 的工作原理以及了解构成 Ember 应用程序的移动部件非常重要。让我们看一下这些部分以及它们之间的关系。

---

模板

模板是定义用户界面的关键部分。正如我之前提到的，Handlebars 是 Ember 中使用的客户端库，在为应用程序创建 UI 时广泛使用该库提供的表达式。这是一个简单的例子：

<script type="text/x-handlebars">
     <h2><strong>{{firstName}} {{lastName}}</strong></h2>
</script>

请注意，表达式会混合到 HTML 标记中，并通过 Ember 动态更改页面上显示的内容。在这种情况下，{{firstName}} 和 {{lastName}} 占位符将被从应用检索的数据替换。

Handlebars 通过灵活的 API 提供强大的功能。了解它提供的功能对您来说非常重要。

---

路由

应用程序的路由器有助于管理应用程序的状态。

应用程序的路由器有助于管理应用程序的状态以及用户导航应用程序时所需的资源。这可能包括从模型请求数据、将控制器连接到视图或显示模板等任务。

您可以通过为应用程序中的特定位置创建一条路线来实现此目的。路由指定应用程序的各个部分以及与其关联的 URL。 URL 是 Ember 用于了解需要向用户呈现哪种应用程序状态的关键标识符。

App.Router.map( function() {
   this.route( 'about' ); // Takes us to "/about"
});

路由的行为（例如：从模型请求数据）通过 Ember 路由对象的实例进行管理，并在用户导航到特定 URL 时触发。一个示例是从模型请求数据，如下所示：

App.EmployeesRoute = Ember.Route.extend({
   model: function() {
       return App.Employee.find();
   }
});

在本例中，当用户导航到应用程序的“/employees”部分时，路由会向模型请求所有员工的列表。

---

模型

数据的对象表示。

模型是应用程序将使用的数据的对象表示。它可以是一个简单的数组或通过 Ajax 请求从 RESTful JSON API 动态检索的数据。 Ember 数据库提供了用于在应用程序中加载、映射和更新数据到模型的 API。

---

控制器

控制器通常用于存储和表示模型数据和属性。它们就像代理一样，使您可以访问模型的属性并允许模板访问它们以动态渲染显示。这就是模板始终连接到控制器的原因。

要记住的主要事情是，当模型检索数据时，您将使用控制器以编程方式将该数据公开给应用程序的不同部分。虽然模型和控制器看起来紧密耦合，但事实上，模型本身并不知道稍后将使用它们的控制器。

您还可以存储需要保留但不需要保存到服务器的其他应用程序属性。

---

观看次数

Ember.js 中的视图旨在管理围绕用户交互的事件，并将其转换为在应用程序中有意义的事件。因此，如果用户单击按钮来删除员工，则视图负责解释本机浏览器单击事件并在应用程序当前状态的上下文中对其进行适当处理。

---

命名约定

Ember.js 帮助最大程度地减少所需代码量并在幕后为您处理事务的方法之一是通过命名约定。定义和命名路由（和资源）的方式会影响控制器、模型、视图和模板的命名。例如，如果我创建一条名为“employees”的路线：

App.Router.map( function() {
   this.resource( 'employees' );
});

然后我会命名我的组件，如下所示：

• Objet Route : App.EmployeesRoute
• Contrôleur : App.EmployeesController
• Modèle : App.Employee
• Vue : App.EmployeesView
• Modèle : Employés

L'utilisation de cette convention de dénomination répond à un double objectif. Premièrement, il vous donne des relations sémantiques entre des composants similaires. Deuxièmement, Ember peut créer automatiquement les objets nécessaires qui peuvent ne pas exister (par exemple : des objets de route ou des contrôleurs) et les connecter pour les utiliser dans votre application. C’est la « magie » dont j’ai parlé plus tôt. En fait, c'est exactement ce que fait Ember au niveau global de l'application lorsque vous instanciez un objet Application :

var App = Ember.Application.create();

Cette ligne unique crée des références par défaut aux routeurs, contrôleurs, vues et modèles de l'application.

• Objet Route : App.ApplicationRoute
• Contrôleur : App.ApplicationController
• Affichage : App.ApplicationView
• Modèle :Application

En revenant à l'itinéraire « employés » que j'ai créé ci-dessus, lorsque l'utilisateur accède à « /employés » dans l'application, Ember recherchera les objets suivants :

• App.EmployeesRoute
• App.EmployeesController
• EmployésModèles

S'ils ne sont pas trouvés, il créera une instance de chacun mais ne restituera rien car vous n'avez pas spécifié de modèle à partir duquel dériver les données ni de modèle à utiliser pour afficher les données. C'est pourquoi les conventions de dénomination sont si importantes. Il permet à Ember de savoir comment gérer les tâches liées à un itinéraire spécifique sans que vous ayez à vous connecter manuellement.

Veuillez noter que dans le premier exemple, j'ai utilisé le nom singulier « Employé » pour définir le modèle. C'est intentionnel. La nature du nom « employé » fait que je peux travailler avec zéro ou plusieurs employés. Il est donc important de créer un modèle offrant la flexibilité nécessaire pour renvoyer un employé ou tous les employés. Une convention de dénomination unique pour le modèle n'est pas une exigence pour Ember car les modèles eux-mêmes ne connaissent pas les contrôleurs qui les utiliseront ultérieurement. Par conséquent, vous pouvez être flexible dans leur nom, mais par souci de cohérence, respecter cette convention facilitera la gestion de votre code.

De plus, j'ai choisi d'utiliser la méthode resource() pour définir mes itinéraires car dans ce cas, j'utiliserais très probablement des itinéraires imbriqués pour gérer la page de détails d'un employé spécifique. Nous discuterons de la nidification plus tard dans cette série.

Le point clé à retenir est qu'en utilisant un schéma de dénomination cohérent, Ember facilite la gestion des hooks qui lient ces composants entre eux sans avoir à définir explicitement la relation à travers beaucoup de code.

Tous les détails de la convention de dénomination d'Ember sont disponibles sur le site Web du projet, à lire absolument.

---

Étape suivante : créer l'application

Dans la prochaine partie de cette série, nous approfondirons le code pour créer les bases de notre application.

Nous avons examiné les concepts fondamentaux d'Ember et discuté des principaux aspects de haut niveau du cadre. Dans la prochaine partie de cette série, nous approfondirons le code pour créer les bases de notre application. En attendant, je voudrais à nouveau vous recommander de commencer à consulter la documentation de guidon pour comprendre la syntaxe de l'expression. De plus, si vous avez vraiment hâte de vous lancer dans Ember, restez à l'écoute de Tuts+ Premium, qui proposera bientôt un cours complet qui vous guidera dans la création d'applications basées sur Ember !

Comme je l'ai noté au début de cet article, les dirigeants de l'équipe principale d'Ember.js, Yehuda Katz et Tom Dale, ont examiné l'exactitude de ce contenu et lui ont donné un coup de pouce. L'équipe Ember est approuvée ! À bientôt!

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!