לפני כמה ימים שוחררה גירסה 6.4 של Qt ובעיניי הפיצ'ר הכי מלהיב שם הוא התמיכה המובנית ב Web Assembly. היום מה שכבר קיים ועובד ב Qt הוא:

1. תמיכה מלאה של Qt Creator ב Web Assembly, כך שאתם יכולים לקחת כל פרויקט Qt שכבר יש לכם (ווידג'טס או QML) ופשוט לקמפל אותו לקובץ wasm.

2. אירגון של כל הקוד שמסביב כך שהבניה מייצרת לכם תיקיית dist עם קובץ HTML ראשי וקבצי JavaScript, כך שכל מה שצריך לעשות זה לטעון את הקובץ HTML והתוכנית רצה בדפדפן, ונראית בדיוק כמו שהיא נראתה כאפליקציית Desktop.

3. מימוש של קוד עוטף סביב מנגנונים של הדפדפן, למשל בשביל לקרוא קבצים, לפתוח בקשות רשת או כל דבר אחר שאפליקציית Desktop היתה עושה. אז עכשיו קריאה לפונקציה QFileDialog::getOpenFileContent בעצם משתמשת ביכולות של הדפדפן כדי להקפיץ למשתמש חלון לבחירת קובץ ולטעון אותו.

כרגע החיסרון המרכזי הוא גודל הקבצים. תוכנית Qt פשוטה שבניתי וקימפלתי ל Web Assembly (קוד בהמשך הפוסט) הגיעה ל 19 מגה אחרי קומפילציה. אני מקווה שבגירסאות העתידיות של Qt הם יעבדו על זה ויצליחו לרדת למספר חד ספרתי של מגות.

דמו? ברור. זה קוד Qt שבניתי ב Qt Creator. התוכנית היא בסך הכל קובץ אחד main.cpp שבונה מונה לחיצות:

#include <QApplication>
#include <QtWidgets>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QWidget w;
    auto clicked = 0;
    auto btn = new QPushButton("Add 1");
    auto result = new QLabel(QString("Button clicked %1 times").arg(clicked));
    w.setLayout(new QVBoxLayout());
    w.layout()->addWidget(new QLabel("Hello World"));
    w.layout()->addWidget(result);

    w.layout()->addWidget(btn);

    QObject::connect(btn, &QPushButton::clicked, [&]() {
        clicked++;
        result->setText(QString("Button clicked %1 times").arg(clicked));
    });

    w.show();
    return a.exec();
}

יש פה חלון, בתוכו שתי תיבות טקסט וכפתור, וכל פעם שלוחצים על הכפתור ערך המשתנה עולה ב 1 והטקסט בתיבה משתנה. המקום על המסך מחולק בין הכפתור ותיבות הטקסט והרכיבים גדלים לפי הכללים של Qt כדי למלא את כל החלון.

אחרי קומפילציה מקבלים קובץ wasm ענקי, שני קבצי js וקובץ html. אפשר לראות את כולם בריפו שיצרתי כאן: https://github.com/ynonp/qt-wasm-demo/

ודמו רץ בגיטהאב פייג'ס בקישור הזה: https://ynonp.github.io/qt-wasm-demo/

פשוט תלחצו על הכפתור שבתחתית המסך ותראו את הטקסט בתיבה משתנה.

אם גם אתם רוצים לשחק עם הגירסה כל מה שצריך זה להוריד ולהתקין את Qt מהקישור הזה: https://www.qt.io/download-qt-installer

ולהתקין את Emscripten מהקישור הזה: https://emscripten.org/docs/getting_started/downloads.html

נ.ב. מבחינת רישיון ממה שאני מבין בשביל לבנות אפליקציות מסחריות יש לקנות רישיון מסחרי בגלל שהקומפילציה ל Web Assembly היא סטטית. עושה רושם שהם עובדים על אפשרות לקומפילציה דינמית מה שיאפשר להשתמש ברישיון ה LGPL ולבנות גם יישומים מסחריים בקוד סגור ב Web Assembly.