Modèle Breeze/Knockout

par Mads Kristensen

Le modèle Breeze/Knockout MVC a été écrit par Ward Bell

Télécharger le modèle Breeze/Knockout MVC

Vous avez entendu parler d’une « application monopage » (SPA) et vous vous êtes demandé ce que c’est. Bien que vous puissiez lire à ce sujet, vous préférez l’expérimenter par vous-même. Mais qui a le temps de télécharger un exemple ? Si vous avez Visual Studio, vous disposerez d’un exemple de spa opérationnel en moins de 60 secondes avec le modèle ASP.NET MVC 4 « Breeze/Knockout Single Page Application ».

Qu’est-ce que le modèle SPA Breeze/Knockout ?

La plupart des modèles de projet génèrent un squelette d’application. Vous mettez de la chair sur ces os en ajoutant votre code et finalement livrer une application opérationnelle. Le modèle SPA Breeze/Knockout est différent. Il génère un exemple d’application que vous pouvez étudier. Il illustre la conception d’une application SPA et la plupart des techniques de création d’un SPA.

Le modèle Breeze/Knockout est une variante du modèle SPA KnockoutJS inclus dans la mise à jour ASP.NET et Web Tools 2012.2. Le modèle Spa Breeze génère une application avec la même expérience utilisateur, mais il a une implémentation différente, en utilisant Breeze pour la gestion des données.

Le modèle SPA KnockoutJS effectue des demandes de service avec jQuery AJAX brut, ce qui est adapté à une application simple. Toutefois, les applications plus sophistiquées ont des exigences de gestion des données plus exigeantes. Par exemple, la plupart des applications :

• Interroger et interroger à nouveau le serveur pendant une session utilisateur étendue.
• Ajoutez des filtres de requête, un tri et une pagination.
• Partagez les mêmes données sur plusieurs écrans.
• Accumulez les modifications apportées à de nombreux objets, puis enregistrez-les en tant que transaction unique.
• Validez les modifications sur le client afin que l’utilisateur puisse corriger les erreurs avant de valider les modifications apportées à la base de données.

La bibliothèque BreezeJS gère ces tâches pour vous, ce qui vous permet de développer la logique d’application et l’expérience utilisateur qui comptent le plus.

Breeze est une bibliothèque open source permettant de créer des applications de données enrichies en JavaScript et HTML, les types d’applications qui ont toujours été fournis en tant qu’applications de bureau autonomes.

Le modèle Breeze/Knockout vous aide à franchir cette première étape cruciale vers une infrastructure de gestion des données plus robuste. Il produit un exemple d’application Todo qui est extérieurement identique au modèle SPA KnockoutJS. À l’intérieur, il remplace la couche de données AJAX par Breeze, ce qui vous permet de comparer les deux approches côte à côte. Bien sûr, il touche à peine le potentiel d’une application Breeze. Mais vous verrez comment Breeze fonctionne et à quel point peu est nécessaire pour effectuer cette transition.

Commençons.

Créer un projet de modèle Breeze/Knockout

Téléchargez et installez le modèle en cliquant sur le bouton Télécharger ci-dessus. Le modèle est empaqueté sous la forme d’un fichier d’extension Visual Studio (VSIX). Vous devrez peut-être redémarrer Visual Studio.

Dans le volet Modèles , sélectionnez Modèles installés et développez le nœud Visual C# . Sous Visual C#, sélectionnez Web. Dans la liste des modèles de projet, sélectionnez ASP.NET application web MVC 4. Nommez le projet, puis cliquez sur OK.

Dans l’Assistant Nouveau projet , sélectionnez Breeze Knockout SPA.

Appuyez sur Ctrl-F5 pour générer et exécuter l’application sans débogage, ou appuyez sur F5 pour exécuter avec le débogage.

Lorsque l’application s’exécute pour la première fois, elle affiche un écran de connexion. Cliquez sur le lien « S’inscrire » et une nouvelle page s’affiche, où vous pouvez entrer un nom d’utilisateur et un mot de passe. (Les pages de connexion et d’inscription sont créées à l’aide de ASP.NET MVC.) Lorsque vous envoyez le formulaire d’inscription, le serveur génère un TodoList avec deux éléments pour votre compte. Ensuite, il vous les présente sur une note jaune.

Maintenant, vous êtes au pays de SPA. Tout ce que vous voyez et expérimentez lors de la manipulation de Todos est rendu et géré sur le client avec l’aide de Knockout et Breeze. Explorez l’application en tant qu’utilisateur ... mais avec un œil de développeur. Utilisez les outils de développement de votre navigateur pour capturer le trafic réseau. (Dans Internet Explorer : appuyez sur F12, sélectionnez l’onglet Réseau, puis cliquez sur Démarrer la capture.) Essayez maintenant ce qui suit :

• Ajoutez un nouvel élément Todo.
• Cliquez sur l’étiquette et modifiez le titre de l’élément Todo
• Cochez une case pour marquer l’élément terminé. Notez que la zone de texte étant désactivée, le titre n’est plus modifiable.
• Cliquez sur « x » à droite de l’étiquette. L’élément disparaît et est supprimé de la base de données.
• Choisissez un autre élément et effacez son titre. Vous obtiendrez une erreur de validation indiquant que le titre est obligatoire. Après une brève pause, le titre précédent est restauré.
• Tapez un titre ridiculement long. Vous obtiendrez une autre erreur de validation indiquant que le titre est trop long.
• Cliquez sur le bouton « Ajouter une liste de tâches ». Une nouvelle liste apparaît à gauche de la liste précédente.
• Jouez avec le titre TodoList, en déclenchant ses validations requises et de longueur.
• Cliquez dans la zone de texte title pour effacer le message d’erreur.
• Cliquez sur le « x » dans le cercle dans le coin supérieur droit pour supprimer le TodoList et ses todos.

La logique de validation est effectuée côté client par Breeze. Les attributs de validation sur les classes de modèle serveur sont propagés au client et exécutés automatiquement avant que le client contacte le serveur.

Passez en revue le trafic réseau. Notez qu’il n’y a eu aucun appel au serveur lorsque Breeze a détecté une erreur. Chaque modification valide a entraîné une demande POST à « /api/Todo/SaveChanges ». Breeze regroupe les modifications et les envoie ensemble sous forme de requête unique à la méthode du contrôleur d’API SaveChanges web. Cela est différent du modèle SPA KnockoutJS, qui effectue les requêtes PUT, POST et DELETE pour chaque élément individuellement.

Jeter un coup d’œil à l’intérieur

Cette application a un côté client et un côté serveur. La pile côté client se compose d’un peu de code HTML et d’une combinaison de modules JavaScript d’application (dans le dossier « application ») et de bibliothèques JavaScript tierces (dans le dossier « Scripts »).

Si vous avez examiné le modèle DE SPA KnockoutJS, cela devrait vous sembler très familier. Concentrez-vous sur les zones bleues. L’architecture de l’interface utilisateur est Model-View-ViewModel (MVVM), dans laquelle les widgets HTML de l’affichage sont proprement séparés du code de présentation de prise en charge dans le modèle d’affichage. Un système de liaison de données (Knockout dans ce cas) coordonne la vue et le modèle de vue afin que chacun puisse effectuer son travail sans connaissance intime de l’autre.

Le modèle encapsule les données Todo. Les entités dans le modèle sont construites par Breeze avec des propriétés observables Knockout, de sorte qu’elles peuvent être liées directement aux widgets dans la vue. Le modèle d’affichage demande au contexte de données d’acquérir et d’enregistrer les entités du modèle. Le contexte de données délègue la majeure partie du travail à Breeze.

La pile côté serveur se compose d’un code de développeur et de trois bibliothèques .NET principales : API web, Entity Framework et Breeze.NET.

L’architecture de base est identique au modèle SPA KnockoutJS. Toutefois, l’implémentation est beaucoup plus simple : les DTO ont été supprimés et la plupart des détails d’Entity Framework ont été délégués à Breeze.NET.

Étapes suivantes

Nous vous suggérons d’explorer le code, guidé par la discussion approfondie des piles client et serveur sur le site web Breeze.

Vous pouvez essayer de jouer avec la requête côté client Breeze ; ajouter des filtres et des tris. Vous pouvez ajouter d’autres propriétés de modèle et plus d’entités pour avoir une meilleure idée du développement SPA de bout en bout. Lorsque vous êtes sûr de la conception, vous pouvez déchirer les fonctionnalités todo et les remplacer par les vôtres.

Bientôt, vous serez prêt à passer à l’étape importante suivante : l’ajout d’écrans côté client et la navigation entre eux. Vous laisserez ce modèle DE SPA derrière et passerez à une pile DE SPA plus complète, comme John Papa’s Hot Towel, qui ajoute Durandal au mélange Breeze et Knockout.