[TUTO] Application web dynamique

Proposer ou rechercher un tutoriel concernant le Raspberry Pi

Modérateur : Francois

Avatar du membre
cbalo
Raspinaute
Messages : 133
Enregistré le : sam. 24 août 2019 06:05
Contact :

Re: [TUTO] Application web dynamique

Message par cbalo » sam. 2 nov. 2019 23:09

Bonjour,
Très chouette le tuto, bravo.

Alors je pose la question puisque tu utilises node.js : les fonctions javascript exploitées côté client sont-elles compatibles avec la grande majorité des navigateurs actuels ou rencontres-tu des problèmes de compatibilité ?

utilisateur de javascript depuis longtemps, j'utilise ça avec des pincettes à cause des problème de compatibilité avec les navigateurs :
Lorsque je développe un service web, ce n'est pas pour moi. Et les utilisateurs ont toutes les configurations de navigateurs et OS imaginables (du vieil IE10 ou 11, beaucoup de Edge, pas mal de vieux Firefox, un peu d'ancien Safari, beaucoup de Chrome de toutes version et évidement du Vista, du Seven, du Eight, du Ten ,beaucoup de Mac, quelques Linux et beaucoup de téléphones et tablettes Android ou Apple).

En tout cas ça donne envie de s'y mettre.
cbalo :lol: 2 Raspi3 dont 1 sous Retro Pie, l'autre pour Emby, 1 Raspi2 pour les Dev, 7 Raspi Zero

Bud Spencer
Raspinaute
Messages : 645
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » dim. 3 nov. 2019 10:45

C’est clair que les problèmes de navigateur avec JavaScript, ça n’est pas un mythe. Ça remonte au temps de la guerre des navigateurs ou chaque éditeur tentait de s’imposer. Aujourd’hui, tout cela va beaucoup mieu et si on écrit du code client en respectant les normes et les bonnes pratiques cela fonctionne bien. Il faut toutefois rester relatif. Pas la peine par exemple d’essayer les codes de ce tuto sur un navigateur du siècle dernier. Il y a des technologies trop récente là-dedans qui n’existait pas à l’époque, donc forcément cela ne fonctionnera pas.

Après il faut bien faire la part des choses entre le code serveur et le code client. Si tu veux quelques choses de dynamique coté client sans qu’il soit dépendant de plugins, tu es obligé d’utiliser du javascript (*). Que tu fournisses tes pages avec un serveur NodeJs écrit en JS, avec un Apache et du PHP ou avec un IIS et du code en C# ou des cgi écris en ce que tu veux, finalement ce sera toujours le meme code qui sera exécuté coté client et s’il n’est pas conforme au navigateur cela ne fonctionnera pas plus avec l’un ou l’autre des serveurs. J’ajoute au risque de me répéter qu’il ne faut pas voir NodeJS seulement comme un serveur Web. Ça reste à la base une plateforme applicative orientée réseaux, ce qui veut dire que l’on peut utiliser n’importe quel protocole pour servir n’importe quel type d’application cliente qu’elle soit graphique ou pas et meme faire des applications non connectés.

(*) Il y a aujourd’hui d’autres technologies standardisées qui permettent d’exécuter du code coté client web qui ne soit pas du javascript en utilisant WebAssembly (wasm). C’est un nouveau standard qui permet aux navigateurs de compiler du bytecode donc, indépendant du langage de programmation. La plupart des navigateurs modernes supportent wasm et wasm supporte de plus en plus de langage. J’ai récemment fait quelques ‘amusements’ avec les applications Blazor C# de .Net Core 3 avec et sans liaison serveur ASP.NET et des tests en c++ compilé avec Emscripten et c’est plutôt très intéressant. On peut donc désormais écrire du code avec n’importe quel langage et le destiné à etre exécuter dans un navigateur, mais ça ne remplace pas JavaScript qui reste quasi incontournable.
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

Avatar du membre
cbalo
Raspinaute
Messages : 133
Enregistré le : sam. 24 août 2019 06:05
Contact :

Re: [TUTO] Application web dynamique

Message par cbalo » dim. 3 nov. 2019 22:59

