L'essentiel de Zepto.js

Les librairies JavaScript modernes sont tout ce qu'il y a de mieux - jetez un coup d'œil à jQuery. Lorsque vous créez une application mobile ou que vous ciblez simplement les navigateurs modernes, une bibliothèque beaucoup plus svelte et agile devient une proposition plus savoureuse..

Aujourd'hui, nous allons examiner l'une de ces bibliothèques, nommée Zepto.


Le problème du mélange de bibliothèques de bureau et de périphériques mobiles

La montée en puissance des appareils mobiles est une chose qui a dépassé la plupart des radars.

Vous voyez, Internet et la technologie qui le fait fonctionner ont considérablement évolué au cours des dernières années. Nous sommes passés de sites statiques à des applications Web, puis à des applications Web dynamiques, puis à des applications hyper réactives en temps réel. La montée en puissance des appareils mobiles est une chose qui a dépassé la plupart des radars.

Pensez-y: beaucoup d’entre nous utilisent des téléphones intelligents et l’utilisent pour naviguer en permanence. Même à la maison, une partie non négligeable de mon entourage a adopté une tablette pour la navigation et le courrier électronique occasionnels. Bien que cet afflux d’appareils soit une bonne chose du point de vue de l’exposition, il ne manque pas de réserves..

Au lieu de considérer ces périphériques comme un affichage contraint comme le font les consommateurs, nous, en tant que développeurs, devons les concevoir en termes de ressources et de bande passante. Tous ne possèdent pas un processeur hyper quad gajillion Ghz ou viennent avec des tonnes de mémoire. Et ne commençons même pas avec la bande passante. Une grande partie de la population de navigation est toujours bloquée sur ces excuses infernales pour une connexion Internet mobile.

Je pense que vous voyez où je vais avec cela. Les grandes bibliothèques monolithiques telles que jQuery ou Prototype ont définitivement leur place, mais pour cette époque de la mobilité, je pense qu'il y a une place pour quelque chose de beaucoup plus agile. Et beaucoup de développeurs semblent être d'accord avec moi.


Tout le code pour faire fonctionner une bibliothèque à travers les navigateurs s'additionne

Un autre gros problème que je n'ai pas mentionné est que les bibliothèques contemporaines font lot des trucs de navigateur. En fait, jQuery a initialement attiré beaucoup d’attaques face à la bizarrerie des navigateurs, ce que les développeurs front-end devaient surmonter. Même maintenant, jQuery fait beaucoup de travail sous le capot pour s'assurer que rien ne casse dans les différents navigateurs..

Mais si vous êtes un développeur cherchant uniquement à prendre en charge des appareils contemporains, avez-vous vraiment besoin de tout cela, si j'ose dire, cruel? La réponse courte est non. En supprimant le code inutile, vous deux:

  • eke out plus de performance car il y a moins de lignes de code pour le navigateur à analyser et
  • réduisez la taille de votre fichier, ce qui contribue à réduire la bande passante des appareils mobiles.

Vous pensez que ce problème est exagéré? Voici un blob aléatoire de code provenant de la source de jQuery:

 isPlainObject: function (obj) // Doit être un objet. // A cause d'IE, nous devons également vérifier la présence de la propriété constructor. // Assurez-vous que les noeuds DOM et les objets de fenêtre ne passent pas, ainsi si (! Obj || jQuery.type (obj)! == "objet" || obj.nodeType || jQuery.isWindow (obj)) retour false; … 

Ou quelque chose d'un peu plus ésotérique:

 // Effectuez une vérification simple pour déterminer si le navigateur est capable de // convertir une liste de noeuds en un tableau à l'aide de méthodes intégrées. // Vérifie également que le tableau renvoyé contient des nœuds DOM // (ce qui n'est pas le cas dans le navigateur Blackberry) try Array.prototype.slice.call (document.documentElement.childNodes, 0) [0] .nodeType; // Fournit une méthode de secours si cela ne fonctionne pas catch (e) // Le repli prévu… 

Cela peut paraître assez trivial, mais gardez à l’esprit que cela a tendance à s’additionner. Si vous ne ciblez que les navigateurs modernes, que ce soit sur des ordinateurs de bureau ou sur des téléphones portables, il n’est pas vraiment nécessaire de procéder à toutes ces vérifications et hacks supplémentaires. En réduisant vos navigateurs prévus, vous gagnez à la fois en bande passante et en performances!


Alors, quel est le deal de Zepto?

Je vous entends dire: "Assez de travail! Parlez-nous de la bibliothèque de darn déjà!". Alors allons-y.

Zepto, comme le titre l’a gâté pour vous, est un mobile Cadre JavaScript corrigeant les deux problèmes mentionnés ci-dessus. Il a une base de code très petite et un poids de plume d'environ 8kb.

Il parvient à être si svelte en éliminant principalement les éléments inter-navigateurs. Lors de sa création, l'objectif principal était de prendre en charge Webkit uniquement. La version mobile de Webkit pour être exact. Maintenant, il a été étendu pour fonctionner avec les navigateurs de bureau aussi - mais seulement ceux modernes. Pas plus de klutzing autour pour faire fonctionner les choses cet IE6!

L'API de Zepto est compatible avec jQuery. Si vous utilisez jQuery, vous savez déjà comment utiliser Zepto.

Un autre domaine dans lequel Zepto parvient à être petit est la manière dont il parvient à éviter les fonctionnalités excessives. La bibliothèque principale ne semble inclure aucune fonctionnalité supplémentaire. Même les fonctionnalités d’AJAX et d’animation sont disponibles sous forme de modules séparés, le cas échéant. Pour les utilisateurs qui utilisent principalement des bibliothèques pour la traversée et la manipulation de DOM, c'est un envoi divin.

Et, oh, ai-je mentionné la pièce principale de Zepto? L'API de Zepto est compatible avec jQuery. Si vous utilisez jQuery, vous savez déjà comment utiliser Zepto.


Sont Zepto et jQuery interchangeables?

Oui et non. Depends est une réponse plus appropriée.

Oui, car l’API principale de Zepto imite jQuery dans une large mesure. Pour faciliter l’utilisation et réduire considérablement la courbe d’apprentissage, Zepto émule l’API de jQuery. La plupart des méthodes souvent utilisées, telles que la manipulation DOM, sont nommées de la même façon et ont les mêmes paramètres dans le même ordre. Les signatures de méthode sont les mêmes, pour les ingénieurs là-bas.

Regardons un petit exemple:

 $ ('# élément'). html ("Hé! Es-tu sur la version bêta de GW2?");

Vous semble familier? Cela devrait. C'est exactement le même code que vous utiliseriez avec jQuery pour changer le code HTML d'un élément. Comme je l'ai mentionné, cela ne se limite pas à cette méthode. La plupart des opérations DOM sont construites de la même manière avec vos utilitaires, comme AJAX..

D'un autre côté, l'API ne correspond pas à 100%. Zepto renonce à certaines méthodes présentes dans jQuery susceptibles de rompre votre code. Et tout aussi important, étant donné que Zepto est un sous-ensemble de jQuery, vous manquerez probablement de fonctionnalités spécifiques intégrées dans -- Différé est un bel exemple. Vous ne pouvez simplement pas échanger jQuery avec Zepto et vous attendre à ce que tout fonctionne.

Et pour moi, le plus gros obstacle réside dans les méthodes qui ont été copiées à partir de jQuery mais qui ont une signature et des fonctionnalités différentes. Cela devient un peu frustrant de penser que vous utilisez une méthode correctement mais que vous ne l'êtes pas. La capacité de la méthode clone à copier des gestionnaires d'événements est un bon exemple. Sans regarder la source, je ne l'aurais vraiment pas découvert.


Explorer l'API de base

Si vous avez déjà travaillé avec jQuery, tout ce qui suit doit être considéré comme une fête de répétition..

Assez bavardé, passons maintenant à du code. Comme dans beaucoup de bibliothèques modernes, la traversée et la manipulation de DOM sont une fonctionnalité essentielle que tout le monde veut perfectionner. Étant donné que l'API et les fonctionnalités globales sont très similaires à jQuery, je pense que vous pouvez supposer en toute sécurité que tout est de qualité supérieure..

Jetons un coup d'oeil à quelques fonctionnalités communes liées au DOM.

Modification du contenu HTML d'un conteneur

C’est l’essentiel des opérations DOM: lire ou modifier le contenu HTML d’un élément. Avec Zepto, c’est aussi simple que d’appeler le html méthode sur le conteneur, et en passant le nouveau code HTML, si nécessaire.

Par exemple, ceci obtient le code HTML d’un élément et le stocke dans une variable.

 var conteneurText = $ ('# élément'). html ();

Ou si vous voulez changer quelque chose:

 $ ('# élément'). html ("Hola there!");

Assez simple, droit?

Ajouter / ajouter un élément à un conteneur

