Résumé
Merry Pixmas: amusez-vous à Noël avec les transformations CSS 3D.
Ce que nous aimons ?
Une démo sur le thème de Noël qui fonctionne bien sur ordinateur et sur mobile. Il est même compatible avec de nouvelles couleurs de thème et un fichier manifeste Web pour une expérience sur l'écran d'accueil qui s'ouvre en plein écran.
Conseil d'expert: secouez votre téléphone pour faire tomber la neige !
Améliorations possibles
Même si je réalise qu'il s'agit d'une démonstration, quelques en-têtes de cache spécifiés sur les éléments et le code JavaScript qui ne bloque pas l'affichage auraient pu sensiblement améliorer le temps de chargement perçu.
Questions à Jim Savage
Pourquoi le Web ?
Chez Tokyo, nous préconisons depuis longtemps le Web mobile et responsif, plutôt que natif. Pixmas est le résultat de tests réalisés avec HTML5 et CSS3 pendant des périodes d'inactivité entre les projets. Nous essayons toujours de nouvelles choses pour actualiser nos connaissances. Par conséquent, pour notre équipe de développeurs front-end, toute recherche aurait été axée sur le Web plutôt que sur une plate-forme native.
À mesure que les navigateurs progressent, nous voyons davantage de fonctionnalités natives. Celles qui n'étaient disponibles que via le développement natif, telles que la géolocalisation, l'accès à l'appareil photo, le stockage local de la base de données, etc., contribuent toutes à une expérience globale de type natif pour l'utilisateur, avec les avantages d'un développement multiplate-forme et d'un développement d'itération rapide. Bien entendu, le développement natif présente toujours ses avantages et, lorsque vous vous attaquez à un nouveau projet, les options Web et natives doivent être beaucoup prises en compte. Cela peut probablement sembler évident, mais pour nos clients, il est important que nous leur recommandions la meilleure plate-forme pour leur tâche, plutôt que de définir le programme pour lequel nous préférons coder chaque projet.
Qu'est-ce qui a vraiment bien fonctionné lors du développement ?
Je pense qu'avec Pixmas, l'objectif principal était les transformations 3D et la capacité du CSS à atteindre. Le style pixélisé à titre d'illustration a donc très bien fonctionné dans le navigateur. Comme n'importe quel développeur front-end vous indiquera que le comportement naturel d'un navigateur est adapté aux carrés ! Donc, baser le style général et les mathématiques 3D sur des problèmes basés sur des carrés a très bien fonctionné. Créer un cube avec des transformations 3D et du code HTML est beaucoup plus facile que n'importe quelle autre forme primitive. Cependant, l'interaction et les animations ont nécessité un peu d'essais et d'erreurs pour s'arranger.
Ce qui nous a le plus surpris, c'est la fluidité et les performances de la 3D sur les plates-formes mobiles, en particulier sur les appareils Android moins connus.
Si vous pouviez avoir une API pour améliorer votre application, quelle serait-elle ?
Si nous devions à nouveau écrire Pixmas, nous utiliserions probablement une API basée sur WebGL. Même s'il était amusant de manipuler des éléments DOM HTML en 3D via CSS, la véritable puissance de la 3D basée sur le Web doit être une technologie dédiée avec accélération matérielle comme WebGL. Le CSS 3D convient aux effets et transitions de base de pages Web, mais nous avons rencontré une limite de performances dans le navigateur lors du codage de Pixmas.
Google propose d'excellents projets WebGL sur Chrome Experiments.