Je cherche un framework pour PWA

WRInaute accro
Finalement...

Il me semble que ce qui permet la représentation structurée de pages web de type fixe/variables, serait le data-binding.

Le reste englobant ( structures des accès aux pages web ), serait statique.

Donc, à part Mustache ( trop lourd je crois ), et la page de Polymer est en maintenance, quel code Javascript de data-binding ?

Merci beaucoup de vos aides et conseils.
 
WRInaute accro
Pardon

Le problème semble être de mapper du DOM <=> JSON.

DOMParser() et JSON.Parse() sembleraient convenir.

Problème à résoudre : fusionner/parcourir le DOM, et le remplir avec le contenus variables du JSON.

Quels liens entre le JSON et le DOM, pour fiabiliser la fusion ?

Problème de syntaxe du JSON, et de fiabilités syntaxique du DOM/HTML ?

Merci beaucoup de votre aide.
 
WRInaute accro
@spout
j'avais mis de côté les PWA à cause de leur prob de compatibilité.
Qu'en est-il maintenant ?
Est-ce que c'est framework donne une parfaite lecture sur tous les navigateurs et devices ?
 
WRInaute accro
@passion sur les navigateurs récents oui, pour les détails voir leurs docs respective.
Quand tu vois que les grosses sociétés laissent tomber le support des anciens navigateurs, je pense qu'il ne faut pas se priver.
 
WRInaute accro
@spout
Merci pour ces infos mais pour les grosses sociétés, euh je n'ai pas le même écho dans celle où je suis.
Elle fait + de 3 milliards de CA et pourtant nous sommes sur firefox 83 alors que l'officielle 92 :(
IE n'en parlons pas !
Et ce n'est pas prêt de changer.
 
WRInaute accro
En fait...

Plutôt que de mapper de manière bijective JSON => HTML, le problème serait surtout le remplissage d'une UI de façon automatique.

Plutôt un problème Modèle/Vue/Contrôleur ou MVC.

La lecture ( simultanée ) des deux fichiers json et html est déjà faite ( avec Fetch et/ou XMLHttpRequest ).

J'ai déjà une Queue ( et une Stack ), et un arbre n-aire avec parcours en level order et en preorder.

Je vais regarder comment implémenter un MVC en Javascript.

Merci à tous, à demain. ;)
 
WRInaute accro
Arf, arf...

J'ai enfin réussi à faire une lecture de petite feuille JSON/écriture et affichage du DOM correspondant.

Pour faire cette UI ( remplissage/formatage automatique ), j'ai besoin d'une syntaxe HTML polyvalente, me permettant d'identifier les zones à remplir, zones pouvant éventuellement être répétées, par exemple dans une liste : <ul> [ <li> zone </li> ]+ </ul>, etc...

Donc des déclarations de zones mobiles avec structuration fixes parfois.

L'intérêt que je vois à faire celà, c'est seulement l'économie en chargements de pages.

L'autre option, probablement moins rapide, serait de télécharger le html directement.

A votre avis, quelle est la meilleure option ?

Je compte faire tout "from scratch".

Merci beaucoup de votre aide.

Amicalement.
 
WRInaute accro
Pardon

La syntaxe de Mustache çà devrait aller.

Mais quid des boucles imbriquées ?

La syntaxe :