Comme jQuery, Zepto utilise le ajouter et préposer méthodes. Et l'invocation reste la même.

 $ ('# élément'). append ("

C'est l'élément ajouté.

"); // ou $ ('# élément'). prepend ("

C'est l'élément ajouté.

");

Événements

Les événements sont la colonne vertébrale de toute application moderne et Zepto vous fournit un ensemble de méthodes faciles à utiliser pour mener à bien votre travail. Le gros du travail se fait par le biais de sur méthode.

 $ ('# élément'). sur ('cliquez', fonction (e) // Votre code ici);

Facile à lire et facile à analyser. Si vous vous sentez vieux et que vous avez envie d'utiliser lier, déléguer ou vivre les méthodes, ne pas. Comme avec jQuery, ils sont obsolètes ici.

AJAX

Toute bibliothèque de bas niveau moderne doit fournir un wrapper facile à utiliser autour d’AJAX et Zepto ne vous laissera pas tomber ici. Voici un exemple de requête AJAX super simple.

 $ .ajax (type: 'POST', url: '/ projet', données: nom: 'Super Volcano Lair', dataType: 'json', succès: function (data) // Faites de belles choses ici , erreur: fonction (xhr, type) alert ('YU NO WORK?'));

Les choses peuvent sembler un peu compliquées, mais ce que nous faisons peut se résumer à:

  • Création de l'objet AJAX et transmission des options.
  • Dans les options, spécifiez que nous souhaitons faire une demande POST. La valeur par défaut est GET, j'imagine.
  • Spécifiez l'URL à POST pour.
  • Spécifiez les données à envoyer au serveur. Comme vous pouvez le constater, je ris de façon maniaque et j'essaie de créer mon propre repaire de super méchants..
  • Spécifiez les méthodes qui seront déclenchées lorsque la demande aboutit ou échoue. De cette façon, nous pouvons mettre à jour l'interface utilisateur quoi qu'il arrive.

Comme avec jQuery, il existe une méthode distincte pour une requête GET ou POST ou pour charger simplement du contenu Web..

Animations

Que fera le monde sans quelques animations? Zepto expose le tout-puissant animer méthode qui devrait gérer plus de vos besoins en animation.

 $ ('# élément'). animate (opacité: 0.50, en haut: '30px', couleur: '# 656565', 0.5)

Nous sélectionnons essentiellement l'élément à animer, en invoquant le animer méthode et spécifiez les propriétés à animer ainsi que le temps qu’il faut pour terminer l’animation. Zepto fait le reste.

Ou si vous avez juste besoin d'afficher et de masquer un élément, la bascule devrait très bien fonctionner.

Je pense que vous comprenez bien le point ici: les API DOM, animation et événements de Zepto émulent dans une large mesure celles de jQuery. Et comme nous le savons tous, jQuery est sacrément bon avec ces choses. Si vous avez déjà travaillé avec jQuery, vous ne devriez pas avoir trop de problèmes ici..


Un regard sur les événements tactiles et autres subtilités

Zepto vous fournit quelques événements tactiles que vous pouvez exploiter dans vos applications. Ceux-ci inclus:

  • glisser -- Gère votre mouvement de balayage typique. Il existe également des événements distincts pour différentes directions, comme swipeLeft.
  • robinet -- Déclenché en réponse à une action de tap générique.
  • tapez deux fois -- Évidemment, cela gère les doubles robinets.
  • longtap -- Il est déclenché lorsqu'un élément est exploité pendant plus de 750 ms. Il ne semble pas y avoir de solution simple pour changer ce délai bien que.

Voici un exemple rapide, délicieusement extrait de la documentation de Zepto.

 
  • Élément de liste 1 EFFACER
  • Élément de liste 2 EFFACER

Lorsqu'un élément de la liste est balayé, le bouton de suppression de tous les autres éléments de la liste est masqué et seul celui en cours est affiché. Appuyez sur un bouton de suppression pour supprimer l'élément li de ce bouton à supprimer du DOM.

Cela devrait être assez similaire à la façon dont vous gérez généralement les événements, sauf que vous avez lié vos gestionnaires à différents événements, c’est tout..


Emballer

Considérant pour quoi et pour qui je développe, c'est parfait pour moi; mais comme toujours, votre kilométrage peut varier.

Eh bien, c'est à peu près tout ce qu'il y a pour Zepto. À la base, jQuery était censé être une version allégée et gratuite de jQuery pouvant être utilisée sur des appareils mobiles. Au fil du temps, il est devenu une bibliothèque allégée qui supprime la prise en charge des navigateurs archaïques..

Considérant pour quoi et pour qui je développe, c'est parfait pour moi; mais comme toujours, votre kilométrage peut varier. Vous pouvez être bloqué dans l’utilisation de plugins jQuery qui nécessitent des modifications non triviales pour que cela fonctionne sous Zepto ou simplement avoir plus confiance en jQuery.

Quoi qu'il en soit, vous devez vraiment essayer Zepto de voir comment cela s’intègre dans votre flux de travail avant de l’écrire. Je l'ai fait et j'adore!

Eh bien, c'est tout de moi aujourd'hui. Faites-moi savoir ce que vous pensez dans les commentaires ci-dessous et merci beaucoup d'avoir lu!