Valse

Un framework MVC pour Vala

a marqué ce sujet comme résolu.

Valse

Bonjour tout le monde !

Je suis Baptiste, alias Bat' sur Zeste de Savoir et sur Internet en général. Je suis intéréssé par l'informatique depuis environ deux ans. Je développe donc en tant qu'amateur dans différents langages comme C#, JavaScript, HTML/CSS, et bien-sûr Vala. Aujourd'hui je viens vous présenter un petit projet que j'ai créé avec ce langage.

En savoir plus sur le projet

Genèse

Il y a quelques temps, j'ai découvert la bibliothèque Valum qui permettait de créer des sites web à l'aide du langage Vala. J'ai voulu l'essayer. Seulement, elle est développée sous Linux et la compatibilité Windows (avec lequel je travaille) … c'est pas vraiment ça. J'ai même essayé sous Linux, ça na pas été forcement plus simple. J'ai donc décidé de créer ma propre bibliothèque pour créer des sites webs dynamiques avec Vala.

Généralités et avancement

Le projet est encore assez jeune. Il est donc tout à fait probable que le code que l'on écit aujourd'hui ne soit plus fonctionnel demain.

De plus, je suis amateur, je vais aussi à l'école à côté et ce n'est pas ma seule activité. Il se peut que le projet ne soit pas toujours très actif.

Mais depuis le mois d'avril, Wizix et Folaefolc m'aident sur le projet !

Objectifs personnels

Mes objectifs sont très simples :

  • M'amuser. Je fait ce projet sur mon temps libre, ce n'est pas quelque chose que je suis obligé de faire, je veux que ça me plaise.
  • Progresser. Je connais assez bien Vala, mais certaines bibliothèques, comme libsoup que j'utilise dans ce projet, me sont inconnues. C'est donc aussi l'occasion d'apprendre de nouvelles choses.
  • Me faire repérer par une grosse boîte de la Silicon Valley, vendre le framework puis nager dans ma piscine de billets.

Rien de bien original ici, donc.

Le projet et son orignialité

Ce projet n'est pas le premier framework web en Vala (il existe aussi Valum, comme je l'ai dit plus haut). Cependant je crois que c'est l'un des premier à respecter le pattren MVC. Il fonctionne aussi parfaitement sous Windows.

Pour ceux qui ne savent pas ce qu'est le pattern MVC, c'est une architecture surtout utilisée dans les sites webs dynamiques. Le code est alors divisé en trois parties :

  • Les modèles, qui décrivent les différentes données (utilisateurs, tutoriels, articles, forums, etc dans le cas de Zeste de Savoir)
  • Les vues, qui sont des fichiers contenant une sorte de HTML. Ils sont interprétés pour afficher des informations à l'utilisateurs.
  • Les controlleurs, qui font toute la logique du site web. Ils donnent les bons modèles à nos vues, gèrent l'upload de fichiers, etc.

Valse est donc un framework qui vous permet de créer des sites dynamiques en utilisant cette architecture.

Objectifs du projet

En plus de mes objectifs personnels, j'aimerai :

  • Vraiment utiliser MVC Fait
  • Avoir un meilleur moteur de rendu En cours, sur du long terme
  • Créer un petit programme en ligne de commande pour générer les fichiers d'un site web automatiquement En cours, sur du long terme aussi
  • Avoir un meilleur méchanisme de routage Plus ou moins fait
  • Documenter le code et écrire une doc pour guider les développeurs intéréssés Fait
  • Faciliter la gestion de bases de données Fait
  • Supporter des choses comme les WebSockets
  • Et sûrement d'autres qui vont venir plus tard

Comment ça marche

Le projet propose dès le début un moteur de rendu appelé Wala. Il propose une syntaxe assez similaire à Twig ou Jinja (avec des {{ }}). Il peut afficher des variables du modèle, afficher son nom, inclure d'autres fichiers et utiliser des tags. Mais si Wal ne vous convient pas, vous pouvez très facilement créer votre propre moteur de rendu.

Pour avoir un site web fonctionnel et propre, il vous faudra au moins quatres fichiers (pour quelque chose de sale, trois suffisent. Vous pouvez même en avoir qu'un seul, mais c'est vraiment moche) :

  • main.vala qui associera vos controlleurs avec une route et qui lancera le serveur
  • mon-modele.vala qui décrira notre modèle
  • mon-controlleur.vala qui fera le rendu de votre page (et éventuellement un peu de logique)
  • ma-page.wala qui contiendra la page qu'il faudra rendre avec Wala

On peut alors avoir quelque chose comme ça :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
using Valse;

void main (string[] args) {

    // On crée le serveur
    Router r = new Router ();

    // On crée un controlleur et on l'associe à la route /zds
    ZdSController zds = new ZdSController ();
    r.register ("/zds", zds);

    // On lance le serveur
    r.listen ();

}

main.vala

