Symfony ou Django ou [Flask] ? Angular/React/ [Vuejs 3] /Stimulus?

Dev
, , , ,
126

Sur notre projet on est en train d’envisager un passage de bootstrap à Tailwind. Je ne sais pas si vous connaissez ?

127

Alors, comme c’est pour un outils interne (gestion des poursuites d’étude en bac+2), je ne me suis pas posé beaucoup de question. Comme je suis seul a bosser dessus et que c’est du bénévolat, je suis libre de faire n’importe quoi :smiley: . J’ai fait am stram gram entre « les framework frontend les plus populaires » et c’est tombé sur Vuejs… Du coup, je ne peux répondre a beaucoup de tes questions.

J’utilise npm, et je commit/push/pull uniquement le dossier src et package.json de mon app. Aucun changement donc avec un projet classique.

Mon utilisation est assez basique et j’aurai pu le faire sans framework (mais ca aurait été moins formateur et moins intéressant) : je récupère les datas de mon backend, l’utilisateur fait des trucs avec et je les renvois. Pour ça, le cycle de vie des composants Vuejs ne sont pas prise de tête.

Les éléments d’interface sont rangé en modules et mes pages sont composées de ces modules.

Ce qui je trouve aberrant:

  • les nanomodules… et la gestion des dépendances. Il y a un module pour connaitre la taille d’une liste :crazy_face:
  • les changements de version tout les 3 jours et la facilité a tout casser entre deux versions.

(mais ca… je crois que ce n’est pas propre a vuejs).

Pas du tout, pour mon prochain projet :wink:

128

Jamais entendu parler, mais du coup les raison du switch m’intéressent.

129

17 messages ont été scindés en un nouveau sujet : CSS - Le topic des mecs qui ont la .class

130

(REPOST SUITE AU SPLIT DU SUJET)

Alors se craque les doigts .

Attention à ne pas confondre tout. Npm c’est un package manager, bower c’est déprécié depuis un bail (et son successeur gulp aussi), tandis que Webpack est un bundler (il regroupe des bouts de code en un ou plusieurs autres fichiers) qui peut gérer le html, le css et le JS mais il n’a pas de capacités de transpileur en lui-même. Le transpileur le plus connu c’est donc Babel, dont le taf est de compiler du JS récent en JS moins récent. Babel est le plus souvent utilisé par les autres projets de bundler.

Webpack est le plus connu des bundlers mais est cependant très complexe à utiliser et très usine à gaz. Il en existe d’autres que je trouve plus simples comme Parcel qui se veut tout en un (et compiler/transpile pas que du JS) ou Rollup qui lui ne bundle que le JS sans le transpiler.

Mon conseil si vous démarrez : regardez du côté de Parcel.

Après ces interrogations et lectures https://stimulusjs.org/ m’a l’air plus lisible, plus léger, et ne nécessitant pas forcément de transpilateur.

Depuis mon conseil j’ai fait plus de recherches et j’ai trouvé une ou deux choses qui pourraient t’aider ou te plaire: HTMX et Alpine .

Pour t’aider à comprendre la nuance entre les trois :

  1. Stimulus tu crées des petits contrôleurs en JS qui sont trigger via un attribut html. Tu dois donc tout de même créer ces fichiers JS mais ce qui est cool c’est que ton markup est ta source de vérité. L’exemple sur la page d’accueil est assez clair.
  2. HTMX ne te demande pas de créer de fichier JS. C’est une librairie qui te permet, via juste des attributs dans ton HTML, d’avoir accès à des requêtes AJax, des Websocket et de request des events server. Tu peux aussi trigger des events ailleurs que (par exemple) des boutons ou des liens, le tout sans jamais avoir besoin d’écrire du JS. Encore mieux : tu peux demander à ce que la zone/l’éément cliqué soit remplacée par le HTML que tu as demandé avec ta requête.

Exemple :

 <!-- have a button POST a click via AJAX -->
  <button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
  </button>

The hx-post and hx-swap attributes tell htmx: « When a user clicks on this button, issue an AJAX request to /clicked, and replace the entire button with the response »

  • Alpine est une librairie fonctionnelle comportant des actions récurrentes que l’on fait en Javascript. Son but est d’avoir du JS prêt à l’emploi pour des taches comme des modales, des tabs, ajouter un two-way binding façon angularjs, etc… C’est plus pour les connaisseurs.

SI vous voulez une liste de frameworks ou librairies alternatives à Vue/React/Angular allez jetez un oeil sur cette page où j’en ai liste pas mal.

131

Merci pour ces explications notamment sur webpack. :slight_smile:

Autant Stimulus m’intéresse, autant Alpine et Htmx je suis desarçonné par cette absence de ligne de code.

132

Deux articles intéressants.

