[Article] Fly.js, présentation d'une nouvelle bibliothèque JavaScript

Fly.js
présentation d'une nouvelle bibliothèque JavaScript.

Bonjour, je suis Gabriel Juchault, bachelier de 17 ans et demi. Je suis développeur en plusieurs langages, dont le JavaScript.

Origine

J'ai créé ce framework JavaScript pour proposer une alternative rapide et fiable aux principaux existants, comme jQuery et MooTools, auxquels on reprochait soit de déformer le langage, d'étendre les objets natifs, ou encore d'être trop lourds, ou incompréhensibles à la lecture.
J'ai donc décidé de développer mon propre framework, Fly.js.

Le projet

Fly.js est donc un framework javascript léger (±70 Ko non compressé, ±45 Ko compressé, ±16 Ko compressé et gzippé). Il dispose de nombreux "modules" :

• Core : fonctions internes (mais qui peuvent être utiles aux développeurs), tels que merge, isFunction ou encore trim
• Selector : utilisation de Sizzle, à moins que le navigateur possède la fonctionnalité querySelectorAll
• Parseur XML compatible tous navigateurs (cross-browser)
• Intégration de la librairie JSON3 (et pas JSON2 qui utilise des équivalents de eval), si le JSON n'est pas proposé par le navigateur, toujours pour garder l'utilisation cross-browser.
• Le module Ajax qui propose une fonction unique et simple, pour permettre aux développeurs de faire leur requêtes Ajax, le plus simplement possible
• Browser : limité en nombre de navigateurs et de moteurs (webkit, opera, ie, chrome, safari, firefox, gecko); il est capable de déterminer le moteur, la version et le navigateur dans la liste ci-dessus). Il ne vaut pas une librairie complète de détection de fonctionnalités telle que modernizr
• Cookies : creation, lecture, suppression
• Manipulation du Dom et navigation dans ce dernier : environ 60 fonctions sont disponnibles pour pouvoir modifier le contenu html, s'y déplacer, ajouter des évennements ou les déclancher, etc. (liste des fonctions à la fin de la liste)
• Animation : fly.js supporte nativement les animations, sur tous les élements, il sait animer les propriétés avec les couleurs, et avec des fonctions spéciales appelées "easing": effets de saut, elastique, etc.

Liste des fonctions du module "Dom":

Citation:

---

add
addClass
after
append
appendTo
attr
before
bind
brothers
children
clone
content
css
each
empty
eq
filter
find
first
get
has
hasClass
height
hide
html
id
index
innerHeight
innerWidth
is
last
length
next
nextAll
nextUntil
not
offset
outerHTML
outerHeight
outerWidth
parent
parents
position
prepend
prependTo
previous
previousAll
previousUntil
remove
removeAttr
removeClass
replaceWith
scroll
show
slice
toArray
toSource
toString
toggleAttr
trigger
unbind
width

---

Liste des fonctions de flyjs.Dom().Fx() :

Citation:

---

animate
delay
hide
highlight
show
fadeIn
fadeOut
fadeTo
fadeToggle
slideUp
slideDown
slideToggle

---

Liste des effets :

Citation:

---

linear
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

---

