Gillie.js, un micro-framework Javascript MVC inspiré de Backbone.js

J’ai évoqué il y a 6 mois l’existence d’un micro-framework Javascript : stapes.js.

J’ai envie cette fois de vous en présenter un nouveau : Gillie.js, à la différence c’est que lui nécessite le chargement de jQuery. Il propose également une architecture MVC du code. Et celle-ci est bien plus claire.

Ce micro-framework s’est basé sur les bonnes idées de Backbone.js pour qui sa réputation n’est plus à faire. Voici l’architecture proposée (extrait de la documentation officielle) :

Le « handler » est en fait le « controller ».

Installation

Inclure jQuery, Gillie, et votre code applicatif (soit le MVC dans un seul fichier ou dans 3 fichiers).

<script src="js/jquery.min.js"></script>
<script src="js/gillie.min.js"></script>
<script src="js/hello.mvc.js"></script>

Avec 3 fichiers, l’ordre M > V > C est obligatoire.

<script src="js/jquery.min.js"></script>
<script src="js/gillie.min.js"></script>
<script src="js/hello.model.js"></script>
<script src="js/hello.view.js"></script>
<script src="js/hello.controller.js"></script>

Utilisation

Voici les rôles de chacun :

  • Model : Fait le lien avec le serveur (requêtes AJAX) et indique à la vue quand c’est terminé.
  • View : Manipule le DOM et écoute les événements du modèle.
  • Controller : Ecoute les événements du DOM, appelle le modèle pour effectuer des requêtes ou appelle la vue pour modifier le DOM.

Nous allons prendre un cas concret : un formulaire car on y retrouve de tout (événement, AJAX, manipulation du DOM).

Exemple

HTML

<form id="my_form" action="/" method="get">
    <input type="email" name="email" placeholder="Your email" required="required">
    <textarea name="message" placeholder="Your message" required="required"></textarea>

    <input type="submit" name="submit" value="Submit">
</form>

<div id="response"></div>

Model

var HelloModel;

(function() {

    'use strict';

    HelloModel = Gillie.Model.extend({

        /**
        * Default attributes
        */
        defaults: {},

        /**
        * Base URL
        */
        url: 'http://dev.chez-syl.fr/gillietest',

        /**
        * Constructor
        */
        initialize: function() {
            return undefined;
        },

        /**
        * Sends a message
        *
        * @param object data
        * @return object
        */
        sendMessage: function(data) {
            /**
            * POST AJAX request
            */
            return this.Post('/message.php', 'message.send', { data: data });
        }

    });

    HelloModel = new HelloModel();

}());

View

var HelloView;

(function() {

    'use strict';

    var HelloView = Gillie.View.extend({

        /**
        * Constructor
        */
        initialize: function() {
            /**
            * Listener
            */
            HelloModel.on('message.send', this.messageSended);
        },

        /**
        * Callback message sended
        *
        * @param object model_instance
        * @param object json
        * @param object options
        */
        messageSended: function(model_instance, json, options) {
            if(options.xhr.status === 200) {
                $('#response').html(json.response);
            }
        }

    });

    HelloView = new HelloView();

}());

Controller

var HelloController;

(function() {

    'use strict';

    HelloController = Gillie.Handler.extend({

        /**
        * Constructor
        */
        initialize: function() {
            return undefined;
        },

        /**
        * View events
        */
        events: {
            'submit #my_form': 'sendMessage'
        },

        /**
        * Sends a message
        *
        * @param object e
        * @return object
        */
        sendMessage: function(e) {
            e.preventDefault();

            /**
            * Query model
            */
            return HelloModel.sendMessage($(e.currentTarget).serialize());
        }

    });

    HelloController = new HelloController();

}());

Message.php

<?php
    echo json_encode(['response' => 'Your message has been successfully sent.']);
?>

Certains penseront qu’il y a un peu trop de code, et qu’on aurait beaucoup moins de lignes en jQuery « pur ». C’est le cas oui. Mais difficile de nativement « bien » structurer son code. Pour les petits/moyens sites, cette solution est un bon compromis à mon sens. On s’y retrouve facilement.

Alors voyons ce qu’il se passe avec ce code :

  1. Le contrôleur écoute l’événement submit du formulaire et exécute la méthode sendMessage.
  2. La méthode sendMessage exécute la méthode sendMessage du modèle et lui donne en argument le formulaire sérialisé. Vous pouvez les nommer différemment si vous voulez, s’il y a des vérifications à faire, ce sera dans sendMessage du contrôleur.
  3. Le modèle envoie une requête AJAX de type POST à http://localhost/gillietest/message.php (c’est pour le test, mais imaginez une URL plus propre type REST) avec les données fournies par le contrôleur.
  4. message.send est le nom de l’événement (qui lie le modèle et la vue). La vue écoute donc le modèle et exécute messageSended.
  5. messageSended vérifie que le code HTTP est bon (200) et écrit dans le DOM la réponse JSON fournie par le script PHP.

Conclusion

Voilà pour l’explication du code, rien de plus, rien de moins. A noter que pour l’AJAX, tout comme POST, GET, PUT et DELETE sont disponibles. Je n’ai pas tout dit sur le framework, si vous voulez en savoir davantage, c’est par la documentation que vous pouvez commencer.

J’ai mis en ligne l’exemple que je viens d’expliquer, voir l’exemple.

Si vous êtes convaincu(e), rendez-vous sur la documentation ainsi que sur le dépôt GitHub.

Vous aimerez aussi...