Le premier est une interview du créateur de Vue.js, Evan You, où il explique son cheminement sur ce qu’il l’a amené à créer vue.js, mais aussi de comment il a pris ses décisions pour faire évoluer vue.js pas seulement d’un point de vue technique.

Le 2ème article est sur l’appellation du poste de « data scientist ».

133

Un article expliquant 3 architectures possibles pour intégrer Vuejs avec Flask

«05/06/2020, Testdriven.io, Jace Medlin, Combining Flask and Vue» :

In this post, we’ll take a look at three different methods for combining Flask and Vue:

  1. Jinja Template : Importing Vue into a Jinja template
  2. Single-Page Application : Building a Single-Page Application (SPA) to completely separate Flask and Vue
  3. Flask Blueprint : Serving up Vue from a Flask blueprint to partially separate the two
134

Je suis en train de chercher des solutions open source de visualisation et exploration interactives graphiques de données en Python + js. Exploration appelé en anglais drilldown.

J’ai écrit un mini moteur en R qui est utilisé depuis presque 3 ans, en fait un requêteur aggrégateur de données qui crée une requête consolidée en fonction des dimensions choisies. Mais il n’y a pas de mode d’exploration et pas l’interactvité entre un graphique et les données, et pas de gestion de graphique de toute façon. Et si c’est sympa de refaire la roue ça serait pratique qu’il y ait une solution déjà câblée et en open source.

J’ai trouvé http://www.cubesviewer.com/ qui se rapproche le plus de ce que je veux mais ce n’est plus maintenu depuis 2018 et il est sur une vieille version de Django.

J’ai vu cube.js, expliqué là Introducing a Drill Down Table API in Cube.js - Cube.js Blog , mais le côté serveur est en node.js, mais je voudrais quand même pas m’émarpiller sur trop de technos.

Il y a un certain nombre d’autre solutions mais le plus souvent en tableaux de bord, dashboard, or je veux pouvoir insérer les graphiques et tableaux notamment en embedded sans me traîner un dashboard.

L’idéal serait une solution comme cubeviewer tout en un, mais après si c’est une solution serveur Python avec une autre solution front ça ne me gêne pas.

J’ai vu https://datapane.com/ qui a l’air vraiment sympa: Python en fait génère de toute pièce un fichier Html autonome dynamique avec du js dedans. Mais il n’y a pas de lien « réactif » entre le rapport et les données. Une fois le rapport pondu il est totalement autonome, ce qui est très bien, mais il n’est plus alimentée en direct par les données, il contient les données.

J’ai vu atoti, https://www.atoti.io/, mais trop orienté dashboard et limité à un ou deux utilisateurs en version gratuite.

135

Est-ce que GraphQL est une piste à mon questionnement, à ma recherche de mon message précédent ?

Mais il a aussi des inconvénients : cache côté client, et complexification si j’en crois les commentaires du 3ème lien.

https://graphene-python.org/ : « GraphQL in Python Made Easy»

136

J’ai trouvé Bokeh qui a l’air pas mal. À creuser.

137

Je suis en train de faire un POC Flask avec Bokeh et Vue

:slight_smile:

  • avec un render_template() minimaliste
    • pointant sur un fichier html contenant
      • des div cibles réceptionnant des composants Bokeh (bokeh.plotting.figure()) émis par Flask grâce à bokek.embed.json_item()
      • des div contenant une architecture vue 3 (avec changement de délimiteur de vue en Array('[[,']]') , pour l’instant au niveau de chaque composant, pour ne pas marcher sur les plate-bandes des balises jinja2 de Flask)
  • et des sources de données côté serveur grâce à flask.jsonify()

Il faut maintenant:

  • que je fasse discuter tout cela ensemble (notamment Vue avec le js Bokeh, mais aussi les figures Bokeh entre elles)
  • que j’organise l’architecture fichiers et répertoires côté client et serveur car pour l’instant j’ai tout mis dans un même fichier htmtl et un même fichier python.

Je teste Vue grâce à vue3-sfc-loader fait par Franck Freiburger (de Strasbourg visiblement !)

Je garderais vue3-sfc-loader en prod s’il est robuste et s’il accepte bien les composants Vue qui existent à droite et à gauche. C’est très récent (v0.8.3), la version v0.1.0 date du 21 novembre 2020. Bon après tôt ou tard je devrais passer par npm et Parcel pour le côté client de Flask (contrairement à R Shiny où je voulais éviter cela car R Shiny a sa propre solution cliente en natif intégrée qui masque le js sauf les quelques adaptations js que j’avais fait).

138

J’ai mis du temps à comprendre l’intérêt de vuex: voici un article tutoriel qui l’explique très bien.

Et pendant que j’y suis sur le même site un autre article sur Flask + vue.

139

