Felgo et le QML, l'alternative à Flutter et React Native ?

Lorsque j’ai découvert Felgo je suis très vite tombé amoureux de ce système de développement !

C’était en 2016 et on travaillait sur un projet d’application mobile pour un client.

A cette époque j’utilisais Xamarin sous Visual Studio avec le puissant couple XAML/C# et l’immense librairie .Net de Microsoft !

Mais j’étais persuadé qu’il devait exister autre chose, sans doute aussi évolué mais plus léger, plus souple…

En fait je voulais une technologie qui réunisse les critères suivants :

Simplicité, efficacité, et rapidité pour le montage des écrans sur la base des maquettes de design (UX/UI)
C’était mon critère principal de départ afin pouvoir prototyper rapidement une appli mobile ou autre application.

Multi-plateforme (un seul code source pour différent matériels), tout en étant capable d’obtenir des applications « natives » (au moins pour Android et iOS), capables de faire appel à des fonctionnalités spécifiques de chaque OS.
Robustesse ! Donc s’appuyant sur un vrai langage de programmation orienté objet, et suffisamment répandu (comme le C#, le C++, Java, etc.), le tout avec un éco-système complet (APIs, plugins…). Conclusion, je ne cherchais pas les solutions plus ou moins dérivées du HTML/Javascript (React p.ex.) et mise à la disposition des développeurs web afin de leur permettre d’accéder au développement d’applis mobiles.
Une forte communauté (afin de recevoir des réponses rapidement et sur n’importe quel problème en cas de difficulté)
Avec un IDE (environnement de développement) complet, puissant et prêt à l’emploi (et non pas avec pas une myriades d’outils à installer et configurer avant de faire la moindre ligne de code)
Avec une documentation en ligne complète et regroupée à un seul endroit.

Evolutivité : pas une nouvelle technologie de dev, qui risque de tomber aux oubliettes au bout de quelques mois
Avec un éditeur intégré à l’IDE et d’un niveau suffisant (coloration syntaxique réglable, IntelliSense etc.)
Etc…

Vous pensez peut-être que je suis un peu trop exigeant ?

En réalité je le suis toujours quand il s’agit de choisir avec quoi je vais coder du matin au soir (et du soir au matin parfois ).

Et à plus forte raison lorsque l’on travaille en équipe sur des applis complexes.

Je reconnais que j’étais déjà bien satisfait du couple XAML/C#, sous Visual Studio avec le framework .Net et Xamarin Forms…

Pourtant le montage d’une IHM (interface homme machine, plus communément connu comme UX/UI design aujourd’hui), destiné à une petite application classique et modeste (mais jolie et moderne), était bien trop lourd à mon goût avec Xamarin, en raison notamment du XAML.

Je ne voulais pas non plus aller vers les solutions en « no-code »… Ce genre d’outils est toujours limité d’une certaine manière, et là ou l’on gagne du temps au départ, on en perd plus tard. Bref ça ne correspond pas à mon état d’esprit.

Je cherchais donc, en parallèle au démarrage de mon projet, quelque chose qui puisse regrouper les critères précités.

Et là, après quelques recherches, je tombe sur Felgo !

Mais qu’est-ce donc ?

Un système complet de développement multiplateforme créé par une startup Autrichienne, qui semblait répondre à tous mes critères…

Toutefois, certains aspects me préoccupaient (avant d’en avoir une vue précise) :

Felgo se présente comme une sorte de surcouche à un autre framework : Qt (prononcez « cute », en anglais ou « kioute » en français, et non pas « ku té » comme je l’entends parfois…).

Qt est une société bien plus importante que la startup autrichienne mais dont je n’avais pas souvent entendu parler. Je devais donc enquêter un peu sur ce Qt et sur ce tandem Felgo/Qt

Le langage de base de ce framework est le C++, et bien que sa qualité ne fasse aucun doute, j’aurai préféré un langage un plus moderne comme C# ou Java, qui soit un peu moins contraignant que le C++.

Le langage pour monter les interfaces dans Qt c’est le QML et là j’étais un peu mitigé par la présence du javascript comme langage d’accompagnement, car je ne l’appréciais pas trop à l’époque (trop permissif et pas assez évolué).

Donc j’ai creusé un peu du côté du QML et là j’avoue que j’ai été très vite séduit par les 1ers exemples que j’ai vus.

Laissez moi vous faire découvrir ce langage astucieux, facile à coder et très puissant…

Pour résumer le QML est un langage basé sur la syntaxe JSON, qui s’articule très bien dans l’esprit « orienté objet » et dont les valeurs et expressions se manipulent en Javascript.

Par Exemple :

AppButton { 
    text: "Valider" 
    onClicked: { 
        // code javascript... 
    } 
}

Et bien entendu comme tout élément avec une syntaxe JSON ça s’imbrique !

Exemple :

Rectangle { 
    color: "#FF00FF" 
    width: 100 
    height: 50 
    Text { 
        text: "Hello world!" 
        anchors.centerIn: parent 
    } 
}

La propriété anchors.centerIn permet de centrer un objet par rapport à un autre (ici le parent est donc l’objet Rectangle)

Du coup si on attribue une position en (x, y) à notre objet Rectangle :

Rectangle { 
    x: 20 
    y: 10 
    color: "#FF00FF" 
    width: 100 
    height: 50 
    Text { 
        text: "Hello world!" 
        anchors.centerIn: parent 
    } 
}

L’objet Text étant l’enfant de l’objet Rectangle, du coup celui-ci reste positionné dans le rectangle (même si on retire la propriété anchors.centerIn)

Le truc fondamental à bien comprendre, c’est que tout ce qui se trouve à droite des définitions de propriétés des objets QML, c.a.d. au-delà des « : », comme par exemple dans

text: « Hello world! »

et bien c’est en réalité du Javascript !

C’est évalué automatiquement par le moteur QML comme une expression Javascript

« Hello world! » est donc tout simplement une chaîne de caractère Javascript.

Donc on peut attribuer au niveau de chaque propriété QML, une expression Javascript …mais aussi une fonction ou tout une portion de code, tant que ça renvoie une valeur !

Exemple :

AppButton { 
    text: "Valider" + maVariable 
    onClicked: { 
        // code javascript... 
    } 
}

Ici la propriété text de l’objet AppButton va donc prendre pour valeur, la concaténation de la chaine de caractère « Valider » avec la valeur contenue dans la variable maVariable.

Et bien entendu, si j’ai une fonction Javascript, définie quelque part dans mon code, qui s’appelle maFonction() et qui renvoie une valeur, je peux très bien mettre ma propriété text de cette façon:

text: maFonction()

Voilà entre autres pourquoi j’adore le QML ! C’est simple, souple et ça respecte un certain standard…

Je précise 2 choses :

le moteur Javascript intégré au QML et embarqué dans la version 5 de Qt est le « ECMA-262 7th edition » – Il s’agit donc d’un vrai javascript complet et standard et pas d’une version édulcorée ou adaptée.

Les habitué(e)s du Javascript auront peut-être remarqué l’absence de « ; » en terminaison des lignes dans mes exemples.

Je rappelle qu’en javascript, contrairement au langage C par exemple, le retour ligne est synonyme de terminaison de ligne, le « ; » n’est donc obligatoire que lorsque l’on place plusieurs expressions sur la même ligne.

Je vous laisse découvrir cet étonnant framework, très complet, puissant, facile à apprendre, et qui permet de développer des applis bien plus rapidement qu’avec tout ce que j’ai pu voir passer avant :

Felgo.com

Une prochaine fois je vous parlerai des composants et outils, très judicieux, proposés par Felgo, en compléments de la librairie QT Quick, et qui font gagner un temps non négligeable pour développer de l’appli ou du jeu !