IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Tutoriel AngularJS : Google, Twitter et AngularJS

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

5 commentaires Donner une note à l´article (5)

Article lu   fois.

Les deux auteur et traducteur

Traducteur : Profil Pro

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Avant propos

Image non disponible

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.

II. Liaison de données, vues et routage

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.

III. Interface utilisateur

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.

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

VI. Gestion de packages : Bower

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.

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

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

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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

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