Discussion :

[st3ff]

Bonjour,
Je me présente, Stéphane, développeur amateur, j'ai quelques connaissances en Java (pour Android), en CSharp/XAML, mais je code principalement en Python des petits outils et scripts.
Pour les besoins d'un logiciel afin de gérer mes contrats d'interim, je me suis tourné vers HTML5/CSS3/Javascript, parce que c'est ce qui me semblait le mieux et aussi par curiosité. Après quelques essais, j'ai commencé à rechercher des bibliothèques pour me simplifier la vie, et principalement, pour le data-binding (en fait, je trouvais que les "getElementById" prenaient un peu trop de place dans mon code…).
JQuery: UI, organisation, j'ai beaucoup aimé, mais niveau code, $("mon_id") ou getElementById, ça ne réglais pas le problème
AngularJS: j’ai rien compris à cette bibliothèque… Elle doit faire des trucs formidables, mais j'ai rien compris...
Knockout: plus évidente, mais trop de code javascript en plus, et puis un seul binding par élément ?!
Comme amateur (donc pas de limite de temps et envie de connaître mieux javascript) je me suis fait ma propre lib: fear the walking web:
déclarative: les bindings se déclarent dans le code HTML, ainsi que les presenters/templates pour l'affichage des objets/tableaux
multi binding :chaque attribut/propriété d'un tag HTML/objet HTMLElement peut recevoir un binding, et on peut en mettre plusieurs par élément HTML.
limite la modification des codes métiers: On doit juste créer un contexte de données (un objet javascript normal).

téléchargement: fear-the-walking-web

Description de l'archive:
ftw2.7z > fear-the-walking-web-flesh-and-bones.js: le fichier javascript à inclure dans votre page HTML.
ftw2.7z > docs > FearthewalkingwebDocsDemos.pdf: documentation + un exemple d'utilisation dans une application complète.
ftw2.7z > docs > exemples: les exemples de la documentation
ftw2.7z > docs > wows:l'application développée dans la documentation pour visualiser les cours de bourse d'une action.

ftw2.7z > pandemie: après avoir montré mon code à un ami, il m'a demandé si je comptais en faire un plugin JQuery. D'après ce que j'en ai compris, JQuery simplifie la manipulation du DOM, et ils ont construit un framework dessus (avec plein d'autres choses, ok…), alors que FTW2 permet au développeur de ne plus manipuler le DOM.
Comme amateur (donc le temps de prendre des décisions débiles), j'en suis arrivé à la conclusion qu'il serait plus logique(?!) de créer un framework complet basé sur le data binding! Ce n'est pour l'instant que quelques idées sur le fonctionnement, rien de bien concret encore.


Je suis très content de faire ma première release (comme disent les pros), actuellement en version 0.3, et de la poster sur DVP, (depuis le temps que je fréquente ce forum, enfin je peux lui rendre quelque chose!)

TODO:
améliorer les requêtes XPATH: souvent (toujours?) les bindings ne fonctionnent pas simplement parce que le xpath est mal fait (les caractères spéciaux dans les fallbacks par exemple)
optimiser le code: en temps d'exécution et en consommation mémoire
quelques fonctionnalités en plus auxquelles j'ai pensé en écrivant la documentation (binding direct sur webservice…)


que pensez vous de son utilisation?
que pensez vous de la documentation? Est elle assez claire?

Merci à tous pour le temps passé à essayer mon bout de code et pour vos retours.

[fozzeuh]

Salut, ça serait cool si au lieu de télécharger tes fichiers on pouvait les voirs sur github.

Cordialement,

[st3ff]

euh, oui, je vais voir comment faire ça ce soir. Merci
Bon, je suis officiellement en retard au travail, mais c'était moins compliqué que je pensais: github.com fear-the-walking-web

[st3ff]

Bonjour, juste une petite mise à jour après m’être aperçu que l'application d'exemple bug avec le navigateur EDGE. Pour infos, les éléments SVG avec EDGE n'ont pas de propriété "children", uniquement le "childNodes" renvoyant tous les nodes enfants (dont les EmptyTextElement). Opera, Chrome, Firefox n'ont pas se problème.
Merci

[st3ff]

Bonjour,
après une lecture très intéressante sur les closures en javascript, j'ai modifié le code de façon à ne plus créer de fonctions dans des fonctions (pour avoir accès à des variables), gérer un peu mieux les prototypes, faire un peu le ménage dans les propriétés des objets... Je trouve ça plus clair du coup!
Demain, je m'attaque aux XPATH...

[st3ff]

Bonjour,
Encore un petit commit sur github (version 0.5) pour permettre de passer à un binding une url d'un service web, et lui fournir des paramètres. J'ai mis a jour la doc (ça se trouve a la fin de la partie sur le binding d'objet) et ajouter un exemple (docs/exemples/webservice.html) pour montrer comment on s'en sert.
Dès que j'ai le temps, je referais l'application d'exemple (wows) en utilisant ce type de binding.
Merci

[st3ff]

Bonjour à tous
j'ai apporté quelques modifications internes à FTW2, et j'aimerais bien votre avis sur certaines:

- model binding: mise en place d'un recyclage pour les éléments html et les bindings en fonctions des data-types, pour maîtriser un peu mieux l'utilisation de la mémoire. Je sais pas si c'est une bonne idée de vouloir "gérer" la mémoire moi-même, ou si le navigateur et la VM ne préfèrent pas se charger de ça. Le recyclage, c'est un truc que je fais souvent en python, et qui est la plus part du temps conseillé, mais en javascript?

- en m'inspirant de la bibliothèque fastdom.js, j'ai déplacé les modifications du DOM dans un pool et utilisé les requestAnimationFrame pour les mises à jours.

Cette partie me pose un peu problème: en utilisant le profileur 'timeline', j'ai l'impression que la 1ere frame d'animation est appelée immédiatement (mais c'est peut être le comportement normal? Dans ce cas, il faudrait 'sauter' la 1ere frame pour faire un rendu sans mise à jour, puis commencer les modifs à partir de la seconde).
En plus, j'utilise un timer pour limiter les modifications DOM à 10ms, (auquel il faut ensuite ajouter le temps pour le layout et le paint), mais régulièrement, j'ai des frames marquées "Jank" (trop longue), ou bien le code a exécuter au début de RAF s'exécute en milieu de frame… (J'ai laissé le fichier de test dans les sources -src/utils/test_dom_batch.html-, si vous voulez voir de quoi je parle.) Bref ou j'ai rien compris au RAF, ou mon code a un gros problème que je ne vois pas.

Merci à tous