Une appli web de dessin. JavaScript, Haskell Miso, C++ Wt ou WebAssembly ?

Voir aussi : article linuxfr - code source

Les applications web actuelles tendent à réaliser une grande part des traitements côté-client (frontend) et à réduire au maximum la partie côté-serveur (backend). Un exemple classique est l’application mono-page (Single-Page Application), où la gestion de l’interface et des données est réalisée principalement côté-client avec, quand c’est nécessaire, des requêtes serveurs (AJAX, websockets…).

Pour implémenter ce genre d’applications, on utilise généralement un framework frontend comme AngularJS, Vue.js, React/Redux… Ces frameworks proposent une architecture de base (MVC, flux…) qui permet d’implémenter facilement une application classique de présentation et de manipulation de données.

L’objectif de cet article est de comparer quelques technologies pour réaliser une application un peu plus interactive : une application de dessin basique. Les technologies considérées ici sont JavaScript (sans bibliothèque), Haskell Miso (framework frontend), C++ Wt (framework fullstack basé widgets) et WebAssembly.

L’application à réaliser

On veut implémenter une application basique permettant de dessiner à la souris. Des curseurs permettent de régler la couleur et la taille de la brosse de dessin. La brosse est illustrée dynamiquement en fonction de ses paramètres. Enfin un bouton permet de nettoyer la zone de dessin.

application en ligne

A priori, cette application ne pose pas de difficulté particulière. Les données à manipuler sont essentiellement les paramètres de la brosse et l’état du canvas de dessin. Pour le dessin en lui-même, il suffit de détecter quand le bouton de la souris est appuyé et de tracer des lignes entre les positions successives du pointeur.

En JavaScript

JavaScript possède toute les fonctionnalités nécessaires pour implémenter notre application dans un navigateur web : input de type range pour les réglages de la brosse, canvas HTML5 pour les dessins dynamiques, fonctions de rappels pour gérer les événements. Commençons par créer l’interface en HTML :

<!DOCTYPE html>
<html>
  <head> <meta charset="UTF-8"/> </head>

  <body>
    <h1>Draw</h1>

    <!-- the range elements (R, G, B and radius) -->
    <p> R <input type="range" min="0" max="255" value="0" id="input_r"> </input>
        <span id="span_r">  </span> </p>
    <p> G <input type="range" min="0" max="255" value="0" id="input_g"> </input>
        <span id="span_g">  </span> </p>
    <p> B <input type="range" min="0" max="255" value="0" id="input_b"> </input>
        <span id="span_b">  </span> </p>
    <p> radius <input type="range" min="2" max="50" value="10" id="input_radius"> </input>
        <span id="span_radius"> </span> </p>

    <!-- the canvas for previewing the brush -->
    <p> <canvas id="canvas_brush" width="100" height="100"> </canvas> </p>

    <!-- the canvas for drawing -->
    <p> <canvas id="canvas_draw" width="640" height="480" style="border:1px solid black"> </canvas> </p>

    <!-- the button for clearing canvas_draw -->
    <p><button id="button_clear"> Clear </button></p>

Ajoutons quelques fonctions utilitaires, en JavaScript, pour récupérer la position de la souris à l’intérieur du canvas de dessin et pour convertir les 3 valeurs RGB des curseurs en couleur HTML hexadécimale.

    <script>
        // find position in canvas, from mouse event
        function getXY(canvas, evt) {
            const rect = canvas.getBoundingClientRect();
            const x = evt.clientX - rect.left;
            const y = evt.clientY - rect.top;
            return {x, y};
        }

        // convert color from RGB triplet to hex code
        // for example: 255, 0, 255 -> '#FF00FF'
        function componentToHex(c) {
            const hex = Number(c).toString(16);
            return hex.length == 1 ? "0" + hex : hex;
        }
        function rgbToHex(r, g, b) {
            return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
        }
    </script>

