webkit gotchas pour le développement android/iphone

Question

Si je voulais développer le front-end de mon application mobile en utilisant js, css, html afin de cibler à la fois Android et iPhone, à quoi dois-je faire attention?

Je ne cherche pas la comparaison entre le développement natif et le développement web autant que je suis préoccupé par les problèmes de performance et de développement.

Answer 1

J'ai fait beaucoup de recherches sur ce sujet, ci-dessous sont quelques-uns des principaux problèmes que j'ai trouvé.

• Les événements tactiles sont incohérents entre différents périphériques.
• Il n'y a pas bon façon d'effectuer des positions fixes. Ce qui serait nécessaire pour une barre de titre simple.
• Actuellement, il n'existe aucun cadre qui prend en charge plusieurs périphériques de résolution, c'est-à-dire que l'interface utilisateur semble pixellisée sur le nouvel écran Retina de l'iPhone 4.
• Les périphériques mobiles ont de petites quantités de mémoire et des processeurs lents, l'utilisation de tout framework JavaScript courant significativement réduit les performances (y compris jQuery).
• Assurez-vous d'utiliser les animations/transitions WebKit plutôt que d'effectuer les animations en JavaScript (ceci utilise l'accélération matérielle).

Je ne peux pas penser à plus maintenant, mais quand je le fais, je vous le ferai savoir.

Answer 2

1. Android n'a actuellement pas l'accélération matérielle dans le navigateur, mais qui change de 3,0 à http://android-developers.blogspot.com/2011/03/android-30-hardware-acceleration.html. Si vous utilisez le défilement natif (préféré sur Android pour le moment), veillez à bien gérer le toucher afin que lorsque vous faites défiler le point de contact, vous n'ouvriez pas immédiatement de nouvelles vues.

2. LocalStorage est rapide. Vous pouvez stocker JSON dans LocalStorage en utilisant l'option stringify et parse de JSON. La base de données HTML avec SQLite est plus lente.

3. Sencha est belle, mais restrictive. jQueryMobile a une base de support solide avec un grand ensemble de fonctionnalités, mais toujours bogué.

4. Google Closure Compiler a des problèmes avec PhoneGap et d'autres bibliothèques. Peut vouloir utiliser YUICompressor.

5. Dans Android, utilisez les choix natifs pour les cartes et les menus. Les cartes sont un lien vers google maps. Les menus sont des listes stylisées d'un bouton (voir jQueryMobile).

6. Utilisez un moteur de modèle comme Moustache ou Guidons. Handlebars tient compte de la logique et des aides, plus tous les goodies fournis par moustache.

7. Les tables CSS3 sont votre ami pour des ensembles de contenu 100% flexible.

8. Découvrez les plugins PhoneGap dans Github. Il y a un ContactView que j'ai écrit pour Android pour la société pour laquelle je travaille - http://www.reardencommerce.com, où nous construisons des applications html5 en javascript et node.js.

9. AJAX inter-domaine ou du système de fichiers local fonctionne sur mobile.Il fonctionne également sur Safari Mac uniquement si vous lisez l'application à partir du fichier: // protocole.

10. Il existe des paramètres que vous pouvez modifier dans Chrome Windows/mac pour autoriser AJAX inter-domaines, mais cela réduit vos niveaux de sécurité. Vous pouvez avoir des virus.

11. Trop de dégradés CSS3 ralentissent considérablement votre application. Drop Les ombres, les dégradés et les coins arrondis avec CSS3 ne sont pas jolis sur Android.