En dépit qu’il faille se coltiner les bizarreries des chemins et dépendances du répertoires node_modules de nodejs, et que nodejs n’ait pas de gestionnaires d’environnement comme conda ou pip (oui il y a nvm mais c’est par version et non par projet)(*) … putain je trouve que Vue 3 est vraiment pas mal du tout !!

:star_struck:

Et la conjonction de vue cli, npm run serve et npm run build permet de ne pas se farcir d’autres couches comme webpack puisque ça met en œuvre les mêmes fonctionnalités que ce dernier. En d’autres termes j’ai abandonné l’idée d’utiliser vue3-sfc-loader qui finalement obligeait à faire des acrobaties exceptés pour des petits POC. J’ai réussi à changer les delimiteurs pour Flask en Vue 3 là (lien S. O.) .

Sinon j’ai trouvé des tutos mieux fait pour mettre en œuvre Vue 3 avec Vuex et vue router . Ce n’est pas évident de trouver des bons tutos pour Vue 3 car cette version 3 est très récente : septembre 2020.

Édit,
PS: *= En fait j’ai finalement choisi d’installer nodejs par conda, conda install -c conda-forge nodejs, ça me permet d’avoir un environnement étanche en npm -g local à mon utilisateur, c’est-à-dire que ça ne risque pas de péter le serveur nodejs de R shiny-server, même si ça m’agace d’avoir en plus un répertoire node_modules propre à chaque projet, mais bon c’est leur philosophie et on peut l’ajouter dans .gitignore. Et comme j’utilise déjà conda pour Flask et les autres projets python, et qu’il est moins pénible que pip, me permettant néanmoins d’utiliser ce dernier sous conda en cas de besoin.

Édit 2:

Est-ce que vous avez en stock des exemples de menu ? Ceux que j’ai trouvé sont en Vue 2 et pas forcément bien écrit. Ah tiens j’ai trouvé mais pas encore testé S.O.: Using bootstrap5 with vue 3

140

Je suis en train de finir un POC assez représentatif pour m’autoformer à ce dont j’ai besoin pour mon boulot, en créant 2 graphs Bokeh liés entre eux, par un lasso via js_on_change() côté python (lien) et Bokeh.embed.embed_item() côté js, via json_item() côté python (lien).

C’était vraiment sympa ce POC, je vais pouvoir mettre en œuvre ce que je cherchais à faire, ce qui est l’aboutissement de ce topic.
Merci pour vos conseils et réponses dans les précédents messages. :slight_smile:

Je posterais ici un lien github et/ou stackoverflow de mon POC.

1 « J'aime »
141

Dans Vue3 tu as la possibilité maintenant de passer l’attribut setup au bloc script pour éviter tous ces exports si tu utilises des composants:
https://v3.vuejs.org/api/sfc-script-setup.html

1 « J'aime »
142

hop:

143

J’ai suivi ta suggestion pour l’instant uniquement dans la page principale qui concerne mon POC frontend/src/pages/ProdSinusPage.vue.

Ça me fait penser : est-ce qu’on peut utiliser cette syntaxe, excepté évidemment la balise <script setup>, dans les fichiers js des store, api, router ? Je n’ai pas l’impression.

C’est à dire sans se farcir ces structures imbriquées. Bon après c’est beaucoup moins gênant que dans les fichiers vue.

édit : Mais à part cette syntaxe imbriquée, dont on peut se passer dans les composants vue grâce à composition api, je trouve que le mécanisme et l’organisation de vuejs sont vraiment bien conçus :slight_smile:

Et vuejs m’a permis de suivre le conseil, donné dans les pages précédentes, d’utiliser Flask uniquement pour produire des api et de laisser la gestion de l’UI bien séparée.

144

J’ai pas creusé assez (je suis tombé sur cette notation très récemment en trouvant Vite puis surtout Vitesse qui l’utilise) mais je n’ai pas l’impression non plus:
https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md

1 « J'aime »
145

Je suis plusieurs fois tombé sur Vite, en cherchant des informations sur Vue, en ayant l’impression que c’était encore une couche de plus à lire la page github. J’ai tendance à penser que ce n’est intéressant que pour les gros projets.

Ton message sur Vite m’a incité à me renseigner davantage: cet article ci-dessous est instructif notamment sur les exemples, les domaines d’applications possibles, et les outils pré installés. Je vais finalement garder cet outil en tête au cas où.

« Vite is a new build tool from creators of Vue JS framework. They have released the first version in April 2020. It immediately created a lot of buzz, while raising a question: do we need another build tool?

The answer is yes. Why? Because leading build tools became unbearably bloated. Vite is a swift and refreshing change. Although created by the Vue tribe, it is not limited to Vue. You can use it to build all kinds of JavaScript code, and it has many cool features.»