On peut alors implémenter les fonctions de rappels pour le dessin proprement dit. Lorsqu’on appuie sur le bouton de la souris (onmousedown) dans le canvas de dessin, on récupère les paramètres actuels de la brosse et on initialise la fonction de rappel onmousemove de façon à effectuer le dessin. Lorsqu’on relache le bouton de la souris (onmouseup), on enlève la fonction de rappel onmousemove pour arrêter le dessin. Pour le bouton de nettoyage, une fonction de rappel sur onclick suffit.

    <script>
        // start drawing
        canvas_draw.onmousedown = function(evt0) {
            // get brush parameters from range elements
            const r = Number(input_r.value);
            const g = Number(input_g.value);
            const b = Number(input_b.value);
            const color = rgbToHex(r, g, b);
            const radius = Number(input_radius.value);

            // get canvas context and initial position
            const ctx = canvas_draw.getContext("2d");
            let p0 = getXY(canvas_draw, evt0);

            // set callback function for mousemove event
            canvas_draw.onmousemove = function(evt1) {
                // draw a line from previous position to current position
                const p1 = getXY(canvas_draw, evt1);
                ctx.beginPath();
                ctx.strokeStyle = color
                ctx.fillStyle = color;
                ctx.lineWidth = 2 * radius;
                ctx.lineCap = "round";
                ctx.moveTo(p0.x, p0.y);
                ctx.lineTo(p1.x, p1.y);
                ctx.fill();
                ctx.stroke();
                // update position 
                p0 = p1;
            };
        };

        // remove callback function when mouse up
        canvas_draw.onmouseup = function(evt) {
            canvas_draw.onmousemove = {};
        };
        // clear canvas_draw when clicking on button_clear
        button_clear.onclick = function() {
            const width = canvas_draw.clientWidth;
            const height = canvas_draw.clientHeight;
            const ctx = canvas_draw.getContext("2d");
            ctx.beginPath();
            ctx.clearRect(0, 0, width, height);
            ctx.stroke();
        }

Enfin, pour réagir dynamiquement aux curseurs de réglages de la brosse, on leur connecte la fonction de rappel updateDom, qui met à jour les valeurs affichées ainsi que l’illustration de la brosse.

        // update HTML elements (RGB span, canvas_brush)
        function updateDom() {
            // get values from range inputs 
            const r = input_r.value;
            const g = input_g.value;
            const b = input_b.value;
            const radius = input_radius.value;
            const color = rgbToHex(r, g, b);

            // update span texts
            span_r.innerHTML = r;
            span_g.innerHTML = g;
            span_b.innerHTML = b;
            span_radius.innerHTML = radius;

            // draw brush in canvas_brush
            const ctx = canvas_brush.getContext("2d");
            ctx.beginPath();
            ctx.strokeStyle = color
            ctx.fillStyle = color;
            ctx.clearRect(0, 0, 100, 100);
            ctx.arc(50, 50, radius, 0, 2*Math.PI);
            ctx.fill();
            ctx.stroke();
        }
        updateDom();

        // set callback functions on HTML elements
        input_r.oninput = updateDom;
        input_g.oninput = updateDom;
        input_b.oninput = updateDom;
        input_radius.oninput = updateDom;
    </script>

  </body>
</html>

Le fichier obtenu (draw_js/index.html) est assez concis, environ 130 lignes. Pour cette application, il y a peu d’éléments et d’événements à gérer donc le code reste lisible mais on imagine aisément qu’il va rapidement se compliquer si l’application grossit. On notera également que le typage dynamique de JavaScript permet une grande flexibilité mais rend la détection d’erreur assez délicate; la mise en place de tests automatisés devient vite indispensable.

En Haskell Miso (framework frontend)

On arrive ici à un point essentiel de l’article, à savoir si l’utilisation d’un framework frontend est pertinente pour une application qui sort un peu du schéma ordinaire « présentation/modification de données ». Comme je ne connais pas bien les frameworks JavaScript, j’ai choisi Miso, qui permet de coder en Haskell et de transpiler vers du JavaScript via Ghcjs. Miso est tout de même assez comparable aux autres frameworks car il implémente une architecture classique (inspirée de Elm/Redux) et car les frameworks classiques utilisent souvent des extensions à JavaScript voire un autre langage (TypeScript, Elm…).

Pour implémenter l’application de dessin avec Miso, on définit les composants de l’application : modèle, actions, fonction de rendu de la vue, fonction de mise à jour. Ici, le type Model contient les paramètres de la brosse ainsi que « l’état du dessin » (dessin en cours ou non, position précédente du pointeur). Le type Action définit les événements que peut générer la vue et qu’il faut traiter lors de la mise à jour (nettoyage du canvas de dessin, modification de la brosse ou du canvas de dessin…).

