Tutoriel AngularJS : Google, Twitter et AngularJS

• Partie 1 : Google, Twitter, et AngularJSPartie 1t
• Partie 2 : créer un lecteur de flux RSSPartie 2
• Partie 3 : afficher le flux RSSPartie 3
• Partie 4 : gérer les flux RSSPartie 4
• Partie 5 : testsPartie 5
• Partie 6 : ajouter des dépendancesPartie 6
• Partie 7 : validation d'un formulairePartie 7
• Partie 8 : itérateurs et filtresPartie 8
• Partie 9 : installationPartie 9

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 YeomanYeoman 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.

AngularJSAngularJS 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.

BootstrapBootstrap 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.

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.

Les jeux de tests Yeoman en Mocha et en KarmaKarma 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-mochakarma-mocha pour que Karma puisse utiliser Mocha.

BowerBower, 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.

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 StackYeoman 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 SeedSocket.io Seed d'AngularJS qui conserve les données dans un serveur Node/Express à l'aide de Socket.IO.

La proposition Entity-Driven ToolingEntity-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 consistencyeventual 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.

Je ne peux m'empêcher de penser qu'il y a plus d'open source Google que de bibliothèques ClosureClosure. 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.

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.