jeudi 7 août 2014

Web Mobile : faut-il abandonner JQUERY - part 2

Touches pas à mon JQUERY

Je l'avoue, je savais bien que l'article précédent susciterait la polémique. Il ressemble à un troll, a le goût du troll mais ce n'en est pas un.

En fait le problème avec JQUERY et d'autres libs orientées DOM et widgets est qu'ils ont été conçus à la base pour une exploitation PC. Et donc, les web-designers, les concepteurs de frameworks (bootstrap par exemple) l'utilisent intensément, accroissant ainsi la dépendance, mais aussi l'expérience des concepteurs.

Je comprends donc très bien les réactions du type "mais si tu nous enlève jquery, comment on va faire?", ou bien "qu'as tu donc à nous proposer pour réaliser aussi facilement un site ou une webapp?", ou bien encore "montre nous une de tes réalisations pour voir...". 

On notera que l'objet principal de l'article, à savoir les performances très faibles de JQUERY n'est pas remis en cause, il est même largement admis y compris par ceux qui critiquent ce même article.


C'est quoi le problème?

À mon avis il y a une incompréhension du concept même de mobilité de la part des designers. Ils pensent "présentation" avant "contenu.
Leurs objections vont de "Comment je vais faire de jolis trucs, pleins de beaux widgets, facilement sans mon framework favori?", à "Et tu fais comment pour faire des graphiques sans ...", en passant par "il faut que çà plaise au client, même si celui-ci a mauvais goût", etc... ad libitum.


Un petit mot pour les clients... et les autres

Je viens d'un monde où l'on privilégie dans l'ordre :

  1. La sécurité
  2. L'information
  3. L'efficacité / L'utisabilité
  4. L'économie des ressources
Ces 4 principes sont à l'origine de mon discours actuel, et le monde professionnel dans lequel j'évolue est celui dans lequel un médecin ou un enquêteur de l'OMS ou toute autre ONG doit pouvoir déterminer les besoins en sang ou antibiotiques ou plasma suite à l'afflux de blessés à l'hopital de Misrata par exemple, ou bien encore relever des témoignages, photos à l'appui suite à un massacre de plus au Soudan du sud...

Alors les discussions esthético-dev.facile ne me concernent pas vraiment dans le sens où ce sont des variables totalement subjectives et surtout dépendant de la mode (bootstrap par exemple).

Vous noterez que les opinions émises se concentrent sur 'comment faire sans ...'. En aucun cas ces concepteurs se demandent si leur façon d’aborder la mobilité est justifiée puisque pour eux, par définition le web c'est du web et qu'on a juste un problème de plus à régler à cause de la taille des écrans.

CROSS-BROWSER IS NOT CROSS-PLATFORM

Voilà quelque chose que les web-designers n'ont pas dut vraiment assimiler. Ce n'est pas vraiment de leur faute il est vrai. Beaucoup d'entre eux (et moi le premier) ont abordé le concept de mobile-site à partir d'un site web classique préexistant. Déjà, cette approche ne permet pas de véritablement prendre en compte la spécificité des usages mobiles, et ce traduit souvent par un appauvrissement sémantique sur la version mobile sans pour autant faciliter la consultation.
Par exemple, combien de sites d'information permettent de sauvegarder les nouveaux articles pour une consultation offline en cas de coupure réseau voulue ... ou pas? Combien de sites marchand permettent de conserver le panier sur le device et de reprendre ses achats le soir en rentrant à la maison alors qu'on ne s'est toujours pas identifié en tant que nouveau client?

Ainsi, que l'on parte d'un site web préexistant ou que l'on aborde une réalisation cross-browser (en considérant donc qu'un navigateur mobile n'est qu'une forme limitée des navigateurs classiques) on passe à coté de la spécificité de la navigation mobile.

Penser Mobile

Suite aux avis unanimes me demandant de proposer une alternative à JQUERY, je ne répondrait pas de façon manichéenne qu'il faut (faudrait) le remplacer par tel framework ou telle lib.js, parce que, comme je viens de l'expliquer ci-dessus le problème n'est pas en soit JQUERY ou Angular ou même Bootstrap, mais l'architecture.

Ma réponse ou plutôt mes réponses iront dans ce sens. Définir les besoins et contraintes liées à la mobilité, comment concevoir une webapp efficiente, un site-mobile réellement adapté à la mobilité, le tout avec des propositions de solutions techniques.

Ces éléments que j'apporterai au cours des articles suivant, enrichis de vos commentaires, nous permettront sans aucun doute de faire converger différentes solutions vers une véritable expérience de la mobilité.



lundi 4 août 2014

Web Mobile: devons nous abandonner JQUERY?

Pourquoi abandonner JQUERY?

Tout d'abord soyons bien clair: JQUERY n'est PAS un véritable framework, c'est tout au plus un ensemble de wrappers et de polyfills permettant 1) de simplifier l'écriture, 2) d'assurer la compatibilité du code entre les différents navigateurs (principalement Internet Explorer!!!).

Il est vrai que de nos jours, beaucoup de web-designers ont commencé leur apprentissage avec JQUERY, mais, à l'heure de HTML5 et du web mobile il est temps de mettre un terme à sont utilisation, d'une part parce que la compatibilité du code Javascript au sein des principaux navigateurs mobiles est déjà là (et ce ne sont pas les parts de marché marginales d'IE mobile qui m'intéressent ici), d'autre part parce que JQUERY est beaucoup trop LOURD et LENT!

JQUERY c'est lourd?

jquery.mobile-1.4.3.min.js    : 198Ko
jquery.mobile-1.4.3.min.css : 207Ko 

Soit 405Ko à télécharger (configuration par défaut), tout ça pour gérer du DOM ...

JQUERY c'est lent?

Oui! Très lent même!

Démonstration avec chrome mobile

ici on teste JQUERY vs querySelector en sélectionnant une classe CSS.

jQuery('.selectme').hide
17 552 Ops/s
document.querySelector('.selectme').style.display = 'none';
505 819 Ops/s

La version querySelector est environ 29 fois PLUS RAPIDE!


Et ce n'est guère mieux sur l'accès par un id ...

var d = $('#myId');
68 136 Ops/s
var d = document.getElementById('#myId');
1 281 515 Ops/s


La version native est environ 19  fois PLUS RAPIDE!

L'utilisation de JQUERY implique mécaniquement l'utilisation de 20 fois plus environ de cycles CPU soit une consommation 20 fois supérieures à ce que l'on pourrait obtenir en utilisant du JS  moderne et standard... et dans le monde des webapps et du mobile la problématique vitesse/consommation est un point très important.
 

Conclusion (provisoire)


Nous verrons dans les prochains articles comment concevoir des applis ou des sites mobiles légers et rapides en s'affranchissant des frameworks qu'affectionnent tant les webdesigners qui à mon avis n'ont plus leur place à l'heure du HTML5. Nous verrons aussi quelques techniques pour optimiser notre code.