{-# LANGUAGE OverloadedStrings #-}
import Control.Monad (when)
import Data.Map (singleton)
import JavaScript.Web.Canvas
import Miso
import Miso.String hiding (singleton)

main :: IO ()
main = startApp App 
    { initialAction = UpdateBrushOp
    , update = updateModel 
    , view = viewModel
    , model  = Model 0 0 0 10 (0, 0) False
    , subs   = [ mouseSub UpdateDrawOp ]
    , events = defaultEvents
    , mountPoint = Nothing }

data Model = Model
    { modelR :: Int                -- brush color
    , modelG :: Int
    , modelB :: Int
    , modelRadius :: Int           -- brush radius
    , modelXy :: (Double, Double)  -- last position inside drawing canvas
    , modelDrawing :: Bool         -- drawing state
    } deriving (Eq)

data Action
    = NoOp
    | ClearDrawOp              -- request clearing canvas_draw
    | UpdateBrushOp            -- update canvas_brush
    | UpdateDrawOp (Int, Int)  -- update canvas_draw
    | UpdateDrawingOp Bool     -- update drawing state
    | UpdateFormOp (Model -> MisoString -> Model) MisoString  -- update a range element
    | UpdateXyOp (Double, Double)  -- update last position

Pour générer la vue, la fonction viewModel suivante crée les éléments de l’interface et connecte les événements aux actions déclarées précédemment. La fonction mkRange permet de créer un curseur pour les réglages de la brosse (le paramètre op est une fonction permettant de mettre à jour la valeur associée au curseur, sans avoir à dupliquer les actions). Les fonctions jsCtx, jsRectLeft, etc interfacent du code JavaScript qui n’est pas géré directement par Miso.

-- create a range element
mkRange :: MisoString -> Int -> Int -> Int -> (MisoString -> Action) -> View Action
mkRange title vmin vmax v op = p_ [] 
    [ text title
    , input_ 
        [ type_ "range"
        , onInput op
        , min_ (toMisoString vmin)
        , max_ (toMisoString vmax)
        , value_ (toMisoString v) ]
    , text (toMisoString v) ]

-- create view
viewModel :: Model -> View Action
viewModel (Model r g b radius _ _) = span_ []
    [ h1_ [] [ text "draw" ]
    , mkRange "R" 0 255 r (UpdateFormOp (\ m v -> m { modelR = fromMisoString v }))
    , mkRange "G" 0 255 g (UpdateFormOp (\ m v -> m { modelG = fromMisoString v }))
    , mkRange "B" 0 255 b (UpdateFormOp (\ m v -> m { modelB = fromMisoString v }))
    , mkRange "radius" 2 50 radius (UpdateFormOp (\ m v -> m { modelRadius = fromMisoString v }))
    , p_ [] [ canvas_ [ id_ "canvas_brush" , width_ "100" , height_ "100" ] [] ]
    , p_ [] [ canvas_ [ id_ "canvas_draw" , width_ "600" , height_ "300"
                      , style_  (singleton "border" "1px solid black")
                      , onMouseDown (UpdateDrawingOp True), onMouseUp (UpdateDrawingOp False) ] [] ]
    , p_ [] [ button_ [ onClick ClearDrawOp ] [ text "Clear" ] ] ]

-- bind javascript foreign functions for accessing canvas

foreign import javascript unsafe "$r = document.getElementById($1).getContext('2d');"
    jsCtx :: MisoString -> IO Context

foreign import javascript unsafe "$r = canvas_draw.getBoundingClientRect().left;"
    jsRectLeft :: IO Int

foreign import javascript unsafe "$r = canvas_draw.getBoundingClientRect().top;"
    jsRectTop :: IO Int

foreign import javascript unsafe "$r = canvas_draw.clientWidth;"
    jsWidth :: IO Int

foreign import javascript unsafe "$r = canvas_draw.clientHeight;"
    jsHeight :: IO Int

Enfin, la mise à jour du modèle est implémentée par la fonction updateModel suivante. Pour les actions UpdateBrushOp, ClearDrawOp et UpdateDrawOp, on met à jour les canvas correspondant. Pour les actions UpdateXyOp, UpdateFormOp et UpdateDrawingOp, on met à jour les champs correspondant du modèle. On notera que UpdateDrawOp et UpdateFormOp génèrent des actions à la fin de leur traitement (respectivement, pour mettre à jour la nouvelle position du curseur et pour mettre à jour le dessin de la brosse).

updateModel :: Action -> Model -> Effect Action Model

updateModel UpdateBrushOp m@(Model r g b radius _ _) = m <# do
    ctx <- jsCtx "canvas_brush"
    clearRect 0 0 100 100 ctx
    lineWidth 1 ctx
    strokeStyle r g b 255 ctx
    fillStyle r g b 255 ctx
    beginPath ctx
    arc 50 50 (fromIntegral radius) 0 (2*pi) True ctx
    fill ctx
    stroke ctx
    pure NoOp

updateModel ClearDrawOp m = m <# do
    ctx <- jsCtx "canvas_draw"
    w <- jsWidth
    h <- jsHeight
    clearRect 0 0 (fromIntegral w) (fromIntegral h) ctx
    pure NoOp

updateModel (UpdateDrawOp (x1, y1)) m@(Model r g b radius (x0, y0) drawing) = m <# do
    ctx <- jsCtx "canvas_draw"
    left <- jsRectLeft
    top <- jsRectTop
    let x1' = fromIntegral $ x1 - left
    let y1' = fromIntegral $ y1 - top
    when drawing $ do
        lineWidth 0 ctx
        strokeStyle r g b 255 ctx
        fillStyle r g b 255 ctx
        lineWidth (fromIntegral $ 2*radius) ctx
        lineCap LineCapRound ctx
        beginPath ctx
        moveTo x0 y0 ctx
        lineTo x1' y1' ctx
        stroke ctx
    pure $ UpdateXyOp (x1', y1')  -- request to update drawing position

updateModel (UpdateXyOp xy) m = noEff m { modelXy = xy }  -- update the field modelXy
updateModel (UpdateFormOp mFunc value) m = mFunc m value <# pure UpdateBrushOp
updateModel (UpdateDrawingOp drawing) m = noEff m { modelDrawing = drawing } 
updateModel NoOp m = noEff m

Le code obtenu (draw_miso/Main.hs) est à peu près aussi concis que le code JavaScript précédent (environ 125 lignes + le fichier d’appel draw_miso/index.html). En revanche, grâce à l’architecture demandée par le framework, il semble plus lisible et plus adapté aux applications complexes.

Concernant le langage Haskell et le framework Miso, on notera que le typage statique fort est très appréciable à l’usage car il permet de détecter une bonne partie des erreurs facilement et précocement. Par contre, la transpilation de Haskell vers JavaScript est assez lente et produit du code assez lourd.

En C++ Wt

Wt est un framework C++ fullstack basé widgets. Il permet d’écrire des applications web dans un style proche de Qt ou Gtkmm pour des applications desktop. Ceci peut être intéressant pour un développeur déjà habitué à ce style de programmation ou si l’application a également besoin de traitements côté-serveur.

Wt possède des widgets assez évolués, notamment WPaintedWidget pour le dessin. Pour notre application, on dérive une classe Canvas pour ajouter une brosse paramétrable et un chemin en cours de tracé.

#include <Wt/WApplication.h>
#include <Wt/WContainerWidget.h>
#include <Wt/WEnvironment.h>
#include <Wt/WPaintedWidget.h>
#include <Wt/WPainter.h>
#include <Wt/WPushButton.h>
#include <Wt/WSlider.h>
#include <Wt/WTemplate.h>
#include <Wt/WText.h>
using namespace std;
using namespace Wt;

// a canvas with a pen for drawing pathes 
class Canvas : public WPaintedWidget {
    protected:
        WPen _pen;           // current pen (color + width)
        WPainterPath _path;  // current path

    public:
        Canvas(int penWidth, int width, int height) : WPaintedWidget() {
            resize(width, height);
            _pen.setWidth(penWidth);
            _pen.setCapStyle(PenCapStyle::Round);
            _pen.setJoinStyle(PenJoinStyle::Round);
        }

        // set the width of the pen
        void setWidth(int w) {
            _pen.setWidth(w);
        }

        // set the color of the pen
        // updateFunc defines how to update color (for example, modify the red channel)
        void setColor(function<void(WColor & c)> updateFunc) {
            WColor color = _pen.color();
            updateFunc(color);
            _pen.setColor(color);
        }

        // clear canvas
        void clear() {
            _path = WPainterPath();
            update();
        }
};

Pour l’affichage de la brosse, on dérive CanvasBrush de Canvas et on redéfinit la fonction d’affichage de façon à dessiner un point central avec la brosse courante.

// canvas for previewing the brush
class CanvasBrush : public Canvas {
    public:
        CanvasBrush(int penWidth) : Canvas(penWidth, 50, 50) {}

    private:
        // paint event: draw a point in the middle of the canvas
        void paintEvent(WPaintDevice * paintDevice) override {
            WPainter painter(paintDevice);
            painter.setPen(_pen);
            _path.moveTo(25, 25);
            _path.lineTo(25, 25);
            painter.strokePath(_path, _pen);
        }
};

Pour la gestion du dessin, on dérive CanvasDraw de Canvas et on définit les fonctions de rappel et d’affichage. On notera les connexions signal-slot, très classiques dans les frameworks desktop.

// canvas for drawing
class CanvasDraw : public Canvas {
    public:
        CanvasDraw(int penWidth, int width, int height) : Canvas(penWidth, width, height) {
            WCssDecorationStyle deco;
            deco.setBorder(WBorder(BorderStyle::Solid));
            setDecorationStyle(deco);
            // connect event handlers
            mouseDragged().connect(this, &CanvasDraw::mouseDrag);
            mouseWentDown().connect(this, &CanvasDraw::mouseDown);
        }

    private:
        void paintEvent(WPaintDevice * paintDevice) override {
            // draw current path
            WPainter painter(paintDevice);
            painter.setPen(_pen);
            painter.drawPath(_path);
        }

        void mouseDown(const WMouseEvent & e) {
            // start path from current position 
            Coordinates c = e.widget();
            _path = WPainterPath(WPointF(c.x, c.y));
        }

        void mouseDrag(const WMouseEvent & e) {
            // add current position into the path
            Coordinates c = e.widget();
            _path.lineTo(c.x, c.y);
            update(PaintFlag::Update);
        }
};

On implémente également un curseur avec affichage de sa valeur, pour les paramètres de la brosse de dessin. La méthode setUpdateFunc permet de spécifier la fonction à appeler, lorsque le curseur est modifié, pour mettre à jour la variable correspondante.

// slider that prints its value and calls and updating function when moved
class Slider : public WContainerWidget {
    private:
        WSlider * _slider;
        WText * _text;

    public:
        Slider(const string & title, int vmin, int vmax, int vinit) {
            addWidget(make_unique<WText>(title));
            _slider = addWidget(make_unique<WSlider>());
            _text = addWidget(make_unique<WText>(to_string(vinit)));
            _slider->setRange(vmin, vmax);
            _slider->setValue(vinit);
        }

        void setUpdateFunc(function<void(int)> updateFunc) {
            _slider->sliderMoved().connect([=](int v) {
                // call updating function
                updateFunc(v);
                // update slider text
                _text->setText(to_string(v));
            });
        }
};

Enfin, on crée l’application complète à partir d’un template et des éléments définis précédemment.

// main template of the application
const string APP_TEMPLATE = R"(
    <h1>Draw</h1>
    <p> ${slider_r} </p>
    <p> ${slider_g} </p>
    <p> ${slider_b} </p>
    <p> ${slider_width} </p>
    <p> ${canvas_brush} </p>
    <p> ${canvas_draw} </p>
    <p> ${button_clear} </p>
)";

struct App : WApplication {

    App(const WEnvironment & env) : WApplication(env) {
        auto tmpl = root()->addWidget(make_unique<WTemplate>(APP_TEMPLATE));
        auto canvasBrush = tmpl->bindWidget("canvas_brush", make_unique<CanvasBrush>(10));
        auto canvasDraw = tmpl->bindWidget("canvas_draw", make_unique<CanvasDraw>(10, 640, 480));

        auto clearButton = tmpl->bindWidget("button_clear", make_unique<WPushButton>("Clear"));
        clearButton->clicked().connect(canvasDraw, &CanvasDraw::clear);

        // add a slider for the red color channel of the pen
        auto sliderR = tmpl->bindWidget("slider_r", make_unique<Slider>("R", 0, 255, 0));
        // set an updating function that assigns the value v to the red channel
        sliderR->setUpdateFunc([=](int v) {
            canvasDraw->setColor([v](WColor & c) { c.setRgb(v, c.green(), c.blue()); });
            canvasBrush->setColor([v](WColor & c) { c.setRgb(v, c.green(), c.blue()); });
            canvasBrush->update();
        });

        // add sliders for G and B
        // ...

        auto sliderWidth = tmpl->bindWidget("slider_width", make_unique<Slider>("Width", 2, 50, 10));
        sliderWidth->setUpdateFunc([=](int v) {
            canvasDraw->setWidth(v);
            canvasBrush->setWidth(v);
            canvasBrush->update();
        });
    }
};

