Best Practices AngularJS

AngularJS-large

 

Bien que la première version stable d’Angular2 soit sortie mi-septembre 2016, AngularJS reste très populaire parmi les développeurs front-end. Sa stabilité et sa puissance ne sont plus à démontrer et sont des alliés de poids dans la création d’applications à l’interface riche et aux nombreuses interactions avec l’utilisateur.

Néanmoins, la prise en main de cette technologie peut s’avérer longue et frustrante, notamment à cause de concepts tels que les directives ou encore le « two-way data binding ». Lorsque le framework n’est pas complètement maîtrisé, il en résulte une application peu optimisée voire trop lente dans certains cas, et dont le code n’est pas clair.

Nous allons donc voir dans cet article quelques best practices permettant d’optimiser les performances et la maintenabilité d’une application utilisant AngularJS.

Utiliser fullcalendar avec Angular 2

logo

Fullcalendar est un plugin jQuery très célèbre pour la gestion des rendez-vous du côté client. Il peut interagir avec des frameworks Javascript. Avec les fonctionnalités fournis par AngularJs 1, nous pouvons facilement interagir avec fullcalendar, enregistrer des dates de rendez-vous via un Web Service en utilisant l’Ajax. Mais dans notre article, nous allons voir comment le faire avec Angular 2. (Télécharger ou cloner les exemples)

Il y a deux approches que nous allons étudier avec le plugin Fullcalendar de jQuery:

  • La séparation de la logique de jQuery et Angular 2
  • L’utilisation d’Angular 2 seulement. 

Introduction à Angular 2

angular2

C’est quoi Angular 2 ?

Si vous connaissez AngularJS (Angular 1.x), vous pensez peut-être qu’Angular2 est une upgrade d’AngularJS. En réalité, Angular2 a été totalement réécrit par Google, ce qui en fait un nouveau framework à part entière, avec une philosophie et des concepts propres à lui.

AngularJS nous a fourni beaucoup de fonctionnalités, comme la gestion des routes, interaction entre client et serveur, interpolation, directives, filtres, …, le tout sous une architecture MVW.

Certaines de ses fonctionnalités telles que le data-binding et les filters ont été reprises et modifiées dans Angular 2. Nous allons voir une liste de comparaisons, côté HTML et script.

Parcourir l'article

NPM – Un peu plus qu’un gestionnaire de librairies

Dans l'écosystème du développement Web, l'incontournable Node Package Manager est l'outil de gestion des dépendances le plus naturel lorsque que l'on démarre un projet JavaScript.

npm-logo

Et on y adjoint souvent un orchestrateur gérant les taches de packaging (Gulp, Grunt, etc.). Avec les "bundlers" (Webpack, Browserify) de plus en plus fourni en fonctionnalités (minification, versioning...), la question du rôle de ces orchestrateurs se pose car il ne se résume alors qu'en l'exécution de simples macro-commandes.

Framework METEOR

meteor-logo

Qu'est-ce que METEOR ?

METEOR ne fait pas référence aux astres comme l'on peut imaginer, mais un Framework de développement Web en Javascript, open source et basé sur NodeJs.

Meteor est non seulement un Framework assez complet et autonome mais supporte aussi le Cross-plateform (Multiplateforme), c'est à dire sur Mobile (Android / IOS) que sur les explorateurs internet (IE, Firefox, ...).

Dans cette article, nous allons voir :

  • Les principes de METEOR : Que fait la météorite ?
  • Les pré-requis : Quelles sont les surprises pour commencer ?
  • L'installation et l'utilisation : Attention, l'apprentissage se fait sur le site officiel
  • Les points forts : D’où vient la météorite ? Pourquoi lui ?
  • Les points faibles : Superman a aussi sa faiblesse...
  • Liens