{{#persons}}
{{person}}
{{/persons}}

Il n'y a que des boucles à un seul indice ?

Dans mon cas, des listes de Réunions imbriquées avec des listes de Courses, pas possible.

Que faire ?

Merci beaucoup.
 
WRInaute accro
Pardon, pardon

Voici la solution :

HTML:
<!DOCTYPE html>
<head>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.3.0/mustache.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>
    $(function() {
          var tpl = $('#fam').html();
          data = {
                "families" : [
                      {
                            "surname": "Jones",
                            "members": [
                                  {"given": "Jim"},
                                  {"given": "John"},
                                  {"given": "Jill"}
                                ]
                          },
                      {
                            "surname": "Smith",
                            "members": [
                                  {"given": "Steve"},
                                  {"given": "Sally"}
                                ]
                          }
                    ]
              },
            html = Mustache.to_html(tpl, data);
          $("#main").append(html);
        });
  </script>
</head>
<div id="main"></div>
<script type="template/text" id="fam">
  <ul>
    {{#families}}
    <li>{{surname}}
      <ul>
        {{#members}}
        <li>{{given}}</li>
        {{/members}}
      </ul>
    </li>
    {{/families}}
  </ul>
</script>
 
WRInaute accro
jQuery est totalement overkill ici ( https://usefulangle.com/post/143/pure-javascript-append )
De plus jQuery 1.7 il date de 2011 o_O

Avec Vue.js 3 ça donnerais :

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="family in families">
                {{ family.surname }}
                <ul>
                    <li v-for="member in family.members">
                        {{ member.given }}
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const App = {
            data() {
                return {
                    "families": [
                        {
                            "surname": "Jones",
                            "members": [
                                { "given": "Jim" },
                                { "given": "John" },
                                { "given": "Jill" }
                            ]
                        },
                        {
                            "surname": "Smith",
                            "members": [
                                { "given": "Steve" },
                                { "given": "Sally" }
                            ]
                        }
                    ]
                }
            }
        }
        Vue.createApp(App).mount('#app')
    </script>
</body>
</html>
 
Dernière édition:
WRInaute accro
En fait...

J'envisage de faire un moteur de template à peu près comme Mustache, éventuellement syntaxe légèrement différente, pour ne pas avoir de problèmes de copyright.

Genre :

HTML:
<htmL>
  <head>
  (function() {
          /***************************/
          /**   Classe de gestion   **/
          /**   de template JSON:  **/
          /**     templateJSON    **/
          /***************************/
          /**       Méthodes :      **/
          /***************************/
          /**   1) Traduction       **/
          /**   du template html    **/
          /** vers le format JSON   **/
          /**   html(id_template),  **/
          /***************************/
          /**   2) Génération       **/
          /**   du DOM à partir     **/
          /** du JSON et des data   **/
          /** to_dom(tpl, data)     **/
          /***************************/
          /**   3) Identificateur   **/
          /**       id(html_id)     **/
          /***************************/
          /**   4) Ajout du html    **/
          /** à l'identificateur.   **/
          /**     append(html)      **/
          /***************************/
          var tplJSON = new templateJSON();
          /*****************************/
          /**  #id_template = ID du template  **/
          /**     Cette fonction      **/
          /**   génère le format      **/
          /**   JSON,qui sera mappé   **/
          /** et rempli par les data  **/
          /*****************************/
          var tpl = tplJSON.html('#id_template');
          data = {
                "families" : [
                      {
                            "surname": "Jones",
                            "members": [
                                  {"given": "Jim"},
                                  {"given": "John"},
                                  {"given": "Jill"}
                                ]
                          },
                      {
                            "surname": "Smith",
                            "members": [
                                  {"given": "Steve"},
                                  {"given": "Sally"}
                                ]
                          }
                    ]
              },
      
            /***************************/
            /**     Cette fonction    **/
            /**     génère le DOM     **/
            /**   à partir du JSON    **/
            /**    et des data.    **/
            /***************************/
            html = tplJSON.to_dom(tpl, data);
          /************************/
          /** #html_id = ID du HTML **/
          /************************/
            html = tplJSON.id('html_id').append(html);
        });
  </script>
</head>
<div id="html_id"></div>
<script type="template/text" id="id_template">
  <ul>
    {{#families}}
    <li>{{surname}}
      <ul>
        {{#members}}
        <li>{{given}}</li>
        {{/members}}
      </ul>
    </li>
    {{/families}}
  </ul>
</script>
 
Dernière édition:
Discussions similaires
Haut