Je cherche un framework pour PWA

ortolojf · 11 Septembre 2021

Bonjour

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

Vue.js pourrai-il convenir ?

Merci beaucoup.

ortolojf · 11 Septembre 2021

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.

ortolojf · 11 Septembre 2021

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.

rick38 · 12 Septembre 2021

Je crois que Angular est le plus utilisé, mais il n'y a pas de framework spécifique PWA.

spout · 12 Septembre 2021

Le top 3 : React, Vue.js, Angular.

React c'est le plus populaire, Vue.js plus facile à prendre en main.
Si t'as pas besoin de faire de "two-way data binding", les littéraux de gabarits sera la soluce la plus légère : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Template_literals

passion · 12 Septembre 2021

@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 ?

spout · 14 Septembre 2021

@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.

passion · 14 Septembre 2021

@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.

spout · 15 Septembre 2021

@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.

ortolojf · 18 Septembre 2021

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.

ortolojf · 27 Septembre 2021

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.

ortolojf · 27 Septembre 2021

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.

ortolojf · 28 Septembre 2021

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>

spout · 29 Septembre 2021

jQuery est totalement overkill ici ( https://usefulangle.com/post/143/pure-javascript-append )
De plus jQuery 1.7 il date de 2011

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>

ortolojf · 29 Septembre 2021

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>

spout · 2 Octobre 2021

Réinventons la roue, à moi tout seul dans mon garage je suis plus fort que Evan You et la communauté.