Whole web app in C++ with DOM interaction

Question

I have recently heard of compiling C++ code to javascript using emscripten and how, if asmjs optimizations are done, it has the potential of running applications really fast.

I have read several post, tutorial and even heard some very interesting youtube videos. I have also run the hello world example successfully.

However, I don't know the full capabilities of this approach, specially if an entire new webapp can/should be written in C++ as a whole, without glue code.

More concretely I would like to write something similar to the following C++ (as a reference not working code).

#include <window>
class ApplicationLogic : public DOMListener{
private:
    int num;
public:
    ApplicationLogic():num(0);
    virtual void onClickEvent(DOMEventData event){
        num++;
    }
    virtual ~ApplicationLogic(){}
}

int main(){
    DOMElement but = Window.getElementById("foo");
    ApplicationLogic app();
    but.setOnclick(app);
}

I hope it makes clear the idea, but the goal is to achieve something similar to:

• A static function that initializes the module run when the window is ready (same behaviour that gives jquery.ready()). So listeners can be added to DOM elements.

• A way to interact with the DOM directly from C/C++, hence the #include <window>, basically access to the DOM and other elements like JSON, Navigator and such.

I keep thinking of Lua and how when the lua script includes a shared object (dynamic linked library) it searched for a initialize function in that .so file, and there one would register the functions available from outside the module, just exactly how the return of the function module created in asmjs acts. But I can't figure out how to emulate jquery.ready directly with C++.

As you can see I have little knowledge about asmjs, but I haven't found tutorials or similar for what I'm looking for, I have read references to standard libraries included at compile time for stdlibc, stdlibc++ and SDL, but no reference on how to manipulate the DOM from the C++ source.

Answer 1

what's up. I know this is an old topic, but I'm posting here in case anyone else comes here looking for the answer to this question (like I did).

Technically, yes it is possible - but with a ton of what you called "glue code", and also a good bit of JavaScript (which kind of defeats the purpose IMO). For example:

#include <emscripten.h>
#include <string>

#define DIV 0
#define SPAN 1
#define INPUT 2
// etc. etc. etc. for every element you want to use

// Creates an element of the given type (see #defines above)
// and returns the element's ID
int RegisterElement(int type)
{
    return EM_ASM_INT({
        var i = 0;
        while (document.getElementById(i))
            i++;
        var t;
        if ($0 == 0) t = "div";
        else if ($0 == 1) t = "span";
        else if ($0 == 2) t = "input";
        else
            t = "span";
        var test = document.createElement(t);
        test.id = i;
        document.body.appendChild(test);
        return i;
    }, type);
}

// Calls document.getElementById(ID).innerHTML = text
void SetText(int ID, const char * text)
{
    char str[500];
    strcpy(str, "document.getElementById('");
    char id[1];
    sprintf(id, "%d", ID);
    strcat(str, id);
    strcat(str, "').innerHTML = '");
    strcat(str, text);
    strcat(str, "';");
    emscripten_run_script(str);
}

// And finally we get to our main entry point...
int main()
{
    RegisterElement(DIV);    // Creates an empty div, just as an example
    int test = RegisterElement(SPAN);    Creates an empty SPAN, test = its ID
    SetText(test, "Testing, 1-2-3");    Set the span's inner HTML
    return 0;    And we're done
}

I had the same question and came up with this solution, and it compiled and worked as expected. But we're basically building a C/C++ API just to do what JavaScript already does "out of the box". Don't get me wrong - from a language standpoint I'd take C++ over JavaScript any day - but I can't help but think it's not worth the development time and possible performance issues involved in a setup like this. If I were going to do a web app in C++, I would definitely use Cheerp (the new name for Duetto).

Answer 2

As somebody pointed out already, if you start of with a fresh codebase exclusively for the web, then duetto could be a solution. But in my opinion duetto has many drawbacks, like no C allocators, which would probably make it very hard if you want to use 3rd party libraries.

If you are using emscripten, it provides an API for all kinds of DOM events, which does pretty much exactly what you want.

emscripten_set_click_callback(const char *target, void *userData, int useCapture, int (*func)(int eventType, const EmscriptenMouseEvent *mouseEvent, void *userData));

hope this helps