1
2
3
public class ZdSModel : Object {
    public string greeter {get; set;}
}

zds-controller.vala

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
using Valse;
using Gee;

public class ZdSController : Controller {

    public ZdSController () {
         // On lie l'action par défaut (index) à notre méthode index
         this.add_action ("index", this.index);
    }

    public override Response index () {
        // La méthode index correspond à la racine de la route associée au controlleur

        // On crée le modèle
        ZdSModel model = new ZdSModel ();
        model.greeter = "Hello ZdS !";
        // On fait un rendu de la page en utilisant la méthode page de la classe Controller qui fait tout pour nous
        return page ("zds.wala", model);
    }

}

zds-controlleur.vala

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Zeste de Savoir</title>
    </head>
    <body>
        <h1>{{ mod.greeter }}</h1><!-- On utilise une variable du modèle -->
        <p>Cette page a été rendue avec {{ render_engine }}</p> <!-- On affiche le nom du moteur de rendu (Wala) -->
    </body>
</html>

zds.wala

Le résultat de notre exemple

Je rédigerai surement une doc (et peut être même un tuto ici) une fois que l'API sera stabilisée. Si vous voulez vous amuser avec Valse dès maintenant clonez le repo git (voir à la fin du message) et compilez avec le script build.ps1. Il vous faudra Vala 0.20 minimum. Ensuite, vous pouvez vous amuser à créer de nouveaux controlleurs ou modifier ceux de test.

En savoir plus

Si vous voulez aider, n'hésitez pas ! Même si vous débutez en Vala, je serai là pour vous guider. Le dépôt Gitlab (ou plutôt Framagit) est disponible juste là.

Voilà ! Si vous avez des remarques, critiques ou suggestions, allez y ! Je suis là pour ça. En tout cas, merci de m'avoir lu, j'espère vous avoir donné envie d'essayer mon petit framework ou au moins de suivre l'évolution du projet.

+11 -0

Je viens de faire une petite mise à jour. Maintenant on peut avoir d'autres actions que index dans les controlleurs. Mais du coup, le code d'exemple est cassé. Maintenant il faut rajouter ça :

1
2
3
4
5
6
7
8
9
// Dans votre controlleur (ici celui de l'exemple)
public ZdSController () {
    // On peut accéder à cette page en allant à /zds/nom
    this.add_action ("nom", mon_action);
}

public string mon_action () {
    return page ("test.wala");
}

Du coup, votre site sera beaucoup plus organisé, vous pourrez par exemple regrouper toutes les routes pour la gestion des utilisateurs ensemble (/users/create/, /users/edit/, /users/list/, /users/remove/ ou tout simplement /users/), alors qu'avant vous auriez du créer un controlleur pour chacune de ces routes.

+3 -0

Encore un petit pas en avant vers quelque chose de propre : on peut désormais avoir de vrais modèles. Vous aurez désormais une classe qui fait office de modèle, avec diverses propriétés qui peuvent être au moins des string et des int (le reste j'ai pas testé, je vous l'avoue :-° ). On peut donc rajouter à notre exemple une classe ZdSModel :

1
2
3
public class ZdSModel : Object {
    public string greeter {get; set;}
}

Et dans notre action, on a désormais ce code :

1
2
3
ZdSModel model = new ZdSModel ();
model.greeter = "Plop les zesteux !";
return page ("zds.wala", model);

Et avec cette vue …

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Zeste de Savoir</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>{{ mod.greeter }}</h1>
        <p>Cette page a été rendue avec {{ render_engine }}</p>
    </body>
</html>

… on obtient ça !

Notre modèle, 100% fonctionnel !

(Vous noterez d'ailleurs que le fichier CSS, placé dans le dossier static, est correctement envoyé, ce qui n'était pas le cas avant)

Et si vous avez d'autres retours que des pouces verts, je suis preneur, même si c'est agréable de voir que le projet plaît. :)

+2 -0

J'aimerais bien te faire des retours mais le problème, c'est que je ne connais pas Vala. :-° En tout cas, bravo pour ton projet, je vais le suivre avec attention !
Bonne continuation, et surtout, bon courge ! :D

Edit: J'adore le nom du projet !

+0 -0

J'aimerais bien te faire des retours mais le problème, c'est que je ne connais pas Vala. :-° En tout cas, bravo pour ton projet, je vais le suivre avec attention !

C'est vrai que la communauté Vala sur Zeste de Savoir est un peu … petite, je ne risque pas d'avoir beaucoup de retours. Mais si vous voulez que je vous aide à débuter, il n'y a pas de problèmes !

Bonne continuation, et surtout, bon courge ! :D

Merci !

Edit: J'adore le nom du projet !

Wizix

Comme pour beaucoup de projets développés en Vala, ou ayant un rapport avec le langage j'ai pris un mot commençant par V qui sonnait bien …

Je signale que je suis le projet (même si j'y connais rien) parce que cliquer sur le bouton suivre le sujet ne te dira pas que tu gagnes un follower ;) .

Bonne chance :) !