// start the application
int main(int argc, char ** argv) {
    auto mkApp = [](const WEnvironment& env) { return make_unique<App>(env); };
    return WRun(argc, argv, mkApp);
}

Le fichier obtenu (draw_wt/draw.cpp) est un peu plus long que le code en JavaScript (environ 180 lignes, soit un tiers de plus). Dans l’implémentation proposée ici, les données sont mises à jour directement depuis les éléments de la vue. Pour une application plus complexe, on implémenterait plutôt une vraie architecture MVC classique.

En WebAssembly

Le WebAssembly permet d’intégrer, dans une page web, du code issu de langage comme C, C++ ou Rust, avec des performances plus élevées qu’en JavaScript.

Première implémentation

Dans cette première implémentation avec WebAssembly, l’application est principalement codée en HTML/JavaScript. Seuls les traitements « lourds » sont codés en C++ puis compilés en wasm.

Pour cela, on définit une classe MyCanvas qui implémente les fonctions de dessin et gère sa propre mémoire (attention, l’implémentation fournie, draw_wasm/draw.cpp, n’est pas du tout optimale). La classe et les méthodes nécessaires sont ensuite exportées pour être appelées depuis le code JavaScript.

#include <emscripten/bind.h>
#include <cmath>
#include <iostream>

struct Color {
    uint8_t _r;
    uint8_t _g;
    uint8_t _b;
    uint8_t _a;
};

