Je cherche un framework pour PWA

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par ortolojf, 11 Septembre 2021.

  1. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 521
    J'aime reçus:
    28
    Bonjour

    Je cherche pour une PWA, un framework ultra léger.

    Vue.js pourrai-il convenir ?

    Merci beaucoup.
     
  2. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 521
    J'aime reçus:
    28
    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.
     
  3. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 521
    J'aime reçus:
    28
    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.
     
  4. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 854
    J'aime reçus:
    289
    Je crois que Angular est le plus utilisé, mais il n'y a pas de framework spécifique PWA.
     
  5. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 190
    J'aime reçus:
    333
  6. passion
    passion WRInaute accro
    Inscrit:
    6 Janvier 2006
    Messages:
    3 963
    J'aime reçus:
    190
    @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 ?
     
  7. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 190
    J'aime reçus:
    333
    @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.
     
  8. passion
    passion WRInaute accro
    Inscrit:
    6 Janvier 2006
    Messages:
    3 963
    J'aime reçus:
    190
    @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.
     
  9. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 190
    J'aime reçus:
    333
    @passion même Microsoft 365 viens d'arrêter le support de IE 11, Gmail ne supporte plus IE, ... quand on veux faire du SPA / PWA on s'en fou des vieux browsers PC.
     
  10. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 521
    J'aime reçus:
    28
    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. ;)
     
  11. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 521
    J'aime reçus:
    28
    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.
     
  12. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 521
    J'aime reçus:
    28
    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.
     
  13. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 521
    J'aime reçus:
    28
    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>
    
    
     
  14. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 190
    J'aime reçus:
    333
    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>
     
    #14 spout, 29 Septembre 2021
    Dernière édition: 29 Septembre 2021
  15. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 521
    J'aime reçus:
    28
    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>
    
    
    
     
    #15 ortolojf, 29 Septembre 2021
    Dernière édition: 29 Septembre 2021
  16. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 190
    J'aime reçus:
    333
    Réinventons la roue, à moi tout seul dans mon garage je suis plus fort que Evan You et la communauté.
     
    theunholy et cthierry aiment ça.
Chargement...
Similar Threads - cherche framework PWA Forum Date
Tout simplement à la recherche de conseils... Débuter en référencement 13 Novembre 2021
Volume recherche mots-clés Débuter en référencement 31 Octobre 2021
Impossible de décocher la case de demander aux moteurs de recherche Problèmes de référencement spécifiques à vos sites 29 Octobre 2021
Le moteur de recherche neeva.com demande de payer pour rechercher Autres moteurs de recherche connus 23 Août 2021
Recherche vocale de Google Développement d'un site Web ou d'une appli mobile 11 Août 2021
Cherche graphiste pour refonte de mon site. Demandes d'avis et de conseils sur vos sites 1 Juillet 2021
Search Console Problème de version de langue dans les résultats de recherche Google Référencement international (langues, pays) 17 Juin 2021
Cherche si extension navigateur existe Le café de WebRankInfo 3 Juin 2021
Optimiser les vidéos pour la recherche YouTube YouTube, Google Images et Google Maps 27 Avril 2021
Mots-clés longue traîne algorithme moteur de recherche Rédaction web et référencement 20 Avril 2021