Se lancer dans la conception de sites Web réactifs pour les applications IBM i

En quoi ça consiste?

Réactifs?

La conception de sites Web ou IBM i ne vous viennent probablement pas à l’esprit lorsque vous entendez le mot réactif.

Selon la définition du Larousse réactif signifie entre autres : « qui réagit, exerce une réaction vis-à-vis de quelque chose ».

Le Wiktionnaire lui, dit qu’il s’agit de quelque chose « qui réagit ou fait réagir ».

Le site web w3schools l’explique vraiment simplement : « La conception de sites Web réactifs fait que votre page Web s’affiche bien sur tous les types d’appareils (ordinateurs de bureau, tablettes électroniques, téléphones). »

Lorsque vous concevez un site Web réactif ou une application réactive, vous ne concevez qu’UNE seule page Web. Vous ouvrez cette page sur un ordinateur de bureau? Elle s’adapte à l’espace du navigateur. Sur un téléphone cellulaire? Même chose, tant à la verticale qu’à l’horizontale. Cela fonctionne, peu importe le système d’exploitation ou le navigateur.

Le site Web « réagit » en fonction d’où il est ouvert. En effet, l’affichage et le contenu s’adaptent au navigateur et à l’appareil, ce qui signifie que du contenu accessible sur un ordinateur de bureau pourrait ne pas s’afficher sur un écran plus petit. Il pourrait se retrouver à un autre endroit, ou encore, s’afficher différemment (forme, taille) selon l’appareil utilisé.

Dans l’univers IBM i, réactif renvoie à la conception de sites Web. Une définition simple de la conception de sites Web réactifs? La page Web peut être consultée sur N’IMPORTE QUEL appareil (elle y réagit bien).

Apprivoiser la technologie

Les techniques utilisées pour créer une page Web ou une application réactive sont assez simples. L’essence du concept réside dans une grille réactive – une technique qui place les éléments en relation, plutôt qu’en unités fixes et distinctes.

La grille réactive comprend des éléments pratiques de langage CSS, comme le code float. L’élément défini par ce code se déplacera dans la page. Par exemple, si vous configurez un élément de ce type à gauche de la page, où l’espace est déjà occupé, il se déplacera vers le bas et s’alignera à gauche sous les éléments déjà en place.

Il y a aussi la règle @media (requêtes médias) qui permet de définir un groupe d’éléments CSS pour une combinaison spécifique d’éléments affichés. Avec une requête média, on peut définir l’affichage de la version ordinateur ET celle pour tablette ET celle pour téléphone, le tout à partir d’une même feuille de style. On peut aussi les utiliser pour définir l’affichage en mode portrait ET paysage, et celui en mode écran ET impression.

Ces fonctions peuvent être utilisées dans une feuille de style commune pour la version Web et l’application. Vous n’avez donc plus à multiplier les feuilles de style en fonction des types d’appareils. Quel que soit l’appareil, le système d’exploitation ou le navigateur, tout s’affichera correctement.

La tâche peut sembler immense pour le développeur CSS moyen, et que dire du programmeur RPG ou COBOL ayant récemment passé de SEU et de PDM à un environnement de développement d’applications intégré moderne. Le Web fourmille de ressources, et avec un peu de pratique et l’aide de la communauté, la plupart des développeurs arrivent à écrire leur propre code CSS réactif.

Les cadres d’applications CSS, des plugiciels permettant d’ajouter facilement différentes fonctions, sont l’une des techniques utilisées pour la conception de sites Web, et la privilégiée pour les sites Web réactifs. La plupart d’entre eux possèdent des fonctionnalités HTML, CSS et JavaScript.

On trouve bon nombre de cadres d’application libres en circulation, notamment le très populaire Bootstrap (getbootstrap.com) pour lequel de nombreux fournisseurs offrent des modèles. La foule d’options peut sembler intimidante, c’est pourquoi il est conseillé de consulter des spécialistes en conception pour s’y retrouver plus aisément.

Votre tâche consiste à créer le contenu, le site Web ou l’application se construit ensuite en fonction des différents ajustements apportés au cadre. Il ne reste alors qu’à vérifier si le site Web ou l’application fonctionne sur tous les appareils sur lesquels ils pourraient être consultés.

C’est une étape importante. Les programmeurs tendent à croire que leur conception suffit si elle comprend les renseignements demandés par le client. Par contre, dans le cas des applications Web et mobiles, on entre dans un autre monde. Un monde où l’on doit s’assurer que l’utilisateur profitera d’une expérience exceptionnelle, peu importe la manière dont il consulte l’application ou la page Web, pour l’inciter à y retourner et à continuer de l’utiliser.

Se lancer dans la conception de sites Web réactifs avec IBM i

Deux choses sont à retenir.

Premièrement, les concepteurs doivent être mobilisés. Certes, le cadre d’applications automatise certains aspects du travail, mais le choix du modèle ou du style ne devrait pas se faire sans faire appel à des spécialistes.

Deuxièmement, il faut tester l’application sur tous les appareils visés, sinon on s’expose à des problèmes de prise en charge. Les navigateurs modernes d’ordinateurs de bureau sont dotés d’option d’affichage en version mobile, et vice-versa pour les émulateurs d’OS X sur iOS.

Bien que les outils des navigateurs et les émulateurs donnent un bon aperçu de l’apparence de l’application, ils ne peuvent servir à évaluer la véritable expérience utilisateur. C’est pourquoi il est impératif d’en faire l’essai avec chacun des appareils et des systèmes d’exploitation compatibles. Le processus d’essai est habituellement moins long pour les applications internes. Les applications externes, elles, sont normalement plus simples et se testent souvent avec les appareils utilisés à l’interne, et quelques autres pour représenter les appareils de la clientèle externe.

Au moment de choisir vos outils de développement, tenez compte de la compatibilité avec la conception de sites Web réactifs. Si la compatibilité est faible ou inexistante, vous pouvez écrire votre propre code CSS de sorte à le rendre réactif. S’il y a compatibilité, vérifiez si elle se limite à un type de cadre et s’il répond à vos exigences le cas échéant. Si les possibilités de configuration sont limitées, assurez-vous de pouvoir ajouter les plugiciels ou les fonctions dont vous avez besoin. Si différents cadres sont offerts, assurez-vous de pouvoir désactiver ceux qui ne sont pas utilisés de sorte à éviter toute confusion et à réduire les risques de chevauchement et de rupture d’un cadre à un autre.

Pour faire face à cette multitude de choix, votre équipe devrait être qualifiée pour travailler avec HTML, CSS et JavaScript. L’avenir des applications IBM i tend entre autres vers le Web; les développeurs doivent donc au moins en connaître la base. De plus, les connaissances Web ouvrent la porte à l’univers du mobile, la forme d’applications la plus utilisée. Les développeurs devront maîtriser les langages HTML, CSS et JavaScript pour la suite.

Finalement, comme nous travaillons avec un système d’exploitation moderne, ces techniques sont prises en charge et facilement accessibles sur IBM i. Nous utilisons de plus en plus la structure de fichiers incorporés comme élément central de notre méthodologie de développement. C’est pourquoi les développeurs qui commencent à utiliser IBM i travailleront rapidement avec des éléments sources et Web, tout en apprenant la structure de bibliothèque et d’objets avec laquelle nous sommes si à l’aise.