Avancement
Le projet maintenant en beta, il y a de moins en moins de bugs, et il y a un petit problème de rapidité (si quelqu'un a des idées, je suis preneur). Il est actuellement en développement.

Objectifs
Le projet maintenant en beta, il y a de moins en moins de bugs, et il y a un petit problème de rapidité (si quelqu'un a des idées, je suis preneur). Il est actuellement en développement.

Originalité
Le projet se démarque par la diversité de ses fonctionnalités et dans le même temps par son chargement rapide, et sa petite taille (3 fois plus petit que jQuery, et moins de 5 millisecondes pour le charger contre 20 pour jQuery). Il est de plus très facile "à lire", à comprendre, et donc à améliorer !
Il ne se veut pas comme un nouveau langage, il ne touche pas à un autre objet que "flyjs", sauf à ajouter un $ à window.
Ce framework est néanmoins plus long sur les fonctions (en moyenne 20% par rapport à jQuery).

:fleche: Site Web : https://github.com/Extaze/fly.js/
:fleche: Doc (en cours de création) : http://extaze.github.com/fly.js

Merci de m'avoir lu, de me poser toutes les questions, ou encore de me proposer certaines choses !

je n'ai pas trouvé comment joindre l'auteur :-/

C'est Extaze, le créateur de la discussion. ;)

Citation:

---

Envoyé par vermine

C'est Extaze, le créateur de la discussion. ;)

---

XD merci vermine , pourquoi faire simple quand on peut faire compliqué ^^

Je trouve le terme de framework usurpé. ça me semble être une lib comme beaucoup d'autres

de plus juste en survolant, j'ai trouvé quelques hétérogénéités
par exemple fly.parseXMV(....) mais $("div")


je ne trouve pas d'originalité dans la lib rien qui ne la distingue des autres
par exemple
extjs core 3 fait 86 ko
Jquery n'est pas plus grosse (sans les plugins tout comme fly sans extensions)
...

extjs 4 est un framwork non seulement il offre une lib mais il défini aussi un Cadre de travail (framework) mettant en oeuvre divers design patterns (observer, mvc, etc.)
contrairement à ext3 qui existe en version core et version complète ext4 n'est livré que complète mais dans la livraison le fichier ext-core.js est présent.

bref la si je salut le travail je ne suis pas sur de la pérénité. je pense que pour qu'une nouvelle lib ou un nouveau framwok puisse se faire une place il doit proposer quelque chose de différent. quelque chose qui fait que ça vaille le coup de s'y invertir. sans ça à quoi bon.

A+JYT

Bonjour,

En effet, le terme de framework n'est pas le bon, je ne l'avais pas remarqué, je doute pouvoir éditer mon post, tant pis :/

Je n'ai pas compris ce que tu voulais dire par "hétérogénéité", le fait que l'on puisse et appeler "flyjs.xxx" et aussi faire flyjs.$ ?
flyjs.$ est un raccourci pour flyjs.Dom, et il est surtout présent pour ensuite passer sur window.$, correspondant à un simple getElementById. Bref je ne comprend pas, pourrais-tu réexpliquer ?

Si tu ne trouves pas d'originalité, va donc regarder le code source. Environ 15 ko minifié et gzippé, ce qui fait deux/trois fois moins lourd que jQuery. Et surtout, fly.js est lisible, simple à comprendre, à modifier. N'importe quel débutant peut comprendre la structure s'il sait ce qu'est un objet. Il ne pourra pas en faire autant sur jQuery.
Extjs ? Payant (sauf pour projets open source; fly.js sera sur une licence bien plus laxiste), en partie orientée sur l'UI, rien à voir avec jQuery ou fly.js. Je ne vois pas ce qu'il fait ans le post.
Fly.js n'apporte pas grand chose de nouveau, c'est vrai, mais ce n'est pas son but d'innover avec de nouvelles choses. Son but, c'est de proposer une alternative peut être moins garnie en fonctionnalités, plus rapide à charger (environ 8 à 10 fois plus rapide que jQuery), et facile à étendre, comprendre.
Je ne cherche pas à ce que fly.js soit utilisé par tous; je voulais juste proposer une alternative, que j'utiliserais personnellement, et libre à chacun de l'utiliser ou de l'ignorer complètement.

Merci de ton attention

Code:

---

1 2	var div = $("div"); $("a").append(". Some text !");

---

je n'ai pas tout lu dans la doc mais cette ecriture là n'est pas dans le même esprit que la syntaxe que tu propose pour ajax
dans ajax tu propose une methode qui prends un objet chaque membre spécifiant une partit de l'échange
dans dom tu adopte une fonction globale (why not) et un chainage de méthodes.
je ne trouve pas ça très homogène.

quant à extjs je parlait d'ext-core qui est le noyau utilitaire qui est au coeur du framework
ext-core est une librairie offrant des facilité de base tout comme le coeur de JQuery ou fly.js
principalement manipulation du dom, methodes sur les tableau, les dates,ajax
bref que des éléments de base comme dans Fly.js

de façon générale la plus part des "grosses lib" s'appuient sur un noyau très petit qui peut être utilisé telquel. (sans charger le reste).

je pense que pour que fly.js passe le cap du simple veux et de la belle démo il lui faudra propablement un petit plus qui ferra que le développeur s'y interresse ce n'est pas une critique de la qualité du travail ni de la lib, mais d'un constat sur l'écosystème dans la quelle elle va devoir faire sa place.

A+JYT

Salut, en effet je varie les techniques pour les paramètres : ajax peut prendre une petite dizaine de paramètres, si je le mettais en "global" comme tu dis (en gros flyjs.ajax(url, type, data, etc.); que faire si la personne désire mettre uniquement tel ou tel argument ? L'avantage de l'objet comme unique argument est de "fusionner" les options par défaut avec l'object passé.
Pour les fonctions du Dom, rares sont celles qui requiert plus de 3 arguments, alors pourquoi s’embêter avec des objects pour trois arguments ?
C'est là toute la question, je considère que > 3 arguments, on peut passer en object, en dessous, c'est rarement nécessaire.

Au risque de me répéter, il ne faut pas dire "qu'à fly.js de plus", mais plutôt "qu'à fly.js de moins" : pas de superflu, de fonctions identiques, de fonctions rarement utilisées, pas de code compliqué. Bref fly.js est une librairie LÉGÈRE. C'est ça qu'elle a de plus.
Après si tu as d'autres idées quant à l'amélioration, un "truc qui serait là en plus", je suis preneur !

Je suis assez d'accord avec sekaijin, ta librairie n'apporte pas grand chose de nouveau, et la compétition est déjà féroce dans le domaine. Mais ca reste un projet qui peux être très enrichissent.

J'ai regardé le script, et je te propose quelques optimisations

La fonction color est mal construire, plus généralement, quand une fonction à besoin d’appeler d'autres procédures qui lui sont propre le mieux est de créer un nouveau scope. Déclarer des fonctions dans une fonctions (autre celle qui sert au scope) peut poser des problèmes de performance, surtout sur les vieux navigateurs. Le remarque est valable pas que pour les fonctions en faite, mais plus globalement aux constantes (dans color l'objet dico des couleurs), et aux variable partagé par les procédures (toujours dans color, les fonctions spécifique de transformation pourraient partager en commun les variables r,g,b,a par exemple).

Un petit exemple

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

color : (function(){   var r,g,b,a; var simple_colors = {};   function hslToRgb(){/*...*/}   return function color(){//pas de fonction anonyme, pour le debugage, et aussi pour eviter de passer le namespace lors de l'invocation   a=null;//pas tjrs d'alpha //appel les procédure privé si besoin qui init r,g,b,a return {r:r,g:g,b:b,a:a}; }   })()

---

Toujours dans color, l'utilisation de simple_color est mauvaise. D'une la boucle n'a pas besoin de tester hasOwnProperty. C'est un objet simple hérité de Object, donc sans prototype public si on peux dire. De deux, et c'est le plus important, la boucle n'est pas nécessaire, autant utiliser l'algo de recherche du navigateur bien plus performant en testant direct l’existence de la propriété dans l'objet via un ( if(color_string.toLowerCase() in simple_colors) ... =

Encore dans color, color_defs et la boucle qui s'en suit n'apporte aucune automatisation. La procédure à effectué (teste du type et récupération des données) est statique, elle ne bougera jamais, donc autant écrire les choses sans passer par une boucle non? De plus la boucle n'est pas "breaker".

Toujours dans color, tu renvoies false, quand un paramètre d'une fonction n'est pas bon. C'est pas super en faite, même si c'est déjà moins important que le point du dessus, il faut, en principe, essayer de renvoyer toujours un même type. C'est une conception hérité des langage typé fort. Ca n'est pas nécessaire en js, mais ca permet d'avoir un code plus logique, et aussi permet une meilleurs compilation jit du navigateur et donc de meilleurs perf. Dans ton cas tu as deux options, soit renvoyer null, ou déclencher une erreur.

La fonction inArray, peux être optimisé en testant avant son initialisation l'existence de indexOf. Ca evite de faire le teste à chaque fois!

Code:

---

inArray: array.indexOf && flyjs.isFunction(array.indexOf) ? function inArray(){} : function inArray(){};

---

Mettre en variable car beaucoup utilisé, Object.prototype.toString

Un lien sympas pour trim

Faut éviter d'utiliser des fonctions d'itérations, comme each et autres. Niveau performance c'est très mauvais, et ça ne réduit pas grand chose sur la taille du code.

En tout cas, le code est bien écrit est facile à lire, ca semble assez bien structuré. Pour 17 piges, je trouve ça très prometteur, bravo, continue comme ca :ccool:

Salut, et déjà, merci de ton intérêt pour la librairie.

On m'a proposé d'implémenter quelque chose comme du mvc ou du mvvm, pour en faire un réel framework, peut-être ceci vous conviendra, je n'aime pas trop ce concept pour du javascript sur du html, mais, après tout, pourquoi pas; l'innovation n'est jamais mauvaise.

Pour la fonction color, je vais regarder tout ça de plus près ce soir je pense. Au passage, le hasOwnProperty n'a en effet aucune utilité (à part peut-être empêcher js*int de faire chier x) ). Pour ton in, j'ai fait un js perf, en effet, c'est largement plus rapide; merci !

Et puis merci de tes compliments !