Poliorcetics

Merci de ton soutien.

Je ne connais rien à Vala, mais la structure de ton projet Git est un peu étrange, tu as pas mal de fichiers de tests mélangés. Tu pourrais peut-être ajouter un .gitignore.

C'ets vrai que balance un peu tout et n'importe quoi sur Framagit, il faudrait que je fasse du tri.

Bonne chance pour ce projet assez ambitieux :)

ThuleMalta

Merci à toi aussi ! N'hésite pas à tester (je ne sais psa si tu as installé Vala, mais comme tu avais l'air intéréssé).

Sinon je bosse sur Poulp, u petit programme qui permettra de générer très facilement des controlleurs, des vues, ou d'avoir des templates de projets tout faits (qui ne seront pas forcement limités à Valse d'ailleurs). Et peu être que je rajouterai la gestion des dépendances, parce que c'est vraiment un truc qui manque à Vala.

En tout cas ça fait plaisir d'avoir des retours ! Même si vous n'avez pas les compétences pour tester … :)

Une première version de Poulp est disponible ! Pour le moment il contient juste un assistant à la création de projets (en ligne de commande) et un système de compilation simplifié. C'est surtout ce dernier qui est intéréssant. En effet, il vous suffira d'avoir un fichier package.json pour pouvoir compiler votre projet avec poulp build (alors que le compilateur Vala prends pleins d'arguments et qu'on s'y perd très vite) ! Pour information, un fichier package.json ressemble actuellement à ça.

1
2
3
4
5
6
7
8
9
{ 
  "name" : "test",
  "version" : "1.0.0",
  "libs" : [ 
    "gio-2.0",
    "libsoup-2.4"
  ],
  "output" : "test" 
}

Voilà ! Je vais essayer de travailler sur la gestion des bases de données maintenant. :)

+0 -0

Je supoose que tu es sous Linux ? Si c'est le cas, crée toi un fichier build.sh dans le dossier où tu as ton code et met y ça :

1
2
3
4
5
6
7
valac --pkg libsoup-2.4 --pkg gee-1.0 --pkg sqlite3 *.vala -o serv

echo " "
echo " --- Server is starting ---"
echo " "

./serv

Ensuite, rends toi sur la page http://localhost/zds/ ou http://localhost/zds/test. Tu aura les pages de test. Tu peux ensuite modifier le fichier zds-controller.vala en rajoutant des actions (inspire toi de ce qui est déjà là) ou en modifiant le modèle de l'action index. Tu peux aussi jouer avec les vues (fichiers .wala).

Si tu as des soucis, n'hésite pas ! Et merci de tester même si tu ne connais rien à Vala ! :)

Je ne sais ps si vous avez finalement réussi, mais si il y a des problèmes, n'hésitez pas.

En tout cas, on commence à avoir des bases de données fonctionelles. En fait, elles le sont de base, mais j'ai créé une classe qui en simplifie grandement l'utilisation (parce que taper des requêtes SQL à la main, ça va 5 minutes). Par exemple, pour créer une nouvelle table, rajoutez ceci dans la méthode du controlleur qui vous intéresse :

1
this.db ().register (typeof (ZdSModel));

Et pouf ! La table correspondant à ZdSModel est créée. Par contre il y a quelques limitations, par exemple on ne peut pas enregistrer de dates (texte, entier ou décimaux uniquement). Mais je vais améliorer ça. Bien-sûr, vous pouvez faie d'autre chose que de créer une table. Par exemple, ce code crée une table, enregistre un modèle dans la base, puis le récupère pour l'utiliser dans la vue :

1
2
3
4
5
6
7
8
    public override string index () {
        this.db ().register (typeof (ZdSModel)); // On crée la table pour ZdSModel
        ZdSModel model = new ZdSModel (); // On crée notre modèle ...
        model.greeter = "Plop les zesteux !"; // ... et on le modifie un peu
        int rowid = this.db ().add (model); // On l'enregistre dans la BDD
        // rowid correspond à l'id de l'élément qu'on a ajouté, pour pouvoir le retrouver après
        return page ("zds.wala", this.db ().get_id (rowid, typeof (ZdSModel))); // On le passe comme argument au rendu de la page, en le récupérant dans la BDD
    }

C'est beau, non ?

Et pour les curieux, voici l'équivalent en requêtes SQL :

1
2
3
4
5
CREATE TABLE ZdSModel ( greeter TEXT NOT NULL, ze_reponse INT NOT NULL, taille REAL NOT NULL, random REAL NOT NULL );

INSERT INTO ZdSModel ( gretter, ze_response, taille, random ) VALUES ( "Plop les zesteux !", 42, 1.7000, 223.7000 );

SELECT * FROM ZdSModel WHERE rowid = 1 # Bien-sûr 1 varie en fonction de ce vous avez demandé
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte