Tutoriel AngularJS : Google, Twitter et AngularJS

Alex Young

Traducteur

vermine

Cet article est la traduction de Google, Twitter, and AngularJS publié sur DailyJS.

Commentez ♪

- Titre : Tutoriel AngularJS : Google, Twitter et AngularJS

- Auteur : Alex Young

- Traducteur : vermine

- Parution : 9 mai 2013

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2013 Alex Young. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Avant propos

- II. Liaison de données, vues et routage

- III. Interface utilisateur

- IV. Construction/Aperçu : Grunt

- V. Tests : Karma et Mocha

- VI. Gestion de packages : Bower

- VII. Le chaînon manquant : Sync

- VIII. L'autre chaînon manquant : interface utilisateur

- IX. Remerciements

I - Avant propos

- Partie 1 : Google, Twitter, et AngularJS

- Partie 2 : créer un lecteur de flux RSS

- Partie 3 : afficher le flux RSS

- Partie 4 : gérer les flux RSS

- Partie 5 : tests

- Partie 6 : ajouter des dépendances

- Partie 7 : validation d'un formulaire

- Partie 8 : itérateurs et filtres

- Partie 9 : installation

Ma longue série de tutoriels Backbone.js a suivi son cours donc je voulais poursuivre avec des articles sur AngularJS. Une chose qui m'intrigue sur AngularJS est la nouvelle relation entre Google et Twitter. Ou entre les grands développeurs de Google et Twitter. Je ne pense pas qu'il existe un plan global au niveau de la gestion pour créer un partenariat open source, mais c'est plutôt un ensemble de coïncidences qui font que les projets sont alignés selon certains vecteurs et qui poussent vers l'avant le développement Web.

La plupart des choses dont je vais parler ici ont été empaquetées dans Yeoman qui a quelques employés de Google derrière lui (Paul Irish et Addy Osmani) et intègre la technologie Twitter (Bower). Le reste de cet article décomposera le prochain projet open source de génération émergeant de Google/Twitter.

II - Liaison de données, vues et routage

AngularJS de Google est le choix évident pour la liaison de données. Il gagne sans aucun doute en popularité, et Yeoman inclut un générateur pour lui.

III - Interface utilisateur

Bootstrap est également soutenu par Yeoman et offre une belle série de widgets extensibles d'interface utilisateur. Bien que les sites Bootstrap deviennent un cliché, on ne fait pas beaucoup d'efforts pour le personnaliser.

IV - Construction/Aperçu : Grunt

Dans mes tutoriels Backbone.js, nous avons utilisé Node pour créer un petit serveur Web avec RequireJS pour le développement local. J'ai inclus quelques détails sur Grunt simplement parce que j'utilise GNU Make pour mes propres projets. Donc je voulais regarder Grunt plus attentivement. Les développeurs derrière Yeoman ont choisi Grunt comme outil de construction/aperçu.

V - Tests : Karma et Mocha

Les jeux de tests Yeoman en Mocha et en Karma peuvent être utilisés dans les navigateurs comprenant les scripts. C'est utilisé pour tester AngularJS, c'est de là que la connexion provient et il y a un adaptateur karma-mocha pour que Karma puisse utiliser Mocha.

VI - Gestion de packages : Bower

Bower, de Twitter, est un gestionnaire de packages léger. J'ai parlé un peu à ce sujet sur DailyJS et j'essaie d'inclure des liens vers les noms de packages Bower quand c'est possible. Yeoman est livré avec Bower.

VII - Le chaînon manquant : Sync

J'ai un peu parlé de Backbone.sync dans la série de tutoriels Backbone.js parce qu'il est si flexible que j'ai pu faire des choses cool avec elle comme synchroniser les données avec les API JavaScript de Google. Ce qui est intéressant quand on sait que Backbone est configuré pour communiquer avec un serveur REST de type Rails.

Alors, qu'en est-il de cette nouvelle ère de projets open source Google/Twitter ? Quelles solutions de synchronisation de données sont présentes ? À ma connaissance il n'y a pour l'instant rien de générique, mais il y a lYeoman Express Stack :

Une épreuve de concept de pile end-to-end pour le développement à l'aide de Yeoman 0.9.6, d'Express et d'AngularJS. Remarque : cette branche expérimentale est prévue pour des fins de tests uniquement (à l'heure actuelle) et ne fournit aucune garantie.

Il s'agit d'un petit projet qui s'appuie sur Yeoman et AngularJS pour synchroniser des données avec un serveur Node/Express. Cela vient d'un projet week-end hack auquel a participé Addy Osmani qui a contribué à de nombreux projets mentionnés ici.

Il y a aussi Socket.io Seed d'AngularJS qui conserve les données dans un serveur Node/Express à l'aide de Socket.IO.

La proposition Entity-Driven Tooling des développeurs Yeoman concernant l'ajout du support de générateur CRUD est également importante :

tl;dr: que se passe-t-il si une seule commande peut échafauder les modèles/vues CRUD pour votre code côté client et serveur, avec un support hors-ligne. Cela vous aiderait ? Cela résoudrait un de vos points épineux ? Y a-t-il de meilleurs moyens pour faire ce qui est décrit ci-dessous ?

Bien que j'ai souvent souhaité quelque chose comme ça, le paragraphe semble dire qu'une solution de synchronisation localStorage serait élaborée. Cela permettrait à la partie du projet basé sur le navigateur de se comporter comme un client, rendant les données disponibles dans localStorage pour une utilisation hors connexion.

Toutefois, la synchronisation de données peut être difficile, donc fournir un générateur qui peut faire cela serait plus compliqué que Backbone.sync. Peut-être que se baser sur le modèle eventual consistency de CouchDB fonctionnerait ? Les enregistrements disponibles sur place auraient un paramètre version qui servirait à synchroniser en toute sécurité en même temps que le serveur. Cela laisserait la résolution des conflits au développeur de l'application. Certains serveurs peuvent stocker la dernière version d'un enregistrement, et d'autres peuvent lever une erreur, et peut-être provoquer un affichage sur le client de conflit de résolution.

Il peut y avoir un projet de synchronisation localStorage que les développeurs de Yeoman ont à l'esprit.

VIII - L'autre chaînon manquant : interface utilisateur

Je ne peux m'empêcher de penser qu'il y a plus d'open source Google que de bibliothèques Closure. Si vous avez utilisé Android depuis Jelly Bean, Chrome OS ou Google Plus, alors vous savez que les concepteurs de Google ont poussé les choses au plus loin alors que la société n'avait que quelques années. Bien que la bibliothèque Closure est un formidable ensemble d'outils, les widgets ne cadrent pas bien avec les projets open source de génération Yeoman. Je suis impatient de voir à quoi ressemblerait une version nouvelle de génération de Bootstrap.

Mais pour l'instant je regarde AngularJS, Grunt, Bootstrap, Bower et Mocha pour ma prochaine série de tutoriels. Je vais devoir trouver quelque chose d'intéressant avec lequel synchroniser des données parce que j'ai apprécié travailler avec l'API Google Tasks.

IX - Remerciements

Cet article a été publié avec l'aimable autorisation de Alex Young concernant l'article original Google, Twitter, and AngularJS du site DailyJS.

Je remercie également zoom61 pour sa relecture attentive et assidue.