On ne pas pas parler du siècle dernier : javascript en était à ses balbutiements (d'ailleurs difficiles).

J'ai des centaines d'exemples de problème de comptabilité de javascript avec des navigateurs sortis entre 2005 et 2013 et ce n'est pas le siècle dernier.
Récemment encore , avec safari 12 (la dernière c'est la version 13 non ?)
et même avec la dernière version de Firefox et celle de chrome ! Quand à IE : je l'ai rayé définitivement des cadres. Edge, heureusement est en cours d'abandon par microsoft ouf ! - enfin ils abandonnent leurs moteurs, ils vont utiliser celui de chrome !). Quand aux navigateurs embarqués pour tablette ou téléphone : au secours !

Pour résoudre ces problèmes je cantonne l'utilisation de javascript à des fonctionnalités dont je sais qu'elles sont 100% compatibles mais si j'ai besoin d'une nouvelle, je développe et je teste : perte de temps lorsque cela ne fonctionne pas sur un navigateur courant pour lequel mon appli doit-être supportée (et c'est courant).

Si tu connais une page web qui recense ce que tu appelles les "bonnes pratiques" (j'entends par la contrôler la compatibilité de l'application web dès son développement et non pas la subir) ça m'intéresse au plus au point.
cbalo :lol: 2 Raspi3 dont 1 sous Retro Pie, l'autre pour Emby, 1 Raspi2 pour les Dev, 7 Raspi Zero

john7864
Messages : 13
Enregistré le : ven. 1 nov. 2019 15:41

Re: [TUTO] Application web dynamique

Message par john7864 » lun. 4 nov. 2019 20:16

="Bud Spencer" post_id=32844 time=1572729431 user_id=3080]
Quel sont tes version de nodejs et de rpm ?

NodeJS et npm évolues sans cesse et forcement, tout doit suivre. Heureusement, il est possible de fixer les versions comme je l'ai expliquer à DTK juste un peu plus haut sur la meme page.
Bonjour

J'ai suivi les commandes données à DTK et ça fonctionne merci.
La leçon n°1 est terminée.
Par contre pour la n°2 j'ai bien installé socket .Io 2.30 de mémoire les sous-dossiers sont bien présents.Quand j’exécute ma leçon 2 voici ce qu'il m'indique comme erreur ;

pi@raspberrypi:~ $ sudo node myweb.js
module.js:471
throw err;
^

Error: Cannot find module 'express'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/home/pi/myweb.js:2:15)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
pi@raspberrypi:~ $

Il ne trouve pas express apparemment qui est pourtant bien présent : /home/pi/myweb/node_modules/express

Merci

Bud Spencer
Raspinaute
Messages : 645
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » lun. 4 nov. 2019 21:19

cbalo a écrit :
dim. 3 nov. 2019 22:59
J'ai des centaines d'exemples de problème de comptabilité de javascript avec des navigateurs sortis entre 2005 et 2013 et ce n'est pas le siècle dernier.
Quand je dis ‘siècle dernier, c’est une image. Si tu as des clients qui n’ont que des navigateurs qui date de 2005 ou meme de 2013, faut pas leur proposer d’applications web moderne. 99.9999…% des sites web de la planète utilisent massivement JavaScript et ça tourne très bien (et sans JavaScript, ils n’existeraient pas). Pour les 0,000…% qui reste, ce sont des sites complètement ringards qui se contentent d’html de base et de gif animés comme on le faisait dans les années 90 (il y en a encore …). Faut quand meme savoir que Javascript est de très loin le langage le plus exécuté dans le monde au quotidien, donc meme s'il est loin d'etre parfait, il est quand meme un peu utilisable. Toutes les applications destinées à des navigateurs de smartphones ou des tablettes utilisent obligatoirement du JavaScript. Sans ça elle n’aurrait aucun accès à aucun périphérique et elles seraient incapable de dialoguer avec des web services.

JavaScript est normalisé (EcmaScript). La dernière version de la norme se trouve là :
https://www.ecma-international.org/ecma ... index.html
Perso, quand je ‘bricole’ du JS et que j’ai un doute je regarde ici :
https://developer.mozilla.org/fr/docs/Web/JavaScript
ou ici :
https://www.w3schools.com/js/default.asp
Tous est définis aussi bien dans la norme que dans la prise en charge des navigateurs. Quand un code Javascript ne fonctionne pas, ce n’est pas le navigateur qu’il faut remettre en cause, mais celui qui a codé le coté client (comme pour chaque langage sur chaque système). Chaque technologie a des prérequis et tu ne feras pas tourner une technologie plus récente qu’un support si celui-ci n’a pas été mis à jour pour ça.
john7864 a écrit :
lun. 4 nov. 2019 20:16
Error: Cannot find module 'express'

