Retour d'expérience sur PhoneGap Build et Sencha Touch dans le contexte Pix2know, à l'occasion du 6ème Meetup PhoneGap Paris.

1. www.pix2know.com
PhoneGap Build
Sencha Touch
Sébastien Le Marchand
@slemarchand
PhoneGap Paris Meetup #6 – 16 décembre 2013 – Pépinière 27

2. Quizz
Photo
Social
Cibles : iPhone & Android
Début développement : avril 2013
Pivot : plus ludique → focus sur le design
Beta privée depuis septembre 2013

6. PhoneGap Build
Très pratique au départ...
… mais pas suffisant sur le long terme

7. Sencha Touch : la minute marketing :-)
Plus de 50 composants intégrés
✔ Thèmes pour les plateformes les plus courantes
✔ Architecture MVC intégrée
✔ Scrolling et animation fluides
✔ Mise en page adaptative
✔ Packaging natif
✔ Editeur visuel Sencha Architect
✔

8. « The all-in-one, top secret,
monolithic solution »
Julien

9. Exemple de feature non documentée : scrollDock
Ext.define('MyApp.view.MyList', {
extend: 'Ext.dataview.List',
xtype: 'mylist',
config: {
items: [
{
scrollDock: 'top',
...
}
...

10. MVC

11. HTML généré → CSS plus difficile à produire

12. Quelle approche retenir ?
Pas de charting en JS
Pas de mixins saas « Sencha-centric »
Propriété cls renseignée sur chaque view
1 view .js = 1 fichier .scss
Considérer la directive !important

13. Et les perfs ?
Les dégradations de performance sont beaucoup
plus sensibles à la taille du DOM sous Android
que sous iOS
→ passage entre tabs
→ scroll de listes riches

14. MVC

15. Garder le contrôle sur ses contrôleurs
N'utiliser les getters sur les refs que pour des
vues « singleton »
Utiliser le passage de paramètres des controls
Mettre du code dans les views (helpers, events)

16. MVC

17. Store et Model
Comportements inattendus
Relations entre modèles
useCache
currentPage

18. Offline
Démarrage en offline : DIY !
Problématique des images : imgcache.js
Pour aller plus loin : winch.io

19. Quelles leçons
retenir ?