Ç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
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.
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.»
Vu que j’ai opté pour Flask (*), avec l’optique de l’utiliser avec Vue ou R Shiny, c’est-à-dire uniquement en utilisation d’Api, comme semblent être les bonnes pratiques récentes en ce domaine, que penser de Fastapi ?
Je lis des articles sur cette question, ci-dessous par exemple, mais j’aimerais avoir vos avis.
De toute façon j’ai l’impression que Flask utilisé en mode API et Fastapi sont dans le même esprit, ils ne sont pas vraiment opposables: le 2e est dans l’esprit du 1er en étant plus moderne mais moins répandu ?
PS: Et flask_restful sert à quoi ? Puisque de base Flask sait présenter des api.
(*)Pour l’instant uniquement en POC en l’absence de décantations assez avancées en ce qui concerne les besoins métiers.
PS2: Léger HS par rapport à ma question : j’ai fait un autre POC, RshinyBokehReticulatePOC, en R Shiny python, via reticulate, pas longtemps après FlaskVueBokehPOC.
Ah putain, je suis bien content d’avoir opté pour Flask et VueJs (grâce à vos commentaires sur ce topic).
Je m’amuse comme un petit fou dans l’application, non POC, que je suis en train de réaliser, je rajoute les briques qui me vont, je peux mélanger différentes solutions. À chaque brique je rajoute seulement ce qui est nécessaire, tout étant proche de mes besoins. C’est vraiment souple et en même temps puissant.
Flask
tout en Rest
jwt
Blueprint
SqlAlchemy (mais seulement pour les requêtes qui ne vont pas bouger ou les formulaires)
Avant que mon application ne grossisse trop j’ai remplacé Vuex par Pinia …qui va en fait être le très très probable remplaçant de Vuex 4. Conçu par quelqu’un du coeur de l’équipe Vue .
Pinia est moins verbeux que Vuex que ce soit pour la définition du store comme son l’utilisation, tout en restant dans le même esprit. Et donc j’ai fait le changement sans souci.
Evan You @youyuxi, 9:49 AM · 24 nov. 2021:
Pinia is de facto Vuex 5! At this point it’s really a naming/branding issue.
Mutations no longer exist. They were very often perceived as extremely verbose. They initially brought devtools integration but that is no longer an issue.
No need to create custom complex wrappers to support TypeScript, everything is typed and the API is designed in a way to leverage TS type inference as much as possible.
»
Je connaissais apply() en R et j’ai fait connaissance il n’y a pas longtemps avec reduce() en js (qui existe aussi en JS et python).
Ben j’ai mis du temps à m’y faire, mais je trouve ça sympa. Une fonction for simple est plus facile à concevoir et à lire qu’une fonction reduce() ou apply() mais dès qu’on a besoin de plusieurs niveaux ou de complexité, je commence à trouver cela bien plus puissant et claire.
Il faut dire que de faire du R m’a fait faire de la programmation fonctionnelle comme monsieur Jourdain.
Et j’ai vu qu’en JS, depuis que je fais du VueJs c’est-à-dire sans jquery, on est quelques fois presque « obligé » d’utiliser reduce() et autres fonctions de programmation fonctionnelle.
De même en pandas (python), je me suis mis aux df.apply( lambda x: pandas.Series(..)).
Bon après tout écrire en programmation fonctionnelle c’est une autre paire de manche.
PS: Merci de me corriger si je dis des inexactitudes, je ne suis pas forcément à l’aise en théorie.
Marrant de penser à notre échange d’il y a déjà 2 ans sur webpack qui m’inquiétait un peu.
Je m’étonne à presque m’amuser à essayer d’optmiser différents module hétéroclites dans l’implémentation webpack de VueJs (vue.config.js).
En fait ce travail me permet de mieux appréhender l’architecture technique.
Par exemple Webpack Bundle Analyzer m’a permis de faire des alias vers des min.js pour certains modules qui persistaient à utiliser leur version volumineuse non minifiée.
Ou alors de faire des imports ciblés d’icones fortawesome car de base sinon
fortawesome importe tout ses icônes (~600Ko !!).
import { faSyncAlt } from "@fortawesome/free-solid-svg-icons/faSyncAlt.js";
import { faPlusCircle } from "@fortawesome/free-solid-svg-icons/faPlusCircle.js";
etc...
Grâce à mon expérience acquise sur webpack depuis un an je suis en train de migrer mon projet de webpack (vue.config.js), vers ViteJs (vite.config.js)
J’ai ramé avec le composant jquery datatable.net mais j’ai finalement réussi (comme j’avais ramé pour la même raison pour vue.config.js).
En fait ça « compile » quasi instantanément.
Mais vite.config.js reste dans une logique syntaxique proche de webpack et acceptant les modules fait pour webpack.
Je me suis aidé au départ de l’article et de l’outil ci-dessous ( webpack-to-vite insuffisant mais qui permet une bonne mise en place de départ) et j’ai résolu chaque obstacle en glanant des infos sur Stackoverflow et Github.
Il faut noter que si ViteJs a été créé par le créateur de VueJs, il peut aussi être utilisé pour d’autres environnements.
vanilla
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
svelte
svelte-ts
Édit: sur alias, import forteawesome, sur les utilisations de Vite pour les autres frameworks js.
Quand j’étais encore spécialiste BI il y a 6 ans chez un éditeur je m’étonnais de l’attrait des développeurs pour JavaScript.
Mais depuis bientôt 5 ans que je fais du développement web en R Shiny (basé sur un moteur nodejs en fait), et un peu plus d’un an que je fais du VueJs 3, et donc de l’ES6 et plus, je vois que les possibilités de l’ES6 associé à l’écosystème nodejs, aux transpilers, et aux polyfills change la donne et font de l’ES un langage vraiment intéressant, passionnant et puissant dans des framework tels que VueJs ou ses concurrents.
Sans parler des possibilités côté serveurs en « pur » nodejs ou Nuxt (Architecture VueJs en back) ou ses concurrents.
Reste l’architecture très redondantes de nodejs, mais j’ai vu qu’il existait maintenant pnpm qui évite ces redondances (non testé encore, je ne sais pas si tout les packages restent compatibles, surtout que j’ai des modules assez hétérogènes).
Après je n’oublie pas que chaque langage et environnement de développement est pour certains besoins et cas d’usages, et qu’il ne faut pas hésiter à en sortir et en prendre un autre si ces besoins et cas d’usage ne sont pas les mêmes.
Est-ce que le Node c’est devenu plus facile à monitorer en prod qu’avant ? La dernière fois que j’avais regardé, ça faisait pas rêver par rapport à l’outillage dispo en Java ou en .Net.
L’autre truc que j’avais trouvé aussi un peu lacunaire, c’est l’absence de générateurs de code qui te facilitent la vie en te faisant un vrai projet prêt à balancer en prod’ sans qu’un petit nouveau oublie des trucs. Genre pas oublier de câbler la lib de metrics, bien configurer les loggers, le système d’auth, s’enregistrer auprès de ton annuaire d’application, etc… Certes, je pourrais maintenir moi même des templates pour générer mes applis, mais l’intérêt que quelqu’un d’autre le fasse à ta place, c’est de gagner un maximum de temps.
Si vous ne voyez pas de quoi je parle, je fais référence à ce genre de truc
En tâche de fond je suis en train de regarder Rust. Et je me posais récemment la question entre autres des mini serveurs web en Rust.
Et pour le coup si on veut vraiment un serveur compact sans sortir la grosse artillerie VueJS ou autre, htmx, dont tu parlais en novembre 2020 a l’air pas mal en fait.
Voici ce que j’ai trouvé.
Mise œuvre d’un serveur web Axum (alternative à Actix mais assez similaire) + htmx + minijinja
D’autres implémentations sans htmx
Mise œuvre d’un serveur web Axum (alternative à Actix) + mini jinja sans htmx
A priori enfin un nouveau projet en Flask + VueJs à démarrer \o/
Comme le précédent je vais le faire en VueJs 3 que j’avais choisi pour le dev en composition api (et non en options api de VueJs 2).
Un article très intéressant sur les problématiques de changements de version majeures, breaking changes, et équipes de développement réduite dont les membres s’évaporent pour reprendre l’expression de l’article.
Probablement que je vais rester en boostrap4 simple, vu que bootstrap5 entraîne trop d’incertitudes avec VueJs 3. Bootstrap-vue n’étant pas compatible VueJs 3, et l’évaporation de son équipe n’aide pas, et bootstrap-Vue-Next, censé être compatible VueJs 3 et bootstrap 5, n’est encore qu’en alpha.
Surtout que je fais le minimum standard en bootstrap.
Tiens j’ai trouvé un IDE pas envahissant qui en plus gère l’édition via ssh comme s’il était sur le serveur puisqu’il utilise un éditeur-serveur deporté sur Linux par exemple de mon poste Windows à mon serveur Linux pour mes développements Flask VueJs:
Zed
Available for macOS, Linux, and Windows
Remote Development
Your machine only runs the Zed UI, while the actual codebase runs on a remote server.
Yes! Zed is first and foremost a code editor with blazing-fast performance, true multiplayer collaboration, and a focus on developer productivity. You can disable all AI features if you’d like to.
\o/