Visiblement, il ne trouve pas express (ca, tu l'avais compris et c'est déjà un bon début ;) ). Bon faut dire que le début du tuto date de 3 ans et j’avais débuté avec une version 0.10 et un npm 1.4, donc forcément, depuis ça a évoluer puisque que l’on enest a la 12.xx pour NodeJs. Plutôt que de faire une nouvelle leçon, je vais prendre un peu de temps pour mettre tout ça à jour avec des versions d’aujourd’hui (et je suis prêt à parier ma belle-mère que je vais tout refaire fonctionner :mrgreen: ). En attendant, ne t’inquiètes pas, ce vieux Bud va t’aider à trouver ce qui coince :lol:

Si tu fais une commande :
npm ls express
depuis la racine de ton projet, ça donne quoi ?
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

john7864
Messages : 13
Enregistré le : ven. 1 nov. 2019 15:41

Re: [TUTO] Application web dynamique

Message par john7864 » lun. 4 nov. 2019 21:59

Si tu fais une commande :
npm ls express
depuis la racine de ton projet, ça donne quoi ?


pi@raspberrypi:~/myweb $ npm ls express
/home/pi/myweb
└── express@4.17.1 extraneous

npm ERR! extraneous: express@4.17.1 /home/pi/myweb/node_modules/express

Bud Spencer
Raspinaute
Messages : 645
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » mar. 5 nov. 2019 11:34

Ça c‘est parce qu’il y a confusion entre des package globaux et des packages locaux.
Essais de taper une commande
sudo n prune
Ça va supprimer les versions qui sont en cache.

Alors bien sûr, il y a eu énormément d’évolution de node et npm entre la première leçon du tuto et aujourd’hui et forcément c’est à prendre en compte si on veut utiliser d’autres version plus récente. J’avais préconisé une rétrogradation en node 6.xx a DKT pour qu’il puisse tester la leçon 6, mais à titre d’exemple pour montrer que l’on pouvait revenir à des versions antérieures pour assurer le fonctionnement d’un vieux projet, mais ce n’est pas forcément une bonne idée.

Ce que je vous conseil plutôt, c’est d’utiliser systématiquement les dernières versions de Node et de npm et de prendre les codes de vielles version à titre d’exemple seulement et de les adapter si besoin. Il faut aussi prendre en compte que dans les premières leçons, j’avais passé sous silence l’utilité de npm init parce que le but était de présenter des exemples d’utilisation, mais pas de faire un cours sur nodejs et npm et tout le reste. Avec les versions plus récentes et en cumulant les packages, ça peut vite poser problème (comme ici), donc pour débuter un nouveau projet proprement, il faut commencer par ça (voir explication pour la création du projet datalogger en page 8 à la fin du baratin ou j’explique comment je vais accéder au mcp3208).

Pour si tu veux revenir à la dernière version de node et de npm (conseillé), tu devrais pouvoir faire avec cette suite de commande
sudo n lts
sudo n prune
Et tu contrôles ensuite tes versions.

lts installe la dernière version Long Time Support (conseillé , nodejs 12.13.0 à aujourd'hui. c'est celle que je vais utiliser pour mettre a jour les codes)
latest installe l dernière version (s'assurer que les packages que l'on va utiliser son bien pris en charge nodejs 13.0.1 à aujourd'hui)


La bonne nouvelle, c’est que ça va aussi me permettre de répondre beaucoup plus facilement et de mettre à jours les codes du tuto sans avoir à basculer chaque fois entre différentes versions et recharger des packages obsolètes sur mon PI dressé pour utiliser les toutes dernières technologies du futur de demain :mrgreen: .
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

john7864
Messages : 13
Enregistré le : ven. 1 nov. 2019 15:41

Re: [TUTO] Application web dynamique

Message par john7864 » mar. 5 nov. 2019 12:06

Ok se devient compliqué pour moi :oops:
Par-contre express est installé maintenant et j'obtiens comme erreur :

pi@raspberrypi:~ $ sudo node myweb.js
/home/pi/node_modules/ws/lib/websocket.js:347
...options
^^^
SyntaxError: Unexpected token ...
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/home/pi/node_modules/ws/index.js:3:19)

john7864
Messages : 13
Enregistré le : ven. 1 nov. 2019 15:41

Re: [TUTO] Application web dynamique

Message par john7864 » mar. 5 nov. 2019 13:19

Voila on y est arriver ça fonctionne merci à toi pour ton aide précieuse :D :D

Bud Spencer
Raspinaute
Messages : 645
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » mar. 5 nov. 2019 16:35

Parfait :)

Les zip des leçons 1,2,3, 4 et 5 ont été mis a jours.
Je vais continuer pour les autres
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

Répondre

Retourner vers « Tutoriels »