class MyCanvas {

    private:
        // canvas properties
        int _width;
        int _height;
        std::vector<Color> _data;

        // pen properties
        Color _color;
        int _squareRadius;

    public:
        MyCanvas(int width, int height) : 
            _width(width),
            _height(height),
            _data(width*height)
        {
            clear();
        }

        void clear() {
            memset(_data.data(), 255, _width*_height*sizeof(Color));
        }

        emscripten::val getData() { 
            // get C++ data for filling a JS array
            size_t s = _data.size()*4;
            uint8_t * d = (uint8_t *) _data.data();
            return emscripten::val(emscripten::typed_memory_view(s, d));
        }

        void initDraw(int r, int g, int b, int radius) {
            // set current pen properties
            _squareRadius = radius*radius;
            _color = {uint8_t(r), uint8_t(g), uint8_t(b), 255};
        }

        // draw a line from (x0, y0) to (x1, y1)
        void draw(int x0, int y0, int x1, int y1) {
            // ...
        }

    private:
        // draw a disc at (evt_x, evt_y) using current pen (_color + _squareRadius)
        void drawDisc(int evt_x, int evt_y) {
            // ...
        }

};

// export MyCanvas to JS
EMSCRIPTEN_BINDINGS(MyCanvas) {
    emscripten::class_<MyCanvas>("MyCanvas")
        .constructor<int, int>()
        .function("clear", &MyCanvas::clear)
        .function("initDraw", &MyCanvas::initDraw)
        .function("draw", &MyCanvas::draw)
        .function("getData", &MyCanvas::getData);
}

