Développement générique

Pourquoi développer des composants génériques

Ionic et AngularJS sont basés sur le principe de la réutilisabilité. En effet, les composants sont développés de manière à pouvoir servir dans la plupart des contextes. Il suffit simplement de fournir des paramètres à chaque service, chaque directive, chaque élément pour personnaliser son visuel, son ergonomie et son comportement pour l’adapter au contexte.

Lors du développement d’une application, l’objectif premier est donc de réutiliser au maximum ces composants génériques pour les adapter au projet et se concentrer sur les fonctionnalités métier. Un bon réflexe que tout développeur doit posséder est de chercher si un composant a déjà été développé par d’autres avant de se lancer dans la création d’un composant original. Bien souvent, pour des besoins simples, il existe plusieurs implémentations possibles, dont au moins une conviendra aux exigences particulières du projet.

Par exemple, lorsqu’une célèbre application permettant de retenir ou de refuser des flirts en passant simplement son doigt sur l’écran est apparue, des milliers d’applications ont voulu imiter ce mode de fonctionnement très ergonomique et tendance. Aujourd’hui...

Modules

Développer une application mobile de A à Z est un processus long et complexe. Plusieurs dizaines d’écrans se succèdent, de nombreuses interactions avec un serveur sont requises et il est indispensable de mettre en place toutes les fonctionnalités possibles pour rendre l’expérience utilisateur la plus simple et agréable possible. Cela signifie qu’il est nécessaire d’écrire de nombreux contrôleurs et services et d’importer plusieurs librairies tierces. Sans une architecture adaptée, le code source de l’application peut rapidement devenir illisible, les composants peuvent développer des dépendances entre eux qui empêchent leur évolution et, par conséquent, cela rend le travail en équipe très difficile. Il est donc nécessaire de mettre en place une architecture qui répond aux exigences suivantes :

Permettre l’isolation des composants les uns des autres pour limiter l’adhérence.
Permettre la communication entre les composants pour répartir les traitements et les responsabilités (par exemple : un contrôleur vers un service).
Rendre les composants facilement réutilisables d’un projet à l’autre.
Permettre le développement des composants en parallèle, pour favoriser le travail en équipe.

1. Présentation du principe des modules

AngularJS propose d’utiliser la notion de modules pour répondre à toutes ces exigences, tout en gardant une grande simplicité d’écriture et en privilégiant la lisibilité du code source. Le principe fondamental est de regrouper plusieurs composants (vues, contrôleurs, services, filtres, etc.) au sein d’une même entité nommée module.

Un module peut être autosuffisant car il contient tous les composants dont il a besoin pour afficher des informations à l’écran, traiter les interactions utilisateurs et communiquer avec un serveur ou une base de données embarquée. Dans ce cas, le principe d’isolation est poussé au maximum et il est possible de réutiliser ce module en effectuant un simple copiér-collé dans un autre projet. Néanmoins, cette méthode montre rapidement ses limites car dans une application...

Directives

1. Concept

La création de modules offre la possibilité de généraliser et d’exporter tout un pan de l’application pour le réutiliser dans un autre projet. D’un point de vue micro, il est tout aussi intéressant de pouvoir rendre générique un composant d’affichage pour le réutiliser dans plusieurs pages.

Ce serait par exemple le cas d’un composant qui prendrait en paramètre une date et l’afficherait avec le design d’une éphéméride. Ou encore un composant qui prendrait en paramètre les informations d’un film et les mettrait en forme pour montrer l’affiche, le titre et l’année de sortie au sein d’une liste. C’est d’ailleurs cette méthode que Ionic exploite abondamment pour proposer au développeur d’intégrer des composants très complexes en une seule ligne : carrousel, carte, onglet, etc.

La notion de directive n’est pas liée directement à Ionic mais à AngularJS. Une directive AngularJS a pour objectif d’abstraire le visuel et le comportement d’un élément de manière à le rendre réutilisable dans n’importe quel autre écran. En un sens, une directive est un morceau d’écran composé d’une vue et d’un contrôleur, qui sera intégré dans un autre écran.

Au-delà des directives Ionic complexes, AngularJS est en fait lui-même essentiellement composé de directives : ng-if, ng-repeat, ng-model, ng-app, etc. Le système de directives est en ce sens très puissant car il permet de créer de nouvelles balises HTML ou de nouveaux attributs qui seront utilisés comme n’importe quel autre au sein d’un projet web ou mobile.

2. Création d’une directive

Une directive est un composant essentiel d’AngularJS au même titre que les contrôleurs et les services. La déclaration d’une directive est donc en tout point similaire à la création de ces autres éléments : un fichier JS contient le code de la directive et un template interne ou externe, puis la directive est déclarée auprès du module principal (dans le fichier app.js) ou dans le module local.

Déclaration...

Filtres

Lorsqu’il est nécessaire de filtrer ou trier des informations à l’écran, sans passer par le contrôleur ou un service, AngularJS met à disposition un mécanisme simple mais puissant de filtres. Les filtres sont généralement utilisés en association avec une boucle ng-repeat et vont afficher ou non une itération en fonction de la nature de la donnée. D’une manière plus générale, un filtre peut être utilisé sur n’importe quelle expression, pour traiter une chaîne de caractères, arrondir un nombre, transformer une date, etc.

1. Filtre simple

AngularJS fournit naturellement plusieurs filtres prêts à l’emploi : restriction, ordre, etc. Une caractéristique intéressante des filtres est qu’ils peuvent être chaînés, ainsi, une liste peut tout d’abord être filtrée (pour ne retenir que les films contenant le mot "test" par exemple), ordonnée, puis tous les titres mis en majuscules.

a. Utilisation de filtres

Pour filtrer une liste et ne retenir que les éléments qui contiennent un texte donné, il faut utiliser le filtre filter. Par exemple, pour filtrer une liste datas en n’affichant que les entrées qui contiennent mon texte :


<div ng-repeat="data in datas | filter:'mon texte'"> 
      ... 
</div>

Si les objets dans la liste contiennent plusieurs attributs, alors tous ces attributs seront parcourus à la recherche de la valeur passée en paramètre. Pour préciser que la restriction ne doit se faire que sur un, ou plusieurs champs, il faut passer la liste de ces champs en paramètres. Par exemple :


<div ng-repeat="data in datas | filter:{nom: 'mon texte', 
prenom: 'autre...

Fichier de configuration et constantes

Dans tout projet, certains éléments sont utilisés de manière transverse : URL du serveur, langue par défaut, emplacements des images, etc. Ces informations ne doivent pas être centralisées dans un module, un contrôleur ou un service mais doivent être accessibles partout dans l’application et ne surtout pas être copiées-collées à plusieurs endroits dans le code. Par exemple, si l’URL du serveur change, tous les services qui communiquent avec lui doivent être impactés en modifiant la valeur de l’URL à un seul endroit du code.

Plusieurs techniques permettent de répondre à cette exigence, comme l’usage de variables globales, d’attributs dans le contexte global ($rootScope), de services déclarés dans toute l’application, etc.

AngularJS propose deux méthodes méconnues et pourtant simples à mettre en œuvre pour utiliser des constantes dans l’application : les values et les constants. Dans les deux cas, il s’agit de composants qui pourront être injectés au même titre que les services ou les contrôleurs. Il faudra donc veiller à injecter chacune d’elles dans les composants qui en ont besoin (contrairement à une variable globale JS qui est accessible à tout endroit du code)...