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 631
    J'aime reçus:
    37
    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 631
    J'aime reçus:
    37
    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 631
    J'aime reçus:
    37
    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:
    2 056
    J'aime reçus:
    363
    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 181
    J'aime reçus:
    351
  6. passion
    passion WRInaute accro
    Inscrit:
    6 Janvier 2006
    Messages:
    3 924
    J'aime reçus:
    191
    @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 181
    J'aime reçus:
    351
    @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 924
    J'aime reçus:
    191
    @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 181
    J'aime reçus:
    351
    @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 631
    J'aime reçus:
    37
    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 631
    J'aime reçus:
    37
    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 631
    J'aime reçus:
    37
    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 631
    J'aime reçus:
    37
    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 181
    J'aime reçus:
    351
    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 631
    J'aime reçus:
    37
    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 181
    J'aime reçus:
    351
    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
[Cherche] Framework JS+Ajax pour afficher des grilles/tableaux Développement d'un site Web ou d'une appli mobile 18 Janvier 2010
Ecriture d'une unité de mesure et ses variantes (espace) - Impact SEO et dans la recherche Débuter en référencement 9 Septembre 2022
Recherche Google images : mes photos disparaîssent Référencement Google 25 Août 2022
Référencement par la console google des urls avec attribut de recherche Crawl et indexation Google, sitemaps 22 Août 2022
Goggle remplace nos propres liens par les siens dans les résultats de recherche Référencement Google 6 Août 2022
Suppression de la recherche Google conformément au DMCA Référencement Google 20 Juillet 2022
Commande de recherche Google par langue ? Google : l'entreprise, les sites web, les services 10 Juin 2022
Google Keyword Planner: que signifie volume de recherche '0'? AdWords 31 Mars 2022
Comment apparaître dans le bloc "Rechercher des résultats sur" Techniques avancées de référencement 9 Février 2022
Moteur de recherche interne dans mon site Demandes d'avis et de conseils sur vos sites 4 Février 2022
Search Console Negative SEO - SPAM - Page de Recherche - RSS2 - Wordpress Problèmes de référencement spécifiques à vos sites 13 Janvier 2022
Site indexé mais introuvable avec termes de recherche spécifiques Problèmes de référencement spécifiques à vos sites 22 Décembre 2021
Ajout bouton recherche Google sur mon site : Impact SEO Demandes d'avis et de conseils sur vos sites 22 Décembre 2021
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