Le code C++ précédent peut alors être compilé par emscripten. On obtient le code wasm correspondant ainsi que l’interface draw.js permettant d’appeler les fonctions wasm dans du code JavaScript. Pour notre application, on peut reprendre l’implémentation JavaScript et remplacer les fonctions de dessin par le code suivant (draw_wasm/index.html).

    ...

    <script src="draw.js"></script>

    <script>
        Module.onRuntimeInitialized = function() {
            const width = canvas_draw.clientWidth;
            const height = canvas_draw.clientHeight;
            // create a C++ MyCanvas
            const mycanvas = new Module.MyCanvas(width, height);

            function update() {
                // update JS canvas using C++ MyCanvas
                const myarray = new Uint8ClampedArray(mycanvas.getData());
                const myimage = new ImageData(myarray, width, height);
                const mycontext = canvas_draw.getContext('2d');
                mycontext.putImageData(myimage, 0, 0);
            }
            update();

            canvas_draw.onmousedown = function(evt0) {
                // start drawing
                const r = Number(input_r.value);
                const g = Number(input_g.value);
                const b = Number(input_b.value);
                const color = rgbToHex(r, g, b);
                const radius = Number(input_radius.value);
                const ctx = canvas_draw.getContext("2d");
                let p0 = getXY(canvas_draw, evt0);
                mycanvas.initDraw(r, g, b, radius);

                // set callback function for drawing
                canvas_draw.onmousemove = function(evt1) {
                    const p1 = getXY(canvas_draw, evt1);
                    mycanvas.draw(p0.x, p0.y, p1.x, p1.y);
                    update();
                    p0 = p1;
                };
            };

            canvas_draw.onmouseup = function(evt) {
                // stop drawing -> remove callback function
                canvas_draw.onmousemove = {};
            };

            button_clear.onclick = function() {
                // clear C++ MyCanvas
                mycanvas.clear();
                // update JS canvas
                update();
            }
        }

        // update HTML elements (RGB span, canvas_brush)
        function updateDom() {
        ...

Au lieu d’utiliser les fonctions de dessin du canvas HTML5, on utilise ici la classe C++ MyCanvas et on recharge les données de MyCanvas vers le canvas HTML5. Ceci introduit des allocations mémoire et n’est donc peut-être pas la façon optimale de faire.

Ainsi, si emscripten permet assez facilement de compiler du code C++ en WebAssembly et de l’appeler dans du code JavaScript, il faut néanmoins prendre en compte quelques subtilités. Tout d’abord, le code C++ à interfacer doit être un minimum performant. Ensuite il faut éviter les copies mémoires inutiles (on peut faire les allocations côté C++ et les partager côté JavaScript ou inversement). Enfin, il faut réserver les appels WebAssembly à des traitements peu nombreux mais coûteux.

Seconde implémentation

L’implémentation WebAssembly précédente consiste essentiellement en une (mauvaise) réimplémentation des fonctions de dessin des canvas HTML5. La gestion d’événements est toujours faite côté JavaScript et résulte en de nombreux appels à des fonctions wasm peu coûteuses, ce qui n’est pas très intéressant pour WebAssembly.

Dans cette seconde implémentation, on implémente la majeur partie de l’application du côté WebAssembly en utilisant la bibliothèque SDL. Comme cette bibliothèque possède moins de fonctionnalités de dessin que les canvas HTML5, le dessin sera plus basique.

SDL est une bibliothèque assez complète pour développer des jeux vidéos. Elle gère notamment l’affichage et les événements. Pour notre application de dessin, le côté HTML/JavaScript se limite donc à réserver un canvas pour le code WebAssembly. Fichier draw_sdl/index.html :

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>

    <body>
        <h1> draw sdl </h1>

        <p> <canvas id="canvas_draw" oncontextmenu="event.preventDefault()"> </canvas> </p>

        <p><button id="button_clear"> Clear </button></p>

        <script type='text/javascript'>
            var Module = { 
                canvas: canvas_draw,
                onRuntimeInitialized: function() {
                    button_clear.onclick = function() { Module.clear(); };
                }
            };
        </script>

        <script async type="text/javascript" src="draw.js"> </script>
    </body>
</html>

Le code WebAssembly/C++ est très similaire à un jeu SDL classique. Dans le code suivant (draw_sdl/draw.cpp) la fonction display_texture charge, dans le canvas d’affichage, une texture générée par la technique de render-to-texture. La fonction clear permet de nettoyer la texture à afficher. Cette fonction est également exportée pour être connectée au bouton de l’interface.

#include <emscripten.h>
#include <emscripten/bind.h>
#include <SDL2/SDL.h>

const int WIDTH = 640;
const int HEIGHT = 480;

SDL_Window * g_window;
SDL_Renderer * g_renderer;
SDL_Texture * g_texture;  // for rendering to texture

int g_x0 = 0;  // current drawing position 
int g_y0 = 0;
bool g_drawing = false;  // drawing state

// copy texture to displayed canvas
void display_texture() {
    SDL_SetRenderTarget(g_renderer, nullptr);
    SDL_RenderClear(g_renderer);
    SDL_RenderCopy(g_renderer, g_texture, nullptr, nullptr);
    SDL_RenderPresent(g_renderer);
}

// clear and display the texture
void clear() {
    SDL_SetRenderDrawColor(g_renderer, 0, 0, 0, 0);
    SDL_SetRenderTarget(g_renderer, g_texture);
    SDL_RenderClear(g_renderer);
    SDL_RenderPresent(g_renderer);
    g_texture = SDL_GetRenderTarget(g_renderer);
    display_texture();
}

// export function to JS
EMSCRIPTEN_BINDINGS(draw_sdl) {
    emscripten::function("clear", &clear);
}

Enfin le programme principal initialise le canvas et la texture à afficher puis lance la boucle principale, qui gère chaque événement via la fonction iter_one.

// do one iteration of the event loop
void iter_one() {
    SDL_Event event;
    while (SDL_PollEvent(&event)) {
        if (event.button.button == SDL_BUTTON_LEFT) {
            if (event.type == SDL_MOUSEBUTTONDOWN) {
                // start drawing 
                g_drawing = true;
                g_x0 = event.button.x;
                g_y0 = event.button.y;
            }
            else if (event.type == SDL_MOUSEBUTTONUP) {
                // stop drawing 
                g_drawing = false;
            }
        }
        else if (event.type == SDL_MOUSEMOTION) {
            if (g_drawing) {
                // draw a line in the texture, from previous position to current position
                SDL_SetRenderDrawColor(g_renderer, 255, 255, 255, 255);
                SDL_SetRenderTarget(g_renderer, g_texture);
                SDL_RenderDrawLine(g_renderer, g_x0, g_y0, event.motion.x, event.motion.y);
                SDL_RenderPresent(g_renderer);
                g_texture = SDL_GetRenderTarget(g_renderer);
                // display texture
                display_texture();
                // update current position 
                g_x0 = event.motion.x;
                g_y0 = event.motion.y;
            }
        }
    }
}

// init SDL and launch the event loop
int main() {
    SDL_Init(SDL_INIT_VIDEO);
    SDL_CreateWindowAndRenderer(WIDTH, HEIGHT, 0, &g_window, &g_renderer);
    g_texture = SDL_CreateTexture(g_renderer, SDL_PIXELFORMAT_RGBA8888, 
                                  SDL_TEXTUREACCESS_TARGET, WIDTH, HEIGHT);
    emscripten_set_main_loop(iter_one, 0, 1);
    return 0;
}

Ce type d’implémentation correspond mieux à l’esprit de WebAssembly mais nécessite d’utiliser des outils performants côté WebAssembly/C++. Certaines bibliothèques, comme la SDL, sont incluses dans emscripten. Pour les autres bibliothèques, il faut généralement les porter soi-même, ce qui peut rapidement se compliquer…

Conclusion

En conclusion, cette petite application de dessin permet de confirmer les tendances actuelles en développement web, notamment son vaste champ d’application et ses nombreux outils.

L’écosytème de base HTML/CSS/JavaScript apporte déjà de nombreuses fonctionnalités. JavaScript étant assez haut-niveau, développer en pur-JavaScript n’est pas complètement déraisonnable et permet d’obtenir un code léger et optimisé. Cependant, comme le typage dynamique et le système de fonction de rappel peuvent être source d’erreurs, il est préférable d’être rigoureux dans sa façon de programmer et d’utiliser des outils de vérification de code et de tests automatisés. Enfin, comme pour tous les langages, il devient vite indispensable de bien architecturer le code lorsque l’application grossit (par exemple selon un schéma MVC).

Les frameworks frontend apportent justement cette architecture de code pour gérer facilement des applications complexes (MVC, flux…). À l’usage ces frameworks sont très pratiques à utiliser même pour des applications simples. Combinés à un langage typé (TypeScript, Elm…) ou à un style de programmation fonctionnelle, ils réduisent considérablement les sources d’erreurs possibles. En revanche, ils nécessitent une phase d’apprentissage et un écosystème plus lourd et plus complexe.

Les frameworks basés widgets comme C++ Wt (et également les frameworks d’applications mobiles) utilisent la même approche classique que les frameworks desktop comme Qt ou Gtkmm. Ils permettent notamment de réutiliser et de personnaliser facilement des composants mais nécessitent également d’architecturer soigneusement le code pour des applications plus complexes. À noter que Wt est naturellement fullstack, ce qui facilite les communications client-serveur mais peut introduire un peu de latence côté-client.

Enfin, WebAssembly permet d’appeler, dans une page web, du code C/C++/Rust précompilé. Cette technologie est actuellement assez utilisable même si elle peut parfois demander quelques efforts de mise en place (portage de bibliothèques via emscripten). Cependant, elle est à réserver à des applications particulières, par exemple des traitements ponctuels lourds ou, à l’opposée, des applications interactives gérées complètement côté WebAssembly.