IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

  1. #1
    Membre régulier

    Inscrit en
    Avril 2011
    Messages
    6
    Détails du profil
    Informations forums :
    Inscription : Avril 2011
    Messages : 6
    Points : 88
    Points
    88
    Par défaut [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":
    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() :

    animate
    delay
    hide
    highlight
    show
    fadeIn
    fadeOut
    fadeTo
    fadeToggle
    slideUp
    slideDown
    slideToggle
    Liste des effets :
    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).

    Site Web : https://github.com/Extaze/fly.js/
    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 !

  2. #2
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    je n'ai pas trouvé comment joindre l'auteur :-/
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  3. #3
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    C'est Extaze, le créateur de la discussion.

  4. #4
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    Citation Envoyé par vermine Voir le message
    C'est Extaze, le créateur de la discussion.
    XD merci vermine , pourquoi faire simple quand on peut faire compliqué ^^
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  5. #5
    Expert éminent
    Avatar de sekaijin
    Homme Profil pro
    Urbaniste
    Inscrit en
    Juillet 2004
    Messages
    4 205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Urbaniste
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 4 205
    Points : 9 127
    Points
    9 127
    Par défaut
    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

  6. #6
    Membre régulier

    Inscrit en
    Avril 2011
    Messages
    6
    Détails du profil
    Informations forums :
    Inscription : Avril 2011
    Messages : 6
    Points : 88
    Points
    88
    Par défaut
    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

  7. #7
    Expert éminent
    Avatar de sekaijin
    Homme Profil pro
    Urbaniste
    Inscrit en
    Juillet 2004
    Messages
    4 205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Urbaniste
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 4 205
    Points : 9 127
    Points
    9 127
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  8. #8
    Membre régulier

    Inscrit en
    Avril 2011
    Messages
    6
    Détails du profil
    Informations forums :
    Inscription : Avril 2011
    Messages : 6
    Points : 88
    Points
    88
    Par défaut
    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 !

  9. #9
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2009
    Messages
    354
    Détails du profil
    Informations personnelles :
    Localisation : France, Sarthe (Pays de la Loire)

    Informations forums :
    Inscription : Février 2009
    Messages : 354
    Points : 491
    Points
    491
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  10. #10
    Membre régulier

    Inscrit en
    Avril 2011
    Messages
    6
    Détails du profil
    Informations forums :
    Inscription : Avril 2011
    Messages : 6
    Points : 88
    Points
    88
    Par défaut
    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 !

Discussions similaires

  1. Mantle : une nouvelle bibliothèque graphiques pour mieux contrôler le GPU
    Par LittleWhite dans le forum Développement 2D, 3D et Jeux
    Réponses: 5
    Dernier message: 15/11/2013, 11h51
  2. Réponses: 4
    Dernier message: 04/04/2012, 10h15
  3. Réponses: 323
    Dernier message: 11/06/2010, 20h23
  4. Utilisation d'une nouvelle bibliothèque (cygwin)
    Par hnouna2007 dans le forum Linux
    Réponses: 0
    Dernier message: 16/05/2009, 17h41

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo