Catégories : Expertise TechniquePar Tags:

Visual Studio 2015 et Apache Cordova – Partie 1

Visual Studio 2015 et Apache Cordova – Partie 2

Points d’attention

Cordova facilite donc grandement le travail des développeurs web et permet de poser un premier pied dans l’univers du développement mobile sans perdre ses repères. Il est d’ailleurs possible de conserver une majeure partie de ses habitudes de travail, notamment tout ce qui est à classer dans le Responsive Design qui permet de bénéficier d’une technique plus flexible que la définition de « layout » pour chacune des résolutions souhaitées.

Cependant, il est nécessaire d’apporter plus de soin aux animations, généralement réalisées en Javascript pour plus de compatibilités avec les différents navigateurs. Avec une application native, la donne change sensiblement. Il est possible de cibler une version d’OS précise afin de s’assurer des prérequis, ce que l’on ne peut pas faire avec un poste client potentiellement sous Internet explorer 6 ou 7. D’autre part, le processeur et la mémoire vive disponible ne sont pas encore aussi puissants que sur un ordinateur.

Il convient donc de remplacer les styles « inline » animés par Javascript (ce qui est réalisé par exemple par Foundation) par des transitions CSS. De plus, il est préférable d’utiliser les nouvelles fonctionnalités du CSS3 afin de solliciter le processeur graphique lorsque cela est pertinent afin d’éviter un phénomène de « Reflow ». On peut observer un phénomène de « Reflow » lorsqu’un élément change de dimensions, ce qui peut ralentir temporairement le navigateur durant le recalcul de l’impact que ce changement peut avoir sur le reste de la page. Par exemple, il sera bien plus performant d’utiliser une transition sur la fonction « transform » (via « translate ») plutôt que les coordonnés « top » et « left ». Enfin, si optimiser son arbre DOM et son Javascript peut paraître superflu sur un ordinateur, c’est autrement plus important sur un terminal mobile.

Par exemple, ce CSS sera fonctionnel sur plus de navigateurs mais peu performant :

.slide.inactive { 
     transition: all 0.5s ease-out; 
     -webkit-transition: all 0.5s ease-out; 
     opacity: 0; 
     left: -100%; 
 } 
 .slide.active { 
     position: relative; 
     transition: all 0.5s ease-out; 
     -webkit-transition: all 0.5s ease-out; 
     opacity: 1; 
     left: 0; 
 }

Celui-ci, au contraire, sera moins compatible mais bien plus performant, puisque ne déclenchera pas de phénomène de « reflow » :

.slide.inactive { 
     transition: all 0.5s ease-out; 
     -webkit-transition: all 0.5s ease-out; 
     opacity: 0; 
     transform: translateX(-100%); 
     -webkit-transform: translateX(-100%); 
 } 
 .slide.active { 
     position: relative; 
     transition: all 0.5s ease-out; 
     -webkit-transition: all 0.5s ease-out; 
     opacity: 1; 
     transform: translateX(0); 
     -webkit-transform: translateX(0); 
 }

Pour aller plus loin, il conviendrait de s’aventurer dans l’utilisation de Frameworks Front-End spécialisés comme Iconic. Il est d’ailleurs intéressant de remarquer une de leurs idéologies :

Obsédé par la performance La vitesse est importante. A tel point que l’on ne le remarque que lorsqu’elle est absente. Iconic est conçu pour être performant et se comporter superbement sur les derniers terminaux mobiles. Avec une manipulation minimale du DOM, aucune dépendance à jQuery, et des transitions accélérées au niveau matériel, une chose est sure : Vous allez être impressionnés.

ionic

Pour finir, voici un dépôt GitHub où est hébergé le code source d’une application Cordova de présentation type « PowerPoint ».

Sources

Ne ratez plus aucune actualité avec la newsletter mensuelle de SoftFluent